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

QuickInstalll

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

Typings engine

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

typing jquery

A new Typing folder is added.

typing folder

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

drag typings

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

 

Advertisements

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):

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

FileNewASPNETCORE

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

Animalts.png

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!

jscompiled

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:

sass

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.

rightclicksass

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

compile sass nuget

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();
            }
        });

 

ASP.NET Core 2: Environmental Tag Helpers

ASP.NET Core has a nice feature where different parts of your HTML will be rendered for different environment settings like Production and Development.

A great example is having JavaScript sent to the browser that is fully debuggable in development, but minified for production. Here’s how:

<environment names="Development">
    <script src="MyScript.js"></script>
</environment>
 
<environment names="Production,Staging">
    <script src="MyScript.min.js"></script>
</environment>

 

Refresh Kendo Grids after an Add

Kendo is a suburb javascript UI framework and I love it.

Often I need the Grid to refresh from the server its contents after I add a new row. Here’s an easy way to do it.

In your Grid definition handle the RequestEnd event:

.DataSource(dataSource => dataSource
    .Events(events => events.RequestEnd("gridRequestEnd"))

Then wire up this javascript function to cause the Kendo Grid to update if the update was a create event.

function gridRequestEnd(e) {
    var grid = $("#grid").data("kendoGrid");
    var data = grid.dataSource;
    if (e.type == "create" || e.type == "update") {
        if (!e.response.Errors) 
            data.read();
    }
}

 

Enabling TypeScript in Visual Studio 2017

Why Typescript? It’s for you, the developer. It’ll make writing Javascript easier. Basically, you write Typescript, then VS 2017 will convert that to Javascript. Typescript has a bunch of structures that make life easier. But that is for another blog. Let’s enable it on Visual Studio 2017 first.

First you need to enhance VS 2017. Install each of these add-ons. They are awesome and free. You’ll need to turn off Visual Studio 2017 before you install them:

Restart Visual Studio 2017, you’ll notice the Web Essentials will install a bunch of stuff. After it’s done, restart Visual Studio 2017 one last time.

Now we can add a TypeScript file.

Right-click a folder, like “Scripts” or another place you keep your Javascript, then choose Add New Item. Choose Typescript:

Windows10

Now add some javascript to the new file and save it. A new javascipt file is added automatically. (Tap Show/Hide) to see it.

New Typescript

Now go learn some Typescript.