Wijmo IntelliSense in Visual Studio 2012

Thanks to the efforts of Mads Kristensen and friends, Visual Studio now has syntax highlighting and auto-complete for Knockout. You can get these features by installing the ASP.NET and Web Tools 2012.2. Read more about KO integration in VS in this great post from John Papa. As of Wijmo Version 2.3.5 we have added support for these features in our Knockout Wijmo NuGet package. Let's take a look at how this new tooling support works. Note: Make sure to install Visual Studio 2012 with ASP.NET Tools 2012.2 first!

Create Project

Create a new "ASP.NET MVC 4 Web Application" project in Visual Studio 2012. In the ASP.NET dialog, select "Single Page Application". This is a new Knockout-powered project template from Microsoft. It comes with a default working MVVM ToDoList implementation.

Add NuGet Packages

Now, let's add Wijmo (including Knockout support) to our project. To do this, we will install the knockout.wijmo package. It will automatically install everything needed to use wijmo and knockout in your application. To install it, right-click on your project and choose "Manage NuGet Packages". Then search for "wijmo". Finally, click install on Knockout Wijmo. Next, you will add the script and stylesheet references to the Shared/_Layout.cshml View. I did this by adding bundles to App_Start/BundleConfig.cs like so.

bundles.Add(new ScriptBundle("~/bundles/wijmo").Include(  
            "~/Scripts/jquery.wijmo-open.all.{version}.min.js",  
            "~/Scripts/jquery.wijmo-complete.all.{version}.min.js"));  

bundles.Add(new StyleBundle("~/Content/wijmo/css").Include(  
            "~/Content/jquery.wijmo-open.{version}.css",  
            "~/Content/jquery.wijmo-complete.{version}.css"));  


bundles.Add(new StyleBundle("~/Content/themes/aristo/css").Include(  
            "~/Content/themes/aristo/jquery-wijmo.css"));  

bundles.Add(new ScriptBundle("~/bundles/knockout").Include(  
            "~/Scripts/knockout-{version}.js", "~/Scripts/knockout.wijmo.js"));  

Enjoy IntelliSense

If we open the Home/Index.cshml View we can see the nice syntax highlighting for Knockout bindings. But we are really interested in getting auto-completion when writing Views. So lets create a <table> element and add a data-bind attribute. Then start typing "wij" to see all of our widgets pop up! And that's not all, we can actually get auto-completion for ViewModel properties too. We can try that by selecting "wijgrid" from the IntelliSense and then specifying it's data option. When doing so, you will notice a list of possible ViewModel properties to bind to. If we add the grid and bind it with some options like so.

<table data-bind="wijgrid: { data: Todos, columnsAutogenerationMode: 'none', allowEditing: true, columns: [{ headerText:'Done', dataKey: 'IsDone', dataType: 'boolean' }, { headerText:'Item', dataKey:'Title'}] }"></table>

Now we have the wijmo grid integrated into the ToDoList app.

Try It Yourself

Just like that we are one step closer to making JavaScript development first-class in Visual Studio. I spend most of my time writing JS in VS, so this is a welcome enhancement to me. I highly recommend you download the new ASP.NET Tools and try Knockout Wijmo IntelliSense in Visual Studio!