ASP.NET 4.5 New Features

ASP.NET Web developers need to understand Visual Studio, NuGet , ASP.NET and Windows Azure for developing cloud services. Visual Studio 2012 has some cool improvements for web development.This article outlines the HTML5 and CSS3 improvements in the Visual Studio editor, Page Inspector and new features in ASP.NET 4.5. Using Visual Studio 2012 you can now write HTML, JavaScript, CSS and Razor, C# and VB applications. If you are more interested in knowing what is new in WebForms 4.5 then you can read this article.

The following show the tools and frameworks required for the ASP.NET Web Development:

ASP.NET1.jpg

NuGet is a package manager, it is how you bring your dependencies to your project. This is a fundamental thing that ASP.NET web developers should know and use. The ASP.NET 4.5 Framework is as in the following:

ASP.NET2.jpg

Using this framework, you should be able to create web sites and web services. You have web forms for control-based or event-based development. Web pages for very light PHP style pages using the Razor syntax. You also get MVC and the Web API. SignalR that you can use for real-time communication. Using this framework you can develop HTML5, HTTP Services , APPs for office, Mobile Applications and real-time applications using web sockets.

Model Binding with ASP.NET Web Forms

Using Strongly Typed Data Controls, you can set ItemType for a data control on your page and then in the page you will get intellisence and type checking.

The following sample shows setting the item type for a data control:

<ul>
<asp:Repeater ID="productRepeater" runat="server"
ItemType="WebApplication3.Models.Product">
</asp:Repeater>
</ul>

The following sample shows referring to the properties using the Item keyword:

<ul>
<asp:Repeater ID="productRepeater" runat="server"
ItemType="WebApplication3.Models.Product">
<ItemTemplate>
<li>
<a href="ProductDetails.aspx?Id= <%#: Item.ProductID%>">
<%#: Item.ProductModel %> <%#: Item.ProductCategory %>
</a>
</li>
</ItemTemplate>
</asp:Repeater>
</ul>

The following sample shows model binding getting the data:

<asp:Repeater ID="productRepeater" runat="server"
ItemType="WebApplication3.Models.Product"
SelectMethod="productRepeater_GetData">
</asp:Repeater>

The select method code is as in the following:

ASP.NET3.jpg

You tell your repeater control about your select method and it returns an IQueryable. It is a simpler way to bind the data to your controls especially when you are a repository pattern that contains Create, Update and Delete methods.

WebForms: Friendly URLs

Friendly URLs in WebForms use the same routing system in MVC and also use the control binding.

ASP.NET4.jpg

Bundling and Optimization

Web pages have external references like CSS, JavaScript and Images. Bundling combines the CSS and JavaScript requests, for example if you have 5 CSS files it will then bundle them into one CSS file. Minification is the process of compressing the bundled files.

It removes the white-space and it changes the values of your variables and it also removes the comments. The convention is , if you have a file foo.js then after minification the file has the name foo.min.js. You will see the BundleConfig.cs file under the App_Start folder.

The EnableDefaultBundles method will bundle all js files and folders like scripts. You can also add various kinds of static bundles as in the following:

bundles.Add(new ScriptBundle("~/bundles/WebFormsJs").
Include(
"~/Scripts/WebForms/WebForms.js",
"~/Scripts/WebForms/TreeView.js",
"~/Scripts/WebForms/WebParts.js"));

You can also do the dynamic bundling by adding your own folder name that would not be shown in your physical location by adding all the required files from the include directory, as in:

bundles.Add(new ScriptBundle("~/Scripts/Virtual", "*.js").IncludeDirectory("~/Scripts/bundle", "*.js"));

The folder virtual does not really exist. You can also do the dynamic bundling using CoffeeScriptCompiler and IBundleTransform and you need to override the process method as in the following:

bundles.Add(new DynamicFolderBundle("coffee", "*.coffee", new CoffeMinify()));

CoffeMinify is a custom class that does the minification for JavaScript files using CoffeeScriptCompiler; see:

using System.Web.Optimization;
using SassAndCoffee.Core;
using SassAndCoffee.JavaScript.CoffeeScript;
public class CoffeMinify : JsMinify
{
public CoffeMinify() { }
public override void Process(BundleContext context, BundleResponse response)
{
response.Content = new CoffeeScriptCompiler().Compile(response.Content);
base.Process(context, response);
}
}

Page Inspector

Page Inspector works with Websites, Web forms and MVC. You can use Page Inspector by right-clicking on a .aspx page or through the browser menu. See:

ASP.NET5.jpg

It opens an integrated browser inside the Visual Studio, on the lower left corner you will get live DOM source editor. When you hover on the element it then shows you the element that you are inspecting and if you want to see what made that element then click on Inspect as in the following:

ASP.NET7.jpg

ASP.NET and HTML5 works together and more on this topic can be read here and Web Forms 4.5 features can be read here.