This article presents how you can use an existing users database with a LightSwitch application. I found a sample about linking the current application users to another table but no sample about using an existing users database in a LightSwitch application. This article presents this process step by step.

Here is the steps:

1. Creating the Users Database

LightSwitch applications use the same database tables for security that are used by all the other .NET applications. Since I do not have an existing users database, I will create one here.

As we all know, in order to add the aspnet_* database tables and stored procedures to an existing database, we can use the aspnet_regsql.exe tool. After we have created the database by using SQL Server Management Studio, we can run the following command in order to add our tables.



In the image above, you can see that we are adding the membership, role and profile tables to the LSTestDB database. These are the tables that are used by the LightSwitch application. After this command is run, we have the specified tables in our database. This can be seen in the image below:



LightSwitch uses an additional table. This table is named RolePermissions and it is used to hold all the permissions assigned to the roles. The image below presents the table structure:



We do not need to add this table to our database. The permissions will be held in the LightSwitch application database (that uses the _IntrinsicData connection string)

At this point, the database is ready to go.

2. Creating the LightSwitch Application

The next step is to create the LightSwitch application. For this, we just follow the new project wizard. After the project is opened, we need to set up the application to use Forms Authentication. This can be done from the Access Control tab in the Properties window. This can be seen in the image below:



As you can see from the image above, I have granted the Security Administration permission for debug. This will allow us to access the corresponding screens in the UI. We can run the app now to see that everything is ok. The image below presents the application:



Remember not to add any users as this will add the users to the LightSwitch database.

3. Modifying the LightSwitch Application to Connect to the Existing Users Database

Now comes the interesting part. We will modify some of the LightSwitch generated files in order to connect to our users database. In particular, we will modify the generated web.config file. This file can be found in the ServerGenerated project. This is one of the projects that got generated when we created our application project. In order to get to the web.config file, we need to switch from Logical View to File View as in the image below:



We than need to click Show All Files and open the web.config file from the ServerGenerated project.

In this file, we can see a number of interesting things:

- A connection string has been added that points to the default data source and its name is _IntrinsicData.
- The membership, role and profile providers are set up and use the _IntrinsicData connection string.

We need to do two things in order to make the application use our users database:

- Add a new connection string to our users database. Make the providers use our connection string instead of _IntrinsicData.

We will add the following connection string to the web.config file:

<add name="myDB" connectionString="Data Source=.\sqlexpress;
         Initial Catalog=LSTestDB;Integrated Security=True;
         Connect Timeout=30;MultipleActiveResultSets=True" />

This connection string is very similar to the generated one except that the User Instance property is not set. All that is left now is to point the providers to use our connection string. In case the users already exist in the database, we also need to set the applicationName in the providers to the application from which we want to access the users.

This is it. The first thing we need to do to start testing our work is to add some random permission like in the image below:



After this, we can start our application and add a test user and role. This can be seen in the images below. Our custom permission is also added to the role.





The last thing we need to do is to check our database to see if the data has been added. The image below presents the results.



From the image above, you can see that the user and role were indeed added.

IntelliTrace can be used to collect and analyze the data in production. IntelliTrace speeds debugging by showing history of what happened in your application while you run. This reduces how often you restart the application when you want look at past events. IntelliTrace automatically collects information about events when you start debugging. Some examples of events exceptions, break points and dot net events. You can also use IntelliTrace for calls information.

Configuring IntelliTrace in VS 2012

To turn on IntelliTrace Collection, Open Visual Studio Tools Menu then click options then tick mark the Enable IntelliTrace check box



You can select IntelliTrace Events and choose the events and event categories that you want to collect. You can examine the values for variables , inputs and outputs for functions and procedures. Selecting an event takes you to the code where that event happened.



You can then use the standard debugging windows to review the application state and examine the collected value. You can collect and save this information to a file.



This file contains the information about exceptions, web requests, test steps and other appropriate data. This file helps you to debug your application after crash and identify how to reproduce bugs.

Collecting the information from Applications in Production

You can use stand-alone collector to get IntelliTrace information about applications that are in production. You can use Power-Shell commands to collect the data and delete the collector when you are done. You can download this tool from here



IntelliTrace collects the information with-out interrupting applications operations data. You can now open the file in Visual Studio 2012 , if the application is web then you can select the specific web request and see the details as shown below



After selecting a particular web request then you will get all the associated events to that request , You can select a specific event and choose start debugging



Visual Studio takes you to the code where the event happened , Now you can use standard VS debugging experience with IntelliTrace to examine the collected values. You can definitely save debugging time using IntelliTrace by using applications history and state without restarting. It provides more debugging information and capabilities to find and fix bugs faster.

API reference for extensibility can found here

Introduction

This article describes how to create a permanent user login session in ASP.NET. The sample code includes an ASP.NET MVC4 project to control the user registration and login process. But you can use this technique in any type of ASP.NET project.

Forms Authentication

Before getting into the depth of this article, you must be familiar with forms authentication in ASP.NET. The configuration of form authentication resides in web.config file which has the following configuration-file fragment with the assigned values.

<authentication mode="Forms">
      <forms loginUrl="~/Account/LogOn"
             protection="All"
             timeout="1"
             name=".USERLOGINCONTROLAUTH"
             path="/"
             requireSSL="false"
             slidingExpiration="true"
             defaultUrl="~/Home/Index"
             cookieless="UseDeviceProfile"
             enableCrossAppRedirects="false"/></authentication>

The default values are described below:

- loginUrl points to your application's custom logon page. You should place the logon page in a folder that requires Secure Sockets Layer (SSL). This helps ensure the integrity of the credentials when they are passed from the browser to the Web server.

- protection is set to All to specify privacy and integrity for the forms authentication ticket. This causes the authentication ticket to be encrypted using the algorithm specified on the machineKey element, and to be signed using the hashing algorithm that is also specified on the machineKey element.

- timeout is used to specify a limited lifetime for the forms authentication session. The default value is 30 minutes. If a persistent forms authentication cookie is issued, the timeout attribute is also used to set the lifetime of the persistent cookie.

- name and path are set to the values defined in the application's configuration file.

- requireSSL is set to false. This configuration means that authentication cookies can be transmitted over channels that are not SSL-encrypted. If you are concerned about session hijacking, you should consider setting requireSSL to true.

- slidingExpiration is set to true to enforce a sliding session lifetime. This means that the session timeout is periodically reset as long as a user stays active on the site.

- defaultUrl is set to the Default.aspx page for the application.

- cookieless is set to UseDeviceProfile to specify that the application use cookies for all browsers that support cookies. If a browser that does not support cookies accesses the site, then forms authentication packages the authentication ticket on the URL.

- enableCrossAppRedirects is set to false to indicate that forms authentication does not support automatic processing of tickets that are passed between applications on the query string or as part of a form POST.

FormsAuthentication.SetAuthCookie Method

This method creates an authentication ticket for the supplied user name and adds it to the cookies collection of the response, or to the URL if you are using cookieless authentication. The first overload of this function has two parameters:

- userName: The name of the authenticated user

- createPersisntentCookie: True to create a persistent cookie (one that is saved across browser sessions); otherwise, false.

This method add a cookie or persistent cookie to the browser with an expire time set in "timeOut" parameter with the name and path set in "name" and "path" parameter. The user will be automatically logged out once the cookie is expired. So the user login session depends on the expire of forms authentication ticket saved in browser cookie. Here, I will create a permanent user login session using this technique.

Cookie Helper

The functionality of this class is to add a form authentication ticket to the browser cookie collection with a life time expiry.

public sealed class CookieHelper
{
    private HttpRequestBase _request;
    private HttpResponseBase _response;

    public CookieHelper(HttpRequestBase request,
      HttpResponseBase response)
      {
            _request = request;
            _response = response;
      }

    //[DebuggerStepThrough()]
    public void SetLoginCookie(string userName,string password,bool isPermanentCookie)
    {
        if (_response != null)
        {
            if (isPermanentCookie)
            {
                FormsAuthenticationTicket userAuthTicket =
                  new FormsAuthenticationTicket(1, userName, DateTime.Now,
                  DateTime.MaxValue, true, password, FormsAuthentication.FormsCookiePath);
                string encUserAuthTicket = FormsAuthentication.Encrypt(userAuthTicket);
                HttpCookie userAuthCookie = new HttpCookie
                  (FormsAuthentication.FormsCookieName, encUserAuthTicket);
                if (userAuthTicket.IsPersistent) userAuthCookie.Expires =
                                    userAuthTicket.Expiration;
                userAuthCookie.Path = FormsAuthentication.FormsCookiePath;
                _response.Cookies.Add(userAuthCookie);
            }
            else
            {
                FormsAuthentication.SetAuthCookie(userName, isPermanentCookie);
            }
        }
    }
}

This function is used in login page or control on the click of login button. In the attached sample project, the following function is written in AccountController class. This function validates the login of the user and then add a permanent form authentication ticket to the browser.

private bool Login(string userName, string password,bool rememberMe)
{
    if (Membership.ValidateUser(userName, password))
    {
        CookieHelper newCookieHelper =
            new CookieHelper(HttpContext.Request,HttpContext.Response);
        newCookieHelper.SetLoginCookie(userName, password, rememberMe);
        return true;
    }
    else
    {
        return false;
    }
}

As a web developer one common request is to make sure that the interfaces we build out for users look the best that they can and also provide users with the best experience both via the keyboard and mouse. As part of this we will often have areas of conflict. This post is going to cover one common scenario that will impact users that might be using DotNetNuke common styles or working to create their own custom button styles. With ASP.NET it is common for people to use "LinkButton" controls to trigger actions rather than your standard "Button" controls as they are easier to style.

There is nothing wrong with this until you try to perform actions against the 'LinkButton' and it doesn't function as you would expect. For this purposes of this post lets say we are building a custom login form that has two textboxes; txtUsername and txtPassword and a single LinkButton btnLogin. We want to ensure that if the user presses enter on either of the textboxes that they are logged in.

Using standard jQuery we would try something like this:

   1:  $("#<%=txtPassword.ClientID %>").keydown(function(event) {
   2:      if (event.keyCode == 13) {
   3:          $("#<%=btnLogin.ClientID %>").click();
   4:      }
   5:  });

This is a pretty standard jQuery method to listen for the enter key and simply "click" the button. However, if you are using a LinkButton this code will not work. The reason for this is that a LinkButton is rendered to the browser as an Anchor tag with a href property that contains a javascript action to trigger the postback. Click does nothing on the button as there is nothing for it to complete.

To get around this you need to actually look into the generated anchor tag, grab the href value and evaluate it. Similar to the following:

   1:  $("#<%=txtPassword.ClientID %>").keydown(function(event) {
   2:      if (event.keyCode == 13) {
   3:          eval($("#<%=btnLogin.ClientID %>").attr('href'));
   4:      }
   5:  });

Using this structure the postback will be triggered and the user will be logged in as you expect them. This works great for any linkbutton, including those styled with the default DotNetNuke 6.x form pattern styles.

Microsoft has just officially released the highly anticipated Windows Server 2012. The newly released server operating system offers a number of features that can be utilized to benefit developers, resellers and businesses. As a premier European Windows and ASP.NET hosting provider that follow the developments of Microsoft products, HostForLIFE.eu proudly announces the support of Windows Server 2012 Hosting Platform in the world-class Amsterdam (The Netherlands) data center.

“We know that our customers are always looking for new technologies and the latest Microsoft product. With the launch of Windows Server 2012, we believe that anyone can take advantage of all the improvements available in this platform”, said Manager of HostForLIFE.eu, Kevin Joseph. “The focus on high availability, scalability, and virtualization has made this one of the most important releases of Windows Server to date. We have been working closely with Microsoft throughout the pre-release development cycle of the platform to both drive the direction of the product and ensure our team is ready to support Server 2012 solutions. We couldn’t be more excited and confident in the solutions now available to our clients with Windows Server 2012.”

With our Windows Server 2012 Hosting Platform, customers have an access directly to all the newest technologies and frameworks, such as ASP.NET 4.5 Hosting, ASP.NET MVC 4 Hosting, Silverlight 5 Hosting, WebMatrix Hosting, Visual Studio Lightswitch Hosting and SQL 2012 Hosting. All these technologies/frameworks are integrated properly on our world-class Control Panel. The package is offered from just €2.45/month and we believe that this is the most affordable, features-rich Windows and ASP.NET Hosting package in European market.

HostForLIFE.eu is awarded Top No#1 SPOTLIGHT Recommended Hosting Partner by Microsoft (see http://www.microsoft.com/web/hosting/HostingProvider/Details/953). Our service is ranked the highest top #1 spot in several European countries, such as: Germany, Italy, Netherlands, France, Belgium, United Kingdom, Sweden, Finland, Switzerland and other European countries. Besides this award, we have also won several awards from reputable organizations in the hosting industry and the detail can be found on our official website.

For more information about our service, please visit http://www.hostforlife.eu.

About HostForLIFE.eu:

HostForLIFE.eu is European Windows Hosting Provider which focuses on Windows Platform only. We deliver on-demand hosting solutions including Shared hosting, Reseller Hosting, Cloud Hosting, Dedicated Servers, and IT as a Service for companies of all sizes.

Our number one goal is constant uptime. Our data center uses cutting edge technology, processes, and equipment. We have one of the best up time reputations in the industry.

Our second goal is providing excellent customer service. Our technical management structure is headed by professionals who have been in the industry since its inception. We have customers from around the globe, spread across every continent. We serve the hosting needs of the business and professional, government and nonprofit, entertainment and personal use market segments.

If you are someone like me who have recently upgrade to ASP.NET 4.0, you may have come across Yellow Screen of Death with Http Request Validation Exception, something like:

“A potentially dangerous Request.Form value was detected from the client”

Exception Details : System.Web.HttpRequestValidationException: A potentially dangerous Request.Form value was detected from the client

Surprisingly, you will still see this exception even if you have set ValidateRequest to false in either the Page Tag or Web.Config.

ValidateRequest="false" or  <pages validateRequest="false" />

This may end you being freak out identifying the problem.

The solution is perhaps very simple. I would recommend to go and read ASP.NET 4 Breaking Changes.

“In ASP.NET 4, by default, request validation is enabled for all requests, because it is enabled before the BeginRequest phase of an HTTP request. As a result, request validation applies to requests for all ASP.NET resources, not just .aspx page requests. This includes requests such as Web service calls and custom HTTP handlers. Request validation is also active when custom HTTP modules are reading the contents of an HTTP request.and therefore request validation errors might now occur for requests that previously did not trigger errors.”

In order to revert to the behavior we had previously, you need to add the following setting in Web.config file:

<httpRuntime requestValidationMode="2.0"/>

And this should work!

Hope this helps!

Let's start with the new functionalities introduced in Visual Studio 2012 RC.

Recent Project List

Though this was available in earlier versions of Visual Studio, the option to remove a project from the list is now not available; you can remove unwanted projects from the "Recent" list by selecting the "Remove From List" option. (Right-click on the project you want to remove from the list then select "Remove From List".)

You can even see the latest Visual Studio GUI in the following screen shot:

Visual Studio Dark Theme

I have seen so many developers that don't like the default Visual Studio GUI color and they prefer to code using a dark background. Most of them go to Tools-> Options and change the default color and fonts.

But now you can do this by just changing the Visual Experience. Select Tools -> Options then click on "General" from the "Environment" section. You have the option to select "Dark" or "Light". This is really cool stuff. You can even download themes online.





Visual Studio Installation Engine Improvement

The Visual Studio 2012 installation has become very user-friendly compared to previous versions of Visual Studio. You can save almost 25% of installation time and save about 2.5 GB of space. There is significant improvement in the installation engine.

Other Features

Metro Style Application Development

This is the greatest feature and only available for the Window 8 operating system. To develop a Metro style application, you need to download and install the Windows 8 Release Preview Evaluation copy which is freely available on the Microsoft site. Once you install the Window 8 Release Preview, install Visual Studio 2012 RC.

Select File -> New -> Project which will open the "New Project" window. Select Visual C# or Visual Basic from the Template (my favorite is Visual C#) and go to "Windows Metro style".

Here you have the options to select the kind of Metro style application you want to develop.

(Note: Metro style applications are only available for .Net Framework 4.0 and .Net Framework 4.5.)

Introduction

ASP.NET Web Forms became popular due to the wide range of data bound controls such as GridView, DetailsView and ListView. The earlier versions of ASP.NET, however, were a bit rigid about how data was bound to these controls. Most of the time developers had to use one or the other data source control (SQL Data Source, Object Data Source, Entity Data Source etc.) to bind data from the underlying data store with the data bound controls. ASP.NET 4.5 provides a flexible alternative to data bind these controls - model binding. Using the new model binding features you can use methods instead of data source controls to perform CRUD operations. This article explains how the new model binding features can be used. You will also learn to use strongly typed data controls.

Data Binding in ASP.NET Server Controls

In the earlier versions of ASP.NET you used data bound controls and data source controls hand in hand to display and edit data. First, you needed to configure a data source control, such as Object Data Source or Entity Data Source and then set the DataSourceID property of a data bound control to the respective data source control. The data bound control would have one or more fields of some inbuilt type (BoundField for example) or template fields. If the control was using template fields you used Eval() data binding expression for one way data binding and Bind() data binding expression for two way data binding.

The following sample markup shows a GridView control bound with an Entity Data Source.

<asp:EntityDataSource ID="EntityDataSource1" runat="server"
    ConnectionString="name=NorthwindEntities"
    DefaultContainerName="NorthwindEntities" EnableFlattening="False"
    EntitySetName="Customers"
    Select="it.[CustomerID], it.[CompanyName], it.[ContactName], it.[Country]">
</asp:EntityDataSource>
<asp:GridView ID="GridView2" runat="server" AutoGenerateColumns="False"
    DataKeyNames="CustomerID" DataSourceID="EntityDataSource1">
    <Columns>
        <asp:BoundField DataField="CustomerID" HeaderText="CustomerID" ReadOnly="True"
            SortExpression="CustomerID" />
        <asp:BoundField DataField="CompanyName" HeaderText="CompanyName"
            ReadOnly="True" SortExpression="CompanyName" />
        <asp:BoundField DataField="ContactName" HeaderText="ContactName"
            ReadOnly="True" SortExpression="ContactName" />
        <asp:TemplateField HeaderText="Country" SortExpression="Country">
            <EditItemTemplate>
                <asp:Label ID="Label1" runat="server" Text='<%# Eval("Country") %>'></asp:Label>
            </EditItemTemplate>
            <ItemTemplate>
                <asp:Label ID="Label1" runat="server" Text='<%# Bind("Country") %>'></asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

Notice how the DataSourceID property of the GridView is set to EntityDataSource1. Also, notice the use of Eval() and Bind() to bind the Country column.

Though data source controls work well in simple situations, developers often need complete control on how the data is fetched and how it is saved back to the database. This calls for a more code centered approach than the control driven approach. That is where the new model binding features come into the picture. Using model binding features you can write methods in your code behind class that perform the CRUD operations on the underlying data store. This way you have total control over the process of fetching and editing the data. Have a look at the following markup that uses the new model binding features:

<asp:GridView ID="GridView1" runat="server"
SelectMethod="GetCustomers"
dateMethod="UpdateCustomer"
DeleteMethod="DeleteCustomer"
... >

This time the GridView control doesn't use a data source control. The SelectMethod, UpdateMethod and DeleteMethod properties are set to method names GetCustomers, UpdateCustomers and DeleteCustomers respectively. These methods reside in the code behind. You will develop a complete version of this example in the following sections.

In addition to the code centered data binding, you can also use data within the controls in strongly typed manner. This is especially handy for template fields. Instead of using Eval() and Bind() data binding expressions, you can now use Item and BindItem properties respectively. These properties work along with the ItemType property. The use of these properties will be clear from the following markup.

<asp:GridView ID="GridView1" runat="server"
SelectMethod="GetCustomers"
UpdateMethod="UpdateCustomer"
DeleteMethod="DeleteCustomer"
ItemType="NorthwindModel.Customer"
... >
<Columns>
...
<asp:TemplateField HeaderText="Country" SortExpression="Country">
  <ItemTemplate>
   <asp:Label ID="Label2" runat="server" Text='<%# Item.Country %>'></asp:Label>
  </ItemTemplate
  <EditItemTemplate>
   <asp:TextBox ID="TextBox2" Text='<%# BindItem.Country %>' runat="server"></asp:TextBox>
  </EditItemTemplate>
</asp:TemplateField>
...

Notice the code marked in bold letters. The ItemType property is set to an Entity Framework Data Model type - Customer. Once you do so, you can access properties of Customer class in a strongly typed fashion. Instead of Eval("Country") you now use Item.Country and instead of Bind("Country") you use BindItem.Country. This way there can't be any errors while specifying column names because they are available to you in the intellisense in strongly typed manner.

Creating a Sample Website

Now that you understand the basics of model binding and strongly typed data binding, let's create a web form that illustrates the complete process in detail. You will be using Customers table from the Northwind database in this example. Begin by creating a new ASP.NET Web Site. Then add an Entity Framework Data Model to its App_Code folder and create model class for the Customers table. The following figure shows the Customers model class in the Visual Studio designer



Open the default web form and place a GridView control on it. Configure the GridView to show CustomerID, CompanyName, ContactName and Country columns. Also add Edit and Delete command buttons. The following markup shows the GridView after adding these columns:

<asp:GridView ID="GridView1" runat="server"
SelectMethod="GetCustomers"
UpdateMethod="UpdateCustomer"
DeleteMethod="DeleteCustomer"
ItemType="NorthwindModel.Customer"
AllowSorting="True"
AllowPaging="True"
DataKeyNames="CustomerID" ...>
    <Columns>
        <asp:BoundField DataField="CustomerID" HeaderText="Customer ID" ReadOnly="True"
            SortExpression="CustomerID"></asp:BoundField>
        <asp:TemplateField HeaderText="Company Name" SortExpression="CompanyName">
            <EditItemTemplate>
                <asp:TextBox ID="TextBox2" Text='<%# BindItem.CompanyName %>' runat="server"></asp:TextBox>
            </EditItemTemplate>
            <ItemTemplate>
                <asp:Label ID="Label2" runat="server" Text='<%# Item.CompanyName %>'></asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:BoundField DataField="ContactName" HeaderText="Contact Name"
            SortExpression="ContactName"></asp:BoundField>
        <asp:TemplateField HeaderText="Country" SortExpression="Country">
            <EditItemTemplate>
                <asp:TextBox ID="TextBox3" runat="server" Text='<%# BindItem.Country %>'></asp:TextBox>
            </EditItemTemplate>
            <ItemTemplate>
                <asp:Label ID="Label3" runat="server" Text='<%# Item.Country %>'></asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:CommandField ShowEditButton="True" ButtonType="Button">
        <ControlStyle Width="75px" />
        </asp:CommandField>
        <asp:CommandField ShowDeleteButton="True" ButtonType="Button">
        <ControlStyle Width="75px" />
        </asp:CommandField>
    </Columns>
...
</asp:GridView>

The following figure shows the GridView at runtime:



Notice that the ItemType property of the GridView is set to NorthwindModel.Customer and its SelectMethod, UpdateMethod and DeleteMethod properties are set to GetCustomers, UpdateCustomer and DeleteCustomer respectively. You will be creating these methods in the following sections.

Selecting Data

In order to display data in the GridView you need to write a method that fetches data from the data store and then specify it in the SelectMethod property of GridView. So, switch to the code behind and add a method named GetCustomers() as shown below:

public IQueryable<Customer> GetCustomers()
{
    NorthwindEntities db = new NorthwindEntities();
    var data = from item in db.Customers
                orderby item.CustomerID
                select item;
    return data;
}

The GetCustomers() method returns an IQueryable collection of Customer objects. Inside it fetches all of the records from the Customers table and returns them to the caller. Note that we have enabled paging in our GridView. When you enable paging for a GridView, behind the scenes it fetches only the required number of records as specified by the PageSize property.

Updating and Deleting Data

The methods UpdateCustomer() and DeleteCustomer() do the job of updating and deleting a Customer respectively. The UpdateCustomer() method is shown next:

public void UpdateCustomer(Customer c)
{
    NorthwindEntities db = new NorthwindEntities();
    var data = from item in db.Customers
                where item.CustomerID == c.CustomerID
                select item;

    Customer obj = data.SingleOrDefault();
    obj.CompanyName = c.CompanyName;
    obj.ContactName = c.ContactName;
    obj.Country = c.Country;
    db.SaveChanges();
}

The UpdateCustomer() method accepts a parameter of type Customer. At runtime, when you modify a GridView row and click the Update button, UpdateCustomer() method will be called and the corresponding Customer object is passed as its parameter. Inside, you find out a specific Customer based on its CustomerID, assign the modified values and then save the changes to the database by calling the SaveChanges() method.

The DeleteCustomer() method follows a similar method signature but internally deletes a Customer. The following code shows the DeleteCustomer() method:

public void DeleteCustomer(Customer c)
{
    NorthwindEntities db=new NorthwindEntities();
    var data = from item in db.Customers
                where item.CustomerID == c.CustomerID
                select item;
    Customer obj = data.SingleOrDefault();
    db.DeleteObject(obj);
    db.SaveChanges();
}

The DeleteCustomer() method receives the Customer being deleted as a parameter. Inside it fetches a Customer matching the CustomerID and deletes it using the DeleteObject() method.

Now, run the web form and try editing and deleting a few Customer records.

Adding Validation Support

Though the GridView is able to modify Customer data, there are no validations on the data being saved. One way to enforce the validations is to use a combination of template fields and validation controls. However, there is an easy alternative - Data Annotations.

Data Annotations are special attributes that you apply on the data model properties. They specify validation criteria such as maximum length, minimum length and specific data format (Email address, URL etc.).

To use Data Annotations add a new class in the App_Code folder and name it as CustomerValidations. The CustomerValidations class will store only validation information for the Customer class. You could have added the data annotation attributes directly to the Customer data model class but to avoid accidental overwriting during model recreation it is recommended to isolate them in a separate class.

public class CustomerValidations
{
    [StringLength(5,MinimumLength=3 ,ErrorMessage="CustomerID must between 3-5 characters!")]
    public string CustomerID { get; set; }

    [StringLength(20, ErrorMessage = "Company Name must be upto 20 characters!")]
    public string CompanyName { get; set; }

    [Required]
    public string ContactName { get; set; }

    [Required]
    [StringLength(15,ErrorMessage="Invalid country length!")]
    public string Country { get; set; }
}

The CustomerValidations class makes use of data annotation attributes such as [StringLength] and [Required]. The former attribute ensures that the entered data is within a specified maximum length. The later attribute enforces that the property value must be provided. You can also use many other data annotation attributes depending on your requirement.

As of now the CustomerValidations class is a stand alone class. You need to associate it with the Customer data model class using the [MetadataType] attribute. To do so, open the Entity Framework Data Model file (Model.Designer.cs) and add the following piece of code:

[MetadataType(typeof(CustomerValidations))]
public partial class Customer : EntityObject
{
...
}

The [MetadataType] attribute specifies the type of the class that contains validation information (CustomerValidations in this case).

Now, open the web form and place a ValidationSummary control below the GridView. Set its ShowModelStateErrors property to true. The ShowModelStateErrors property controls whether data model validation errors should be displayed in the ValidationSummary or not.

<asp:ValidationSummary ID="ValidationSummary1" runat="server"
ShowModelStateErrors="true" ... />

In addition to displaying validation errors to the end user, you should also ensure that the changed Customer details are saved in the database only if model validations are successful. To do so, modify the UpdateCustomer() method as shown below:

public void UpdateCustomer(Customer c)
{
    NorthwindEntities db = new NorthwindEntities();
    var data = from item in db.Customers
                where item.CustomerID == c.CustomerID
                select item;
    Customer obj = data.SingleOrDefault();
    obj.CompanyName = c.CompanyName;
    ...
    if (ModelState.IsValid)
    {
        db.SaveChanges();
    }
}

Notice the code marked in bold letters. The UpdateCustomer() method now checks the state of the model using the ModelState.IsValid property. If all the model validations are successful, the IsValid property will return true and only then will changes be saved to the database.

Now, run the web form again and try to enter some invalid data. You should see validation errors similar to the following figure:



Summary

ASP.NET 4.5 supports model binding that allows a more code centric approach for performing CRUD operations on the data. Instead of using Data Source Controls, you can now write methods in the code behind file that select, insert, update and delete data from the underlying data store. The SelectMethod, InsertMethod, UpdateMethod and DeleteMethod properties of data bound controls are used to specify the respective method. You can also make use of Data Annotations for performing validations on the data being entered. Thus the new model binding features provide a more flexible and powerful approach to data binding.

Introduction

Asynchronously running code can improve the overall performance and responsiveness of your web application. In ASP.NET 4.5 web forms applications you can register asynchronous methods with the page framework. The ASP.NET page framework and .NET 4.5 asynchronous programming support then executes the operations in asynchronous fashion. This article shows how this can be done.

Example Scenario

Consider that you have a web application that needs to call two ASP.NET Web API services namely Customer and Product. These services return Customer and Product data from the Northwind database respectively. Now, assume that each of these services take 5 seconds to complete the data retrieval operation. If you use synchronous mode for calling these services then the total time taken will be 10 seconds. Because the execution will happen sequentially - first Customer service will complete and then Product service will complete.

On the other hand if you invoke these services in asynchronous fashion, the service operations won't block the caller thread. The Customer service will be invoked and control will be immediately returned to the caller. The caller thread will then proceed to invoke the Product service. So, two operations will be invoked in parallel. In this case the total time taken for completing both of the operations will be the time taken by the longest of the operations (5 seconds in this case).

Async, Await, Task and RegisterAsyncTask

Before developing web forms applications that execute asynchronous operations you need to understand a few basic terms involved in the process.

A task is an operation that is to be executed in asynchronous fashion. Such an operation is programmatically represented by the Task class from System.Threading.Tasks namespace.

When an asynchronous operation begins, the caller thread can continue its work further. However, the caller thread must wait at some point of time for the asynchronous operation to complete. The await keyword invokes an asynchronous operation and waits for it to complete.

The async modifier is applied to a method that is to be invoked asynchronously. Such an asynchronous method typically returns a Task object and has at least one await call inside it.

Just to understand how async, await and task are used at code level, consider the following piece of code:

public async Task<MyObject> MyMethodAsync()
{
  MyObject data = await service.GetDataAsync();
  //other operations on data go here
  return data;
}

Here, method MyMethodAsync() is marked with async modifier. By convention, asynchronous method names end with "Async". The MyMethodAsync() returns MyObject wrapped inside a Task instance. Inside the method a remote service is invoked using GetDataAsync(). Since MyMethodAsync() needs to return data retrieved from the service, the await keyword is used to wait till the GetDataAsync() method returns. Once GetDataAsync() returns the execution is resumed and further code is executed. The data is finally returned to the caller.

NOTE:
For a detailed understanding of async, await and Task refer to MSDN dicumentation. Here, these terms are discussed only for giving a basic understanding of the respective keywords.

ASP.NET page framework provides a method - RegisterAsyncTask() - that registers an asynchronous task with the page framework. Tasks registered using the RegisterAsyncTask() method are invoked immediately after the PreRender event. The RegisterAsyncTask() method takes a parameter of type PageAsyncTask. The PageAsyncTask object wraps the information about an asynchronous task registered with a page. The following piece of code shows how they are used:

protected void Page_Load(object sender, EventArgs e)
{
   PageAsyncTask task = new PageAsyncTask(MyMethod);
   RegisterAsyncTask(task);
}

Asynchronous Solution

Now that you are familiar with the basic concepts involved in utilizing asynchronous operations in a web forms application, let's create a sample application that puts this knowledge to use.

Begin by creating two projects - an empty web forms application and an ASP.NET MVC4 Web API application.

Add an Entity Framework Data Model for the Customers and Products tables of the Northwind database. Place the EF data model inside the Models folder.



Add an Entity Framework Data Model for the Customers and Products tables

Add two ApiController classes to the Web API project and name them as CustomerController and ProductController.



Add two ApiController classes

Then add Get() methods to both the ApiController classes as shown below:

public class CustomerController : ApiController
{
    public IEnumerable<Customer> Get()
    {
        Northwind db = new Northwind();
        var data = from item in db.Customers
                    select item;
        System.Threading.Thread.Sleep(5000);
        return data;
    }

}
public class ProductController : ApiController
{
    public IEnumerable<Product> Get()
    {
        Northwind db = new Northwind();
        var data = from item in db.Products
                    select item;
        System.Threading.Thread.Sleep(5000);
        return data;
    }

}

The Get() method of the CustomerController class selects all the Customer records from the Customers table whereas the Get() method of the ProductController class selects all the Product records. For the sake of testing, a delay of 5 seconds is introduced in each Get() method. The Get() methods return an IEnumerable collection of Customer and Product objects respectively.

Now, go to the web forms project and open the code behind file of the default web form. Here, you will write a couple of private methods that invoke the Web API developed previously. These methods are shown below:

public async Task<List<Customer>> InvokeCustomerService()
{
    using (HttpClient client = new HttpClient())
    {
        HttpResponseMessage response = await client.GetAsync("http://localhost
        string json= (await response.Content.ReadAsStringAsync());
        List<Customer> data = JsonConvert.DeserializeObject<List<Customer>>(json
        return data;
    }
}

public async Task<List<Product>> InvokeProductService()
{
    using (HttpClient client = new HttpClient())
    {
        HttpResponseMessage response = await client.GetAsync("http://localhost
        string json = (await response.Content.ReadAsStringAsync());
        List<Product> data = JsonConvert.DeserializeObject<List<Product>>(json
        return data;
    }
}

The InvokeCustomerService() method invokes the Customer Web API whereas InvokeProductService() method invokes Product Web API. Both the methods essentially use an HttpClient to get data from the respective Web API. Notice that both the methods have async modifier and return a Task instance that wraps the actual return type (List<Customer> and List<Product> respectively). The GetAsync() method of the HttpClient object is an asynchronous method. Call to the GetAsync() is marked using the await keyword so that further statements are executed only when GetAsync() returns. The GetAsync() method accepts a URL of the respective Web API. Make sure to change the port number as per your development setup. The GetAsync() method returns an HttpResponseMessage object. The actual data is then retrieved using ReadAsStringAsync() method of the Content property. The ReadAsStringAsync() will return data as a JSON string. This JSON data is converted into a .NET generic List using DeserializeObject() method of the JsonConvert class. The JsonConvert class comes from the Json.NET open source componenet. You can download Json.NET here.

The InvokeCustomerService() and InvokeProductService() methods are called inside another private method GetDataFromServicesAsync() as shown below:

private async Task GetDataFromServicesAsync()
{
    Stopwatch stopWatch = new Stopwatch();
    stopWatch.Start();

    var task1 = InvokeCustomerService();
    var task2 = InvokeProductService();

    await Task.WhenAll(task1, task2);

    List<Customer> data1 = task1.Result;
    List<Product> data2 = task2.Result;

    stopWatch.Stop();
    Label2.Text = string.Format("<h2>Retrieved {0} customers and {1} products
                                 data1.Count, data2.Count, stopWatch.Elapsed.TotalSeconds
}

As shown above, GetDataFromServicesAsync() is also marked as async and returns a Task instance. Inside, a StopWatch class from System.Diagnostics namespace is used to find the time taken by both of the operations to complete. InvokeCustomerService() and InvokeProductService() methods are then called. The returned Task instance is stored in task1 and task2 variables respectively. The WhenAll() method of Task class creates another Task that completes when all the specified tasks are complete. In this case it creates a Task that completes after complition of task1 and task2. Actual data returned by the respective Web API is retrieved using the Result property of the respective Task objects. The time taken to complete the operation is measured by the StopWatch and is displayed in a Label.

The next step is to register GetDataFromServicesAsync() with the page framework. This is done using the RegisterAsyncTask() method as shown below:

protected void Page_Load(object sender, EventArgs e)
{
    RegisterAsyncTask(new PageAsyncTask(GetDataFromServicesAsync));
}

As you can see, Page_Load event handler registers an asynchronous task using RegisterAsyncTask() method. The RegisterAsyncTask() method accepts an instance of PageAsyncTask. The PageAsyncTask instance in turn wraps the GetDataFromServicesAsync() method created earlier.

The final step is to set Async attribute of the @Page directive to true:

<%@ Page Async="true" Language="C#" CodeBehind="WebForm1.aspx.cs" ... %>

The Aync attribute of the @Page directive indicates that this web form will be executed in asynchronous fashion. Web forms that use RegisterAsyncTask() method must set the Async attribute to true, otherwise an exception is raised at runtime.

This completes the application and you can test it by running the web forms application. The following figure shows a sample run of the web form:



A sample run of the web form

Though the code doesn't show the synchronous execution of the Web API operations, for the sake of better understanding the above figure shows time taken for synchronous as well as asynchronous execution. Recollect that both the Get() methods sleep for 5 seconds and hence the synchronous execution takes approximately 10 seconds. However, the asynchronous execution takes approximately 5 seconds. As you can see the asynchronous operation improves the overall performance of the application.

Summary

Using async and await keywords you can create operations that run asynchronously. Such asynchronous tasks can be registered with the page framework using RegisterAsyncTask() method. Registered tasks run immediately after the PreRender event of the web form. Asynchronous operations can improve the overall performance and user responsiveness of a web application.

New Features in HTML5

HTML5 is an umbrella term for the new HTML, JavaScript, and Cascading Style Sheets (CSS) features that are being standardized. New HTML tags include the <nav> tag, which is used for general website navigation; the <video> tag, which is used for displaying video content; and the <audio> tag, which is used for playing audio content. In general, these tags replace the <object> tag that websites used previously. HTML5 also includes new input controls that are designed to handle some of the more common input scenarios, such as issues with dates and times. Finally, numerous attributes have been added to existing controls. Many of the existing input controls have new and enhanced attributes that allow browsers to expose users to new functionality.

Along with the new markup specifications, new JavaScript classes let programmers capitalize on the latest features that developers have been asking for. The following paragraphs discuss some of these features.

JavaScript selectors. There are new JavaScript selectors for getElementById and getElementByTagName. There are also selectors, such as getElementByClassName and querySelector.

LocalStorage. Developers have long been using cookies for local storage. However, cookies are sent across the wire and back to the server, a transfer that increases sent data volumes. HTML5 introduces support for a storage feature named LocalStorage. With this feature, data is no longer sent across the wire with each server request. Also, more data can be stored with LocalStorage than with cookies.

WebSQL. Although WebSQL is no longer a part of the HTML5 standard, this feature has been implemented in several browsers, such as iPhone's Safari and the Android browser. This feature can be tested for and used.

Threads. On a desktop application, a long-running operation can be spun off into another thread, allowing the user to continue working without blocking the application's UI. HTML5 introduces this concept of threads in the browser environment, a feature known as Web Workers.

Application caching. What happens when an application cannot connect to its web server? There may be a variety of reasons, but the user only knows that the application is offline. HTML5 provides an offline application-caching API that allows an application to degrade more gracefully when it cannot connect to its web server.

Web sockets. When there is a long-running event on the server, the browser can be set to poll for a completion. What happens when 100,000 users continually nag the server with the online equivalent of "Are we there yet?" To address this issue, the HTML5 standard has web sockets. However, there are some security issues in the underlying communications protocol that must be addressed.

Drawing. It's possible to draw in the browser by using the Canvas tag and its associated JavaScript commands.

Geolocation . Geolocation is not a part of, but is associated with, the HTML5 specifications. Because it is often discussed as a part of HTML5, we'll consider it that way for this article. Geolocation allows a browser to determine its current location so that the user can be presented with local information. Geolocation allows for more accurate location information than is typically possible through IP address lookup services.

Other features allow for drag-and-drop support, audio and video tag manipulation, server-sent events, and other features. Some of these features will also require server support for optimal performance.

A Peek at HTML5

Let's take a peek at a simple HTML5 web page and make some key observations about the code. Figure 1 shows some sample source code.

Figure 1: Sample HTML5 source code

<!DOCTYPE html>
 <html lang="en">
     <head>
         <meta charset="utf-8" />
         <meta http-equiv="X-UA-compatible" content="IE=edge,chrome=1" />
         <title>About My HTML5 Site</title>

    </head>
     <body>
     <div id="container">
             <header  >               

                <h1>About My HTML5 Site</h1>
             </header>
                 <p>
     This web page was built using ASP.NET. For more information, visit the
     <a href="http://www.asp.net">ASP.NET homepage</a>.
 </p>
             <footer>               

                <span style="margin-left:auto;margin-right:auto;"><a href="http://www.scalabledevelopment.com">SDI</a></span>
             </footer>
         </div>
     </body>
 </html>

Notice that the doctype tag, which tells a browser which version of HTML to use, is now much simpler. In HTML5, there is only one doctype tag. The X-UA-Compatible meta tag tells the browser to use the most recent engine available. My system has the Google Chrome frame plug-in installed, so this information is included, as well as the instruction to use the most recent version of the Internet Explorer (IE) engine. Finally, the page is logically divided by header, content, and footer tags. These tags instruct a browser to separate the content visually. This instruction is particularly important for a mobile web browser.

Browsers Galore

Currently, there is no single dominant browser. We've got IE, Firefox, Chrome, Safari, and Opera for the desktop. Add to those the many mobile device browsers such as Safari, the Android browser, and the mobile IE for Windows Phone 7, along with the various versions of each browser. Developers are presented with a vast and complex array of scenarios to code for. In this vein, you may be familiar with the following JavaScript code:

If ( navigator.useragent.indexOf(…….) > -1)
{
// do something...

This code determines whether the browser is of a specific type. It then responds accordingly—for example, by redirecting the browser to a page optimized for that browser.

Similar functionality exists on the server. The ASP.NET developer can use the Request.Browser server-side object. Some of the properties of this object that you may find useful include the following:

• Request.Browser.IsMobileDevice
• Request.Browser.MobileDeviceManufacturer
• Request.Browser.MobileDeviceModel
• Request.Browser.ScreenPixels

Along with the Request.Browser server-side object, ASP.NET controls contain support for various browsers, based on the user-agent header value. You can also use the Wireless Universal Resource File (WURFL) project. The WURFL project contains a more current set of browser definitions that allow a user to determine device features on the server, such as device input method, audio format support, and other features that are not part of the built-in ASP.NET capabilities. This general technique is referred to as browser detection. While conceptually simple, browser detection tends to be problematic. Browser detection typically results in a large number of if/else statements. This can be confusing and difficult to change.

Feature detection is another useful HTML5 option. A browser is tested for its support of various features. If it supports a particular feature, the browser uses it; if support for the feature is not available in the browser, the feature is not used. Although slightly different from browser detection, feature detection results in simpler code that is ultimately easier to maintain. Although browser detection was fairly common for years, feature detection is better for creating maintainable code.

Along with feature detection, a JavaScript library named Modernizr helps developers implement reliable feature detection. The following code sample uses the Modernizr library to test for geolocation support and then apply geolocation.

       if (Modernizr.geolocation) {
             var navgeo = navigator.geolocation;
             navgeo.getCurrentPosition(WhereIsUser, WhereIsUserError, PosOptions);
         }

Native IE9

At the MIX11 conference, Microsoft made a lot of predictable noise in support of IE because of its "native" status. Terms like native HTML were bandied about. Add to that an early June 2011 demo of Windows 8 with HTML and JavaScript, and there has been some understandable confusion in the marketplace. With all these terms and ideas being tossed around, what's a developer to do? Microsoft will have its BUILD conference in September, so hopefully we'll know more then. In the mean time, there are a few things that we do know about IE9 regarding its optimizations and hardware acceleration.

First, we know that the JavaScript engine has been rewritten to support multiple processor cores. Specifically, a background compilation takes JavaScript and converts it into machine code that runs faster on a given system. Secondly, the machine code that the JavaScript engine produces takes advantage of the most recent and optimized machine commands. Finally, we know that the HTML, Scalable Vector Graphics (SVG), CSS, audio, and video support have been reconfigured for hardware acceleration. Microsoft may have added these features to support modern hardware capabilities such as graphics processing units (GPUs), multiple cores, and other new developments. For example, the <canvas> tag will attain a big boost in performance when it is used in IE9. Overall, it appears that the folks at Microsoft are promoting their browser as the best platform because there are fewer operating system layers to go through when you use IE in a Windows environment.

How ASP.NET Developers Can Be Involved

If you're an ASP.NET developer, you're faced with a couple of questions when designing an ASP.NET application to support HTML5. The first question concerns how to present an application to the user. Currently, HTML5 browsers are more frequently found in mobile devices than in desktop browsers. Since there is a profound difference between a four-inch mobile device and a 25-inch desktop browser, you must understand the differences between the two. A web application designed for a desktop browser (as shown in Figure 2) will most likely present a horrible experience to a user who connects to the application over a mobile device (as shown in Figure 3).





Given the significant differences in device dimensions, successful sites, such as ESPN and Ruby Tuesday design their applications for a general display size. If a user comes to a site through a desktop browser, the user goes right on into the site. If a user comes to a site through a mobile browser, the user is redirected to a mobile version of the application. The code to detect the type of browser and perform the redirection can be placed within the session's Start event.

The second question concerns which ASP.NET display technology to use. Thankfully, it doesn't matter if an application uses ASP.NET Web Forms, ASP.NET MVC, or ASP.NET Web Pages (aka Razor). All these technologies can be used to build an HTML5 ASP.NET application. ASP.NET, MVC, and Web Pages let you directly interact with the HTML output, so you don't need to do anything special when using these types of projects. You only need to write valid HTML5 code for the devices you're planning to support. With a few changes of the standard features in ASP.NET Web Forms, you can use HTML5 features quickly and easily.

Web Forms

ASP.NET Web Forms is a very popular development framework. The problem with Web Forms is that some of its standard features create confusion. The most problematic features in HTML5 and mobile spaces are ViewState, ClientIDs, and MasterPages. We'll walk through ways to provide users with a more optimal solution to the problems encountered when using these features.

ViewState. ASP.NET developers are used to working with ViewState, the feature that makes Web Forms work. However, ViewState increases the size of the web page. For example, if you bind a set of objects to a grid, the size of the page increases dramatically. While the size of the page is not necessarily a big deal for applications that are running over a fairly reliable network, increased page size greatly increases the risk of an error when the page is transmitted over wireless 3G and 4G networks. To work around this issue, you have two options.

First, you can turn off ViewState unless it's needed by a specific control on a page. When you turn off ViewState, it is minimized unless it's absolutely needed, as determined by a developer. However, a page may still be too large because ViewState is stored on the client web page. In this scenario, ViewState can be turned off at the container, page, application, or server level. Turning it off at these levels eliminates the ViewState payload unless it's absolutely necessary for a control.

ASP.NET 4 introduces a feature that lets you turn off ViewState at a higher level in the hierarchy, then turn it on as necessary. Specifically, ViewState can be modified by the ViewStateMode attribute in an ASP.NET control. In the examples in Figure 4 and Figure 5, a grid of data is displayed to the user. The GridView doesn't require many of the more complicated features typically associated with HTML5, so turning off ViewState has no effect on the application or the user. Note that the ViewState mode is turned off within the Content2 container. Figure 4 shows the code for the content view. Figure 5 shows the output of the code in Figure 4.

Figure 4: Code for the content view

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server" ViewStateMode="Disabled">
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
 View State Size: <span id="ViewStateSize"></span>
 <script language="javascript" type="text/javascript">
     $(document).ready(function () {
         // put all your jQuery goodness in here.
         var vs = document.getElementById("__VIEWSTATE");
         var outPut = document.getElementById("ViewStateSize");
         outPut.innerHTML = vs.value.length;
     });
 </script>
 <asp:GridView ID="gvCustomer" runat="server">
 <Columns>
 <asp:TemplateField AccessibleHeaderText="Get Info" HeaderText="Get Info">
 <ItemTemplate>
     <asp:HyperLink ID="hl" runat="server" Text="Get Info"
         NavigateUrl='<%# String.Format("CustomerInformation.aspx?CustomerID={0}", Container.DataItem) %>' />
 </ItemTemplate>
 </asp:TemplateField>
 </Columns>
 </asp:GridView>
 </asp:Content>



The second option is to store ViewState on the server. When you use this option, the data is never transferred across the wireless connection. This requires some setup on the pages, but once configured, this option is relatively painless. There are a number of articles about this topic on the web, so there's not much reason to go over the details here.

ClientIDs . Automatically generated ClientIDs represent the next issue that ASP.NET developers must negotiate. By default, the client IDs that are generated comprise a munged version of the server-side parent containers and control IDs. For example, the grid shown in the ViewState example has the ID MainContent_gvCustomer. You can use the following JavaScript command to get a client-side reference to a server-side object:

var serverObject = document.getElementById('<%: gvCustomer.ClientID%>');

Unfortunately, developers are not the only folks who work on a project. Designers are also involved, and they may not be familiar with the functionality behind control IDs. Therefore, a new feature was introduced in ASP.NET 4 to grant programmers complete control over the client IDs that are generated. This feature is controlled by the ClientIDMode attribute. The values of particular interest for this attribute are Static and Predictable. The Static attribute makes sure that the client ID that is generated remains the same as the server ID. The Predictable attribute is used in conjunction with the data-bound controls and the Static value to generate repeatable client IDs in a grid.

MasterPages. Although not necessarily a requirement for Web Forms developers, MasterPages is a great tool for sharing display layout among pages. I don't recommend that you try to use the same general layout for both a desktop web application and a mobile web application. Instead, it makes sense to create a master page optimized for mobile devices and to continue using this design and layout technique, although MasterPages will certainly be different because of the difference in the layout capabilities of a mobile device and a desktop web browser.

HTML5 Validation

In the Visual Studio 2010 SP1 release, the April 2011 ASP.NET MVC 3 Tools update, and the June 2011 release of the Visual Studio Web Standards update, Microsoft not only updated its MVC tools, but it also added support for HTML5, as illustrated in Figures 6A and 6B. Developers now get support for HTML5, CSS3, and the JavaScript objects that support the new features. With CSS3 support, even the IE, Mozilla, and Safari extensions are supported.





Saving Bandwidth with CDNs

Most developers are accustomed to copying files locally to a solution, then running the application as a self-contained unit. There are a number of files that applications share, not only across a single company but also across many applications. These are libraries such as jQuery and many of the JavaScript libraries that are a part of the ASP.NET 4 framework. Many companies and organizations share these libraries. Instead of using this bandwidth on your servers and routinely downloading these files, based on caching settings, it makes sense to use the same copies that others may have already downloaded to their systems. This means that instead of loading JavaScript files, CSS files, and others from your web server, the user's browser downloads the files from various content delivery networks (CDNs). Although this approach may not sound like a significant improvement, your users will typically obtain a better response time for various libraries from these CDNs. Along with shipment of ASP.NET 4, Microsoft has provided support for its CDN within the ASP.NET ScriptManager by setting the EnableCdn attribute to true.

To illustrate the difference between using a CDN and using content from your own local web server, let's look at the results from a simple ASP.NET Web Form by using the Firebug and YSlow tools. Let's look at a simple page with only the master page and the script manager installed, as shown in Figure 7.



Once the four standard ASP.NET JavaScript files are cached locally, 56.6KB of data is being pulled from the local cache. This may not sound like a lot of data, but in an HTML5 mobile world, this amount can be significant.

Now, what would have happened if we had not used the CDN? As you can see from Figure 8, YSlow reports that the files are cached coming from our own web server.



However, it is highly unlikely that other applications are pulling this content from our servers; at least we hope that they aren't. By using the files from our local server, users are paying the "bandwidth tax" instead of using the files that may already be cached locally from another application. Every little bit of bandwidth savings helps, especially in the mobile space. A second advantage is that on public-facing websites where bandwidth may cost money, the bandwidth cost for your website will most likely go down by using a CDN. For more information about why to cache files through CDNs, check out Dave Ward's excellent set of articles in the Links of Interest sidebar at the end of this article

ASP.NET MVC

In pages and applications based on the MVC design pattern, the presentation logic is decoupled from the underlying application logic. If an application needs to present different views of the same data to a desktop and a mobile client web client, it is possible to reuse the underlying models and controllers and merely swap the views as necessary. I think this is a huge win for web developers who are using the ASP.NET MVC framework.

With the recent MVC3 Tools update, the ASP.NET team has added the ability to use HTML5 by default. You can do so by selecting the Use HTML5 semantic markup check box, as shown in Figure 9.