Nov
13
2015

Taking Command of ASP.NET 5

I had a great time recording a video on Channel 9 that walked through getting started with ASP.NET 5 just using a command line and text editor of choice (I used notepad and Visual Studio Code).  This post is based on that video, breaking it down into steps you can follow.  Although the content shown is based on Windows 10 using a command prompt, you can follow along with Linux or Mac as long as you (likely) know your command line equivalent.  I only use notepad in this post, but if you installed Visual Studio Code (optional below), just replace all occurrences of notepad in the command line with code instead.

Please make sure you have the following installed:

At the command prompt create a ‘solution’ level folder.  I will name mine demo.

C:\md demo

Navigate into the demo folder.

C:\cd demo

Confirm the latest runtime is installed.

C:\demo\dnvm upgrade

You should have a visual confirmation of the latest version. It will indicate runtimes added in your user profile path, though if they were previously installed, nothing was duplicated. View your list of installed runtimes.

C:\demo\dnvm list

Depending on your environment, you will see one or more runtimes installed. An asterisk preceding a line indicated the default runtime. Create a file named nuget.config.

C:\demo\break>nuget.config

Open the new file in text editor of choice. In this example, I will open with notepad.

C:\demo\notepad nuget.config

In text editor, type the following markup in the nuget.config file and save it:

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <packageSources>
    <clear />
    <add key="api.nuget.org" value="https://api.nuget.org/v3/index.json" />
  </packageSources>
</configuration>

The content of the above nuget.config provides context for where nuget packages can be found for any projects (subfolders) in this solution (current directory). Make sure you have saved the file. Back at the command line, create a subdirectory of demo named src.

C:\demo\md src

Navigate into the src folder.

C:\demo\cd src

Create a file named project.json

C:\demo\src\break>project.json

Open project.json in a text editor

C:\demo\src\notepad project.json

In text editor, type the following JSON notation in the project.json file and save it:

{
  "webroot": "wwwroot",
  "version": "1.0.0-*",

  "dependencies": {
    "Microsoft.AspNet.Server.Kestrel": "1.0.0-beta8",
    "Microsoft.AspNet.Diagnostics": "1.0.0-beta8"
  },

  "commands": {
    "web": "Microsoft.AspNet.Server.Kestrel"
  },

  "frameworks": {
    "dnx451" :  { },
    "dnxcore50" :  { }
  },

  "exclude": [
    "wwwroot"
  ]
}

The content of the above project.json provides project-level information such as where static file content will be located (wwwroot folder) and thus excluded from any compilation. It also indicates what dependencies are required, as well as versioning and supported commands (web).  Make sure you have saved the file.  Back at the command line, run the .NET utility (dnu) to restore packages indicated in the project.json file.

C:\demo\src\dnu restore

After running the above command, you should see information indicating packages are being restored and from what nuget source (it should be the one you defined in the nuget.config file). Back at the command line, create a new file named Startup.cs.

C:\demo\src\break>Startup.cs

Open Startup.cs in text editor.

C:\demo\src\notepad Startup.cs

In text editor, type the following code in the Startup.cs file and save it:

using Microsoft.AspNet.Builder;

namespace CommandDemo
{
    public class Startup
    {
        public void Configure(IApplicationBuilder app)
        {
		app.UseWelcomePage();
        }
    }
}

The above code file will display a simple welcome page (generated via Microsoft.AspNet.Diagnostics, a dependency in project.json) when web site is accessed. Make sure you saved the file.  Back at the command line, use the .NET execution tool (dnx) to start the web server via the web command (defined in project.json).

C:\demo\src\dnx web

After running the above command, you will receive information about the web server starting, how to access the server (likely http://localhost:5000), and how to stop the server. Open a web browser and navigate to the URL specified in the console window. You should see something similar to this:

SNAGHTML481f6ac

If you see something like the above content, congrats!  You just made an ASP.NET 5 web site completely from scratch using nothing but the command line and a simple text editor.  If you did not see the content above, be sure to check for any spelling/syntax errors in all of the files.  Leave a comment if you have any questions or feedback.

    Copyright © Microsoft Corporation. All rights reserved.
    The code provided in this post is licensed under the Microsoft Public License (Ms-PL).
Oct
27
2015

From Nothing to Empty with ASP.NET 5

Edge of the Web

Learn how to build an ASP.NET 5 site without using Visual Studio 2015. Starting with nothing but the command line and a decent text editor, content created is fairly equal to the Empty starter template in Visual Studio 2015.


Tools mentioned in video are below.

    Copyright © Microsoft Corporation. All rights reserved.
    The code provided in this post is licensed under the Microsoft Public License (Ms-PL).
Sep
4
2015

Why Tag Helpers in ASP.NET 5?

As ASP.NET 5 gets closer and closer to an official release date (in beta 7 at the time this post was written), the ASP.NET community is getting more curious (skeptical maybe?) about what is next.  While this is not a “Why ASP.NET 5?” post, it is in the spirit of providing evidence toward that objective – one way or another.  I find getting to know a specific feature that is new to a framework usually exposes underlying improvements to the overall story.  With that said, this is the first post in a series that will dive into tag helpers in ASP.NET 5.

First, I want to define what a tag helper is.  A tag helper is server-side code that allows for the customization of HTML markup (from the developers perspective) and manipulation of output rendered to the browser.  So, when an element is recognized in server-side processing as a tag helper, it is executed to generate HTML that will either enhance or even completely replace the original tag helper markup.   

For those who have been developing with ASP.NET MVC for awhile, tag helpers will supersede HTML helpers.  Many blog posts and articles I have read on the topic of tag helpers typically go into a detailed comparison of the advantages of the new improved syntax over HTML helpers.  While such a comparison is helpful to existing ASP.NET MVC developers, it could potentially confuse a new developer to ASP.NET as to the tag helper’s purpose or value.  So while I will offer a brief comparison a little later in this post, my angle will strive to be on the features as autonomously to HTML helpers as possible.

Now back to the main question at hand – why tag helpers in ASP.NET 5?  To put it simply, the purpose of a tag helper is ultimately bound to the pursuit of making code and markup easier to read and manage.

Let’s look at one example how.  This is the brief comparison I referenced earlier regarding HTML helpers.  In the code below, HTML helpers are defined to create an HTML form for submitting registration information:

For anyone brand new to ASP.NET, but strong in web development, the above code could look very confusing.  Questions might impede understanding like: What does that do?  Does it generate HTML?  How can I control it? …  I will not be answering those questions, since my focus is not to explain the HTML helper.  So let’s look at the same example, but with the syntax using tag helpers:

Consider how a polished web developer new to ASP.NET would read the markup above.  There would be no confusion over what the <form> or <div> tags were.  Instead, it would be apparent that some attributes in the elements are unique to ASP.NET, such as asp-controller.  With a little guess work, it could be inferred that a <form> tag will render to the browser with information on how and what to submit to.  It could also be guessed that the <div> tag is a placeholder for validation information.  Although the exact markup will not be the same as the tag helper, it certainly doesn’t look as foreign as HTML helpers.

How can you get started with tag helpers?  If you are using the default template for ASP.NET 5 with sample content in it, you are already using them!  The registration snippet referenced earlier is from that project.  However, if you start with an empty project, you will need to add support for tag helpers.  First, make sure you have referenced the package in the project.json file as seen here:

Next, to use the existing tag helpers, add the following to a view that uses it or at a global level such as in the _ViewImports.cshtml file:

Now you are ready to use the tag helpers provided with ASP.NET 5.  In an upcoming post, I will demonstrate how and why to develop your own custom tag helper!

    Copyright © Microsoft Corporation. All rights reserved.
    The code provided in this post is licensed under the Microsoft Public License (Ms-PL).
Sep
3
2015

CSharp 6 in ASP.NET 5

Many of the new features of C# 6 aim to reduce the amount of code needed for common tasks.  ASP.NET 5 provides a lean, simplified approach to server-side coding for web sites and APIs. So working with ASP.NET 5 and C# 6 should prove the statement “less is more” to be true!

To showcase the new language features of C# 6, I want to do a simple comparison of how ‘it use to be done’ with ‘how it can be done now’.  To start, consider the following class that could be found in the Models folder in an ASP.NET MVC project:

With the new features of C# 6, you can accomplish the same with much less code, as seen here:

The above class is nearly half the lines of the previous definition, yet accomplishes the same exact objective.  Let’s look at how this was accomplished.

Both classes declared three properties, FirstName, LastName, and FullName.  The first and last name properties are read/write and have a business rule of being initialized to a default value, while the remaining property is read-only.  In the ‘before’ approach, this is how the properties were defined:

Now this can be greatly simplified with new features such as auto property initializers and read-only properties with expression bodies as seen here:

After the FullName you will notice the => syntax which indicates the property will contain an expression body.  The expression in this example is a string concatenation of the first name and last name, which is also simplified with the use of string interpolation.  The $”{s1} {s2}” syntax is much easier to read and manage than the String.Format method approach.

Methods can also contain expression bodies, as seen in the GetLastNameFirst method defined here:

Another feature that can help reduce code a little is the use of using static syntax. Consider the final method of the class:

In the code above, instead of typing String.Concat, I could just type Concat. This is possible because of the using static System.String statement.  This allows calls on all static members of the class without typing the class name first.  Depending on how this gets used, this will either simplify or complicate how your code reads, so use with discretion!

The following code is a controller that creates an instance of both classes in order to test the data values:

Compare line 8 with line 12. Notice the nameof keyword? It provides the simple service of returning the name of the variable it references as a string. Very handy for logging and testing!

If you would like to experiment with the language features, check out the interactive C# 6 demo which contains code very similar to what was shown in this post.  If you would like to examine the code in ASP.NET 5, you can view or download it at https://github.com/palermo4/vs2015/tree/master/AspNet5beta7/Starter7

    Copyright © Microsoft Corporation. All rights reserved.
    The code provided in this post is licensed under the Microsoft Public License (Ms-PL).
Feb
19
2015

Creating an ASP.NET 5 Starter Application

This blog post is part of a series covering ASP.NET 5  To follow along, this post requires installing Visual Studio 2015 CTP.

This post will cover:

  • Creating the project
  • Examining the project
  • Comparing to "Empty project"

The goal of these topics is not only to show “how-to”, but to answer the “what is that…” and “why is that” as well.  It is written as if you are following along in Visual Studio 2015 (tutorial style), yet with enough supplemental detail to simply read (article style). Although not an exhaustive dive into each area, it should provide enough context to quickly get started with ASP.NET 5.

Creating the project

To create a new ASP.NET 5 application, it is necessary to think in terms of projects, not web sites.  The Web Site… option as seen below is still supported in Visual Studio 2015 to support legacy site development.  The specific “ASP.NET vNext” features require the Project… option. With this in mind, in Visual Studio 2015 select from the top menu bar: File --> New --> Project...

visual studio 2015 new project

After selecting Project…, a new project dialogue box appears.  On the left side of the box, select the Web option under the language of preference (Visual C# used below).  From there, select ASP.NET Web Application and choose the solution/project name and file location.  This post will use ASPNET5 as the solution name, and StarterSite as the project name.

asp.net web application project
ASP.NET 5 Class Library and Console Application project templates will be covered in an upcoming blog post

Another dialogue box will appear to fine tune the type of web project desired. In this post, we will look at the ASP.NET 5 Starter Web template.

image

 

Examining the project

The following is the default structure for the ASP.NET 5 Starter Web project:

image

A closer look at the wwwroot folder reveals helpful static (non-compiling) content:

image

The bin folder contains the AspNet.Loader.dll file, which is needed in deployment to IIS.

The css folder contains the site.css file, with minimal style declarations.

The lib folder contains multiple references for support of Bootstrap and jQuery, and contains the _references.js file, which is used to support IntelliSense in Visual Studio.

Back at the project level items, folders such as Controllers, Models, and Views contain what is needed to support MVC.

The Migrations folder contains code to support Entity Framework database migrations.

For an understanding of gruntfile.js and bower.json, take a look at this post by Mike Wasson.

 

Comparing to “Empty project”

In a previous post discussing how to create an ASP.NET 5 site with the “empty” template, there was significantly less folders and files.  This does however help us to appreciate what is truly required for ASP.NET 5 to run.  The folder and files below represent the true minimum:

wwwroot Folder of static files served to client. No code or ‘razor’ goes here
project.json File for managing project settings
Startup.cs File for startup and configuration code

The wwwroot folder in the “empty project” only contains the bin with the AspNet.Loader.dll file – much less than what was shown earlier in this post.

The content of the project.json file and the Startup.cs file also differ from the ‘empty’ with more code to support features commonly used.  The point here is that much has been added to the ‘starter’ template to provide a basis for common tasks associated with web site development.

Summary

In conclusion, there is a solid basis for quick web development when using the ASP.NET 5 Starter Web project template.

    Copyright © Microsoft Corporation. All rights reserved.
    The code provided in this post is licensed under the Microsoft Public License (Ms-PL).
Jan
30
2015

Install Visual Studio 2015 CTP

This blog post is part of a series covering ASP.NET 5

The following is a step-by-step guide to installing Visual Studio 2015 (currently in CTP).  The process for installing has been simplified compared to the preview edition.

  1. Download Visual Studio 2015
  2. Execute the file when the download is complete.  You will be prompted with the following screen capture.  You can keep the default options selected and click Install.
    Features not installed by default are C++ Cross Platform Mobile, Apache Cordova, and support for Windows 8.1 and Windows Phone 8.1 development. If you want any of these, choose the Custom option instead of Typical and select desired features.
    image_thumb2
    The application will start to acquire files and perform the install.
    This process may take awhile.
    image_thumb5
  3. When the previous step completes, you will be prompted to restart:
    image
  4. After restarting your PC, the setup continues and then prompts to launch:
    image

  5. Once launched, you will need to sign in with your Microsoft account:image

Visual Studio 2015 CTP is now installed and ready!

    Copyright © Microsoft Corporation. All rights reserved.
    The code provided in this post is licensed under the Microsoft Public License (Ms-PL).
Jan
8
2015

Creating an ASP.NET 5 Empty Application

This blog post is part of a series covering ASP.NET 5  To follow along, this post requires installing Visual Studio 2015 CTP.

To accelerate the learning process for ASP.NET 5 (aka ASP.NET vNext), this post will cover:

  • Creating the project
  • Examining the project
  • Modifying the project
  • Running the project

The goal of these topics is not only to show “how-to”, but to answer the “what is that…” and “why is that” as well.  It is written as if you are following along in Visual Studio 2015 (tutorial style), yet with enough supplemental detail to simply read (article style). Although not an exhaustive dive into each area, it should provide enough context to quickly get started with ASP.NET 5.

Creating the project

To create a new ASP.NET 5 application, it is necessary to think in terms of projects, not web sites.  The Web Site… option as seen below is still supported in Visual Studio 2015 to support legacy site development.  The specific “ASP.NET vNext” features require the Project… option. With this in mind, in Visual Studio 2015 select from the top menu bar: File --> New --> Project...

visual studio 2015 new project

After selecting Project…, a new project dialogue box appears.  On the left side of the box, select the Web option under the language of preference (Visual C# used below).  From there, select ASP.NET Web Application and choose the solution/project name and file location.  This post will use ASPNET5 as the solution name, and ASPNET5Blank as the project name.

asp.net web application project
ASP.NET 5 Class Library and Console Application project templates will be covered in an upcoming blog post

Another dialogue box will appear to fine tune the type of web project desired.  Choose the ASP.NET 5 Empty template as seen below.  Although you may see other options, notice each is disabled.

asp.net 5 empty project template

Examining the project

Once the project has loaded in Visual Studio, Solution Explorer will reveal the following:

asp.net 5 empty web site in solution explorer

The project corresponds to the following file/folder structure:
folder structure of asp.net 5 empty web site

The following is a brief explanation of the projects file/folder contents:

Project_Readme.html HTML help file (not required to be in project, can be discarded)
*.kproj File for managing ASP.NET 5 projects in Visual Studio
*.kproj.user File for managing project user options in Visual Studio
debugSettings.json File used by Visual Studio for debug setting
   
wwwroot Folder of static files served to client. No code or ‘razor’ goes here
project.json File for managing project settings
Startup.cs File for startup and configuration code

The first four items above are there for the benefit of the developer using Visual Studio.  The latter three are needed for development.

Let’s take a look at the initial contents of the project.json file:

{
    "webroot": "wwwroot",
    "version": "1.0.0-*",
    "exclude": [
        "wwwroot"
    ],
    "packExclude": [
        "node_modules",
        "bower_components",
        "**.kproj",
        "**.user",
        "**.vspscc"
    ],
    "dependencies": {
        "Microsoft.AspNet.Server.IIS": "1.0.0-beta2"
    },
    "frameworks" : {
        "aspnet50" : { },
        "aspnetcore50" : { }
    }
}

As can be seen above, the file contains name/value pairs (see schema at GitHub).  This new approach to managing web configurations (notice no web.config) enables simplified dependency management.  Instead of adding assembly references, you now add NuGet packages as dependencies.  How is this better?  Instead of hard-coupling a reference to an assembly, you can now simply add the dependency by just typing it into the file above.

The contents of the Startup.cs file are as follows:

using System;
using Microsoft.AspNet.Builder;
using Microsoft.AspNet.Http;

namespace EmptySite
{
    public class Startup
    {
        public void Configure(IApplicationBuilder app)
        {
            // In empty template, no code is here...
        }
    }
}

The Configure method of the Startup class is automatically called at runtime. The IApplicationBuilder instance (with parameter name app highlighted above) provides methods to configure the app and to access the HTTP request.  An example of the UseWelcomePage method is used in the article Create a Web API in MVC 6.  However, when I attempt to access this method in my project, I do not see it:

use method

The only methods displayed are just named Use. In the next topic, the project will be modified to enable the use of other methods off of the IApplicationBuilder instance passed in. 

Modifying the Project

In Visual Studio, open the project.json file. We are going to add a dependency to the Microsoft.AspNet.Diagnostics package which is needed to get access to the UseWelcomePage method. Under dependencies, the name of the package is provided paired with the version.  It must be typed accurately.  However, when doing so in Visual Studio, we get discovery and auto-completion via IntelliSense!

adding dependency to project.json file

In the above screen capture, I started adding the Microsoft.AspNet.Diagnostics package.  When ready to add the corresponding value for version, IntelliSense came to the rescue again!

intellisense support for project.json file

After saving the project.json file, the output window in Visual Studio reveals what happened:

output of dependencies added

The Microsoft.AspNet.Diagnostics package was installed along with its dependencies.  Did this modify the project.json file to show the two new packages?  No.  And that is good news.  Why?  There is no need to clutter the file with hierarchies of dependencies.  When a new package is referenced, the dependencies (and their dependencies) are automatically added.  When removed, all dependencies are removed too!

Returning to the Startup.cs file, when I now attempt to access the UseWelcomePage method, it exists!

usewelcomepage method

The Configure method is now updated to look as follows:

public void Configure(IApplicationBuilder app)
{
    app.UseWelcomePage();
}

What will this do?  Let’s find out!

Running the Project

By default, the project will be deployed to IIS Express for testing.  The classic Debug menu options still work here:

debug options in visual studio

When selecting either Start Debugging [F5] or Start Without Debugging [Ctrl+F5], the app will run showing the welcome screen as seen here:

usewelcomepage screen

Summary

This post examined the very essentials of an ASP.NET 5 application. In addition to learning how to create, modify, and run an app, we poked around with the initial files and learned how cool dependencies are managed in the project.json file. 

Be sure to check the series covering ASP.NET 5 for new and updated topics!

    Copyright © Microsoft Corporation. All rights reserved.
    The code provided in this post is licensed under the Microsoft Public License (Ms-PL).
Jan
3
2015

Install Visual Studio 2015

This blog post is part of a series covering ASP.NET 5

The following is a step-by-step guide to installing Visual Studio 2015 (currently in Preview).

  1. Download Visual Studio 2015 Preview
  2. Execute the file when the download is complete.  You will be prompted with a screen similar to what is shown next:image
  3. Select the options relevant to your development needs.  Although all options are checked in the screen capture below, the highlighted items below are essential for web development:image
  4. After clicking the Install button, the application will start to acquire files and perform the install:
    image
  5. If you previously selected Visual C++ Cross Platform Mobile Development or Tools for Apache Cordova, you will see the following:
    image
    This enables features as seen below:
    image
    After clicking Install, you will see a secondary installer to enable the desirable third-party features:
    image
    The secondary installer will confirm selected features:
    image
    The installation will continue with acquiring needed files and applying:
    image
  6. Once Visual Studio 2015 is installed, you will need to sign in with your Microsoft account:image

Visual Studio 2015 is now installed and ready!

    Copyright © Microsoft Corporation. All rights reserved.
    The code provided in this post is licensed under the Microsoft Public License (Ms-PL).
Jan
2
2015

ASP.NET 5

aspnetA hand-picked collection of posts, articles, videos, and resources related to ASP.NET 5. All posts featured on Palermo4.com will be "living content" - that is it will be updated to be in sync with current releases. If you happen to know of any resource that should be here, please leave a comment below!

Overview, Concepts, & Resources

ASP.NET 5 on Palermo4.com

Videos

scott hunter asp.net 5
Scott Hunter on ASP.NET 5
mva asp.net 5 scott hanselman scott hunter
MVA ASP.NET 5
asp.net 5 community standup
Community Standup
    Copyright © Microsoft Corporation. All rights reserved.
    The code provided in this post is licensed under the Microsoft Public License (Ms-PL).

Resources

Archives