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

Resources

Archives