No going back: Preventing back button clicking in a browser

A quick tip. When building a single page app, you can prevent the user from pressing the back button in several ways. Here’s the way that seems to be the most effective, and simplest.

history.pushState(null, null, location.href);
window.onpopstate = function () {
    history.go(1);
    alert("The back button should not be used.");
};

 

Advertisements

Extracting params from urls

Imagine you have a script tag and that script tag is passed a value, the script that was run needs to get the parameter accountName:

 

 

 

 

<script src="/myClass/Controller.js?accountName=Joe&id=5"></script>

You can access accountName=Joe inside the Controller.js javascript.

function getAccountName() {

   //NOTE Since older browsers and IE doesn't support document.currentScript.getAttribute('src')
   //you can't use that

    let value = "";
    //IE and EDGE can't use the case-insensitive 'i' in this selector
    const path = $('script[src*="accountName="]').attr("src"); //Look for the script tag of this script and get the URL

     const regex = /(?<name>accountName=)(?<value>.+)&/gm;
    var m = regex.exec(path);
    if (m && m.length) {
        value = m[2];
    }
 
    return value;
}

 

ASP.NET Core 2: Adding Typescript Typings the Easy way

Typings are meta data for javascript objects to help ensure your TypeScript is correctly written. Here’s the easy way to add them to your ASP.NET Core 2 project.

Step 1: Add this Visual Studio 2017 Plugin

PackageInstaller

Step 2: Open or create a ASP.NET Core 2 project. Right Click the project and choose “Quick Install”

Step 3: Add the Typing Engine from npm. It might take a few minutes. npm will add Typings suppport….

Step 4: Change the kind to Typing then select jQuery (or any other one there)

A new Typing folder is added.

Step 5: Drag and drop the index.d.ts file in the root of the Typings folder to the top of your .ts files.

That’s it! You now have Typings support in your TypeScript files.

 

ASP.NET Core 2: Simple SASS and Typescript Compiling

There are many ways to set up services to compile and minify Typescript and SASS style sheets. In this article I’ll be showing the simplest way using Visual Studio 2017 out-of-the-box.

Step 1: Setup (just once)

Install these plugins for Visual Studio 2017 by Mads Kristensen (everything he makes is golden):

• BundlerMinifier
• WebCompiler

Step 2: Create a ASP.NET Core 2 new project. Call it what ever you want

Step 3: Now for the Typescript: Add a Typescript file by right clicking the wwwroot/js folder and choosing Add. Select Typescript

Step 3: Edit the new typescript file, perhaps with something simple like:

var animal = "dog";

 

Step 4: Save the file. You’ll notice a new Javascript file is under it all nicely compiled!

By default all the Typescript magic is done for you. To alter how it’s handled, right-click the project and choose Properties, then Typescript.

Step 5: Adding a Sass file. Right click the wwwroot/css folder. Choose Add and add a new sass stylesheet:

Step 6: Right click the new dogs.sass file and choose Web Compile then Compile. Accept any dialogs that appear. A NuGet package will be added.

A few things have happened. The dogs.css and dogs.min.css are created. As well in the root is a new compilerconfig.json file is made. Here’s where the magic happens.

Step 7: Right click compilerconfig.json and choose Web Compiler then Enable compile on build

Done! SASS files will auto compile when ever you build the project.

Task: Right click each SASS file you add just once and choose Web Compile then Compile.

 

ASP.NET Core 2: Passing Values from Razor to TypeScript scripts

Often in a Razor page in ASP.NET Core we’ll need to pass some value to a Typescript script to have it do something meaningful. Here’s a simple way. (I’m assuming your Typescript file is automatically compiled to JavaScript)

Let’s say we have a mythical ConfigEngine script that does stuff, but needs to know on what ID to do the stuff to.

Step 1: Create a TypeScript file defining the script:

var ConfigEngine = ConfigEngine || (function() {
    var _configId = 0;
    return {
        init: function(configId) { 
           _configId = configId;
        },
        doStuff: function() {
            alert("Did stuff");
        }
    }
}());

Step 2: In your Razor page initialize the script and send it a value from the server:

<script src="~/js/ConfigEngine.js"></script>
 
<script>
    ConfigEngine.init(@(model.configId));
    ConfigEngine.doStuff();
</script>

ASP.NET Core 2: Disabling Backspace Navigation with Typescript

Today’s Tip:

This bit of Typescript will disable the BackSpace navigation on a page, but allow it on Text Boxes and Password Boxes.

$(document)
    .unbind("keydown")
    .bind("keydown",
        event => {
            var doPrevent = false;
            if (event.keyCode === 8) {
                 const d: any = event.srcElement || event.target;
                if ((d.tagName.toUpperCase() === "INPUT" &&
                        (d.type.toUpperCase() === "TEXT" || d.type.toUpperCase() === "PASSWORD")) ||
                    d.tagName.toUpperCase() === "TEXTAREA") {
                    doPrevent = d.readOnly || d.disabled;
                } else {
                    doPrevent = true;
                }
            }
             if (doPrevent) {
                event.preventDefault();
            }
        });