vs_2015_header

Visual Studio .NET – I ♥ U

Way back in 2001 I was just out of college and had taken training on ASP - yes you heard it right, Active Server Pages. I got placed in a small company in a small city and I was pumped. It was during this time that my stint with .NET started.

I was part of a team which was building a prototype of a product using the .NET framework. Specifically it was a web app and hence used the ASP.NET framework. We were using Visual Studio 2000 and .NET Framework 1.0. That was close to 14 years ago and my love for Visual Studio has grown over the years. In these 14 years, never, ever in my wildest dreams had I thought of developing ASP.NET web apps outside of the Visual Studio .NET IDE.

But something changed last year. In April of 2014, at the Build Developer Conference, Microsoft announced the launch of a new lightweight, cross-platform code editor for developing modern web applications named Visual Studio Code. In this article, we will take a lap around what is involved in creating an ASP.NET 5 based web application using Visual Studio Code.

Hello Visual Studio Code

Visual Studio Code is free to download from the official website. Whether you are on Linux, Mac or Windows - it doesn't matter. You can download and run VS code on your platform.

Setting up Visual Studio Code is fairly simple, but you get stuck you can always check the setup documentation.

Visual Studio Code is just a file-based code editor and doesn't have all of the bells and whistles of the full Visual Studio .NET IDE. It is lightweight, by design. However, the editor has ton of features that it supports for things like IntelliSense for code completion, Peek Definition to peek at a function's code without navigating, code refactoring and more. Visual Studio Code also supports variety of languages tsuch as CoffeeScript, F#, Go, Jade, Java, Handlebars, Powershell, and Python, to name a few. You can check out the language support here.

What excites me with Visual Studio Code is its ability to support runtimes like ASP.NET 5 and Node.JS. If you have been following things around web development with the Microsoft Stack, you will be aware that ASP.NET 5 (the new version of ASP.NET) supports cross platform development now. This means that you can develop an ASP.NET application on a Linux or Mac or Windows environment as well as run that web app on Linux or Mac or Windows environment. Not only that, you don't need to have Visual Studio .NET IDE to do this.

Visual Studio Code is all you need to get going with ASP.NET 5 and that's what kind of freaks me out!

Installing ASP.NET 5 & DNX (.NET Execution Environment):

ASP.NET 5 has been built from scratch to make sure it adheres to a modern web app paradigm and that the apps developed using it are "cloud ready." The key aspect of ASP.Net 5 is that it is flexible and modular - it offers minimal overhead and allows us to choose only what we want as part of our web app.

DNX stands for Dot Net eXecution Environment.

The installation guidelines for ASP.NET 5/DNX is different depending on the platform.

What's Yeoman?

If you come from Visual Studio .NET IDE background, you will be wondering, "Is there a File > New > ASP.NET project template?". Visual Studio Code is a file-based code editor that its let's you just open a file and start editing. So we will need some external help to get our ASP.NET Project template going.

Yeoman is a popular, command-line scaffolding tool that also provides a basic ASP.NET template to start with. Yeoman can be installed using NPM, which means you will need to have Node.JS installed.

If don't have Node on your system, go ahead and install it. Apart from Yeoman, we will also need some other supporting tools like the ASP.NET Generator, Grunt task runner and Bower. You can do this in one command. On a command prompt type the following command and click enter:

npm install –g yo grunt-cli generator-aspnet bower

Next up, let's build a web application.

Creating the Web App:

Let's step through how to scaffold a new ASP.NET 5 Web App.

  1. Open a command prompt and navigate to the location where you want to create your new web app
  2. Enter the following command at the command prompt

    yo aspnet
  3. Yeoman will display the application options for the aspnet generator. The options are:

    • Console Application
    • Web Application
    • Web Application Basic (no membership/authentication)
    • Web API application
    • Nancy ASP.NET Application
    • Class Library
    • Unit test project

    Select Web Application Basic for now. Use the arrow keys to select the option and press Enter.

    Fig 1. Yeoman ASP.NET Generator

    Fig 1. Yeoman ASP.NET Generator

  4. Next we need to name the web app. I am using HelloWorld (who wouldn't?) as the name of our sample ASP.NET 5 Web app. Type the name and then press Enter. Yeoman will go ahead and scaffold our application.

  5. The directory in which our app will be created is the same as the name we just gave Yeoman. Change the directory to your web app directory. In my case it will be "HelloWorld".

    cd HelloWorld
  6. Via the command prompt, open Visual Studio Code

    code .
  7. Visual Studio Code will launch and load the HelloWorld project. The files in the project will be displayed in the Explore window.

    Fig 2. Visual Studio Code Editor

    Fig 2. Visual Studio Code Editor

  8. From within the Visual Studio Code editor, select View > Command Palette option. In the Command Palette enter the following command:

    dnx: dnu restore - (HelloWorld)

The above restore command installs the necessary NuGet packages required for running our web application. It launches a command prompt where all the packages are downloaded. Once everything is done, we will receive a message saying that it has completed.

Running the Web Application:

Now that We have successfully created a web application, it's time to run it and take a look at the output.

  1. In Visual Studio Code, open the command palette by selecting View > Command Palette. Enter the following command to run the application:

    dnx: kestrel -(HelloWorld,Microsoft.AspNet.Hosting--server Kestrel–config hosting.ini

    Note: When you start typing the command, the command palette will prompt you the full command in the list. You can select the command from the list and the command will be executed.

    Fig 3. Running the Web App

    Fig 3. Running the Web App

  2. Open a browser and navigate to the http://localhost5000.

    Fig 4. Asp.NET 5 Web Application output

    Fig 4. Asp.NET 5 Web Application output

We just created an ASP.NET Web Application outside of the Visual Studio .NET IDE. It seems that I need to start accepting this fact now – ASP.NET is no longer Windows only. We now go cross platform - both in terms of development and deployment!

Integrating the Telerik UI for ASP.NET MVC Suite

Telerik offers UI suite known as UI for ASP.NET MVC. It is powered by Kendo UI under the hood and we provide HTML Helpers that we call "Kendo UI wrappers." The Kendo UI wrappers make it easy to work with Kendo UI controls and speed up your development.

Here are the steps to add UI for ASP.NET MVC to our project:

  1. Open the project.json file and under dependencies, add Kendo as a dependency (currently the Kendo Mvc binary version available is 2015.2.805).

    "dependencies":{
        ...
        "Kendo.Mvc":"*"
    }
  2. Next, open Startup.cs and locate a method named "ConfigureServices". Add the following snippet to the method:

    //Register UI for ASP.NET MVC Helpers
    Services.AddKendo();
  3. Next, open ~/Views/_ViewImports.cshtml and import the namespace Kendo.Mvc.UI.

    @using Kendo.Mvc.UI
  4. Copy the Kendo UI Client Side resource. For this, you will need to install the Kendo UI Professional package (Commercial Package). You can install via Bower by running the following command:

    bower install https://bower.telerik.com/bower-kendo-ui.git

    The Kendo UI Professional Bower package is hosted as a private Git repository and would require you to have an active Telerik account. During installation you will be asked to enter your password multiple times.

    Bower will install the Kendo UI Professional package as "kendo-ui" in wwwroot/lib folder.

  5. Next, we will need to register Kendo UI scripts and styles in ~/Views/Shared/_Layout.cshtml.

    <head>
     ...
    
     <link rel="stylesheet" href="~/lib/kendo-ui/styles/kendo.common-bootstrap.min.css" />
     <link rel="stylesheet" href="~/lib/kendo-ui/styles/kendo.bootstrap.min.css" />
     <link rel="stylesheet" href="~/lib/kendo-ui/styles/kendo.dataviz.bootstrap.min.css" />
    </head>
  6. Now, let's use a Kendo UI widget in one of the views. We will use the Kendo UI DatePicker widget. Open ~/Views/Home.Index.cshtml and add the following snippet:

    <body>
    ...
    
    <script src="~/lib/kendo-ui/js/kendo.all.min.js"></script>
    <script src="~/lib/kendo-ui/js/kendo.aspnetmvc.min.js"></script>
    
    @RenderSection("scripts", required: false)
    </body>
  7. Run the web app using the dnx: kestrel command that we used earlier. Below is the output.

    Fig 5. Kendo UI Date Picker Widget

    Fig 5. Kendo UI Date Picker Widget

Conclusion

And there we have it! A complete ASP.NET 5 Web Application integrated with Telerik UI for ASP.NET MVC widgets developed using only Visual Studio Code with supporting tools like Yeoman and Bower.

Hope you enjoyed the journey. Until next time. Happy Coding!


Telerik Blogging Ninja
About the Author

The Telerik Team

 

Related Posts

Comments

Comments are disabled in preview mode.