In this blog post we will take a look at the new feature/framework, Asp .Net MVC Web API by Microsoft. Before we dive deep in creating any sample application we will look at Web API in general and benefits of using that and how it is different from other service building options available on .Net stack.

Over the period of time Microsoft has released many frameworks for building services. We have traditional Asp .Net ASMX Web services and then we have WCF. Both of these provides a way for building SOAP based services.When you want to make two applications talk to each other, WCF is the way to go. However, this might not be the right approach in every case !!!!!

Now you might be thinking why is that ? For us to understand this we need to identify primary differences between WCF Services and Asp .Net MVC Web API and when to use one over the other. If you look at the recent trend of web and mobile applications development you find more and more use of JavaScript frameworks like jQuery, Knockoutjs extensively using AJAX mechanism to bring down small chunk of data from server and updating HTML locally on the client instead of posting whole page to the server every time. For example server side validation of a form element in Asp .Net MVC, here.

More over, there are different platforms like iOS and Android which build their platform specific native applications and they mostly rely on some sort of external services. They also try to perform similar calls passing small chunks of data back and forth. And this has created a huge demand for a light weight service type interface that has minimalist approach in terms of security and implementation.

And that is where Asp .Net MVC Web API comes into play. They are designed to tackle exact same problem. Under the hood, Web API is using Asp .Net MVC framework so it leverages all the good things from MVC framework.

Benefits of using Asp .Net Web API

• It is REST by default. The routes you used to add in MVC maps seamlessly to controller's Action Methods and provides REST behavior out of the box. Exposing a new operation in your service is as simple as adding a new ActionMethod.

• Since it is REST based, the content negotiation happens out of the box by our base ApiController functionality. So if the client is requesting data in JSON format or in XML format you do not have to write special code to handle those cases.

• URLs are no longer required to have ActionMethod names included in them. Again, it is REST. Based on the type of request your API is receiving, the request header will have our standard GET,POST,PUT and DELETE Http verbs. These verbs will auto-magically map to the appropriate ActionMethod.

• Activating a new service is as simple as putting up a new Controller in your MVC application. There is no complex configurations/bindings involved like we had to do in WCF.

• Since it leverages the MVC routing infrastructure, abstraction is much more easier. Providing a newer version of your API is as simple as adding a new route and mapping it to the new Controller, keeping the existing service and it's consumer unchanged and intact.

• And most of all, since it is build on HTTP standards, anything that is capable of making HTTP request can reach out to your service. So you can expose your functionality to broader set of clients as opposed to SOAP services.

In future blog posts we will walk through the process of creating a Web API from scratch. Until then have fun.

In the blog post we will look at another exiting feature of HTML5 , custom data-* attributes on any HTML elements. Technically it was possible to add custom attributes on HTML elements prior to HTML5, however that would result into non valid HTML because these attributes you add were not part of HTML specifications.

That is changing going further with HTML5, where you can add whatever number of and whatever types of custom data- attributes you want to add and it will still result in valid HTML. These attributes will not available to the consumers of your web pages, but as a developer you will be able to leverage them to simplify your JavaScripts further.

As part of HTML5 custom data attribute specifications, you can define custom attributes starting with "data" keyword. So your custom attributes will be data-* where * can be any thing you want but has to be one character minimum. So in other words your custom attributes must be prefixed with "data-" attribute in order for it to be a valid HTML5 markup.

Adding Custom data-* Attributes

With the introduction, let's build a small sample that demonstrates the use of custom data-* attributes. As usual I will be using Visual Studio 2012 to create the sample. I have created an empty ASP.net application and added HTML page called dataDemo.htm. I have also added jQuery from jQuery CDN.

In HTML5 there are tons of new form elements being added. All of these brings a lot of advantage to the Web developers and consumers at the same time. With these new improvements, accepting different types of input from our users and providing validation for these fields will be much more easier and more enjoyable.

Today, we will explore some of these new form elements. So let's jump right into it. Following is the list of some of these new HTML5 elements that we will be looking into.

• required
• email
• url
• number
• range
• outout

As usual I will be using Visual Studio 2012 to create this sample. But the actual sample only contains html page, so any text editor would do just fine.

required attribute

Going further in HTML5 forms, if you want to make any input field required, just add this extra attribute to your input and browser itself will make sure to validate this business rule for you.

In the previous blog post we looked at HTML5 Web Storage features. Mainly we focused on function for adding items to localStorage. And briefly we used couple of other functions to read the values back from the localStorage.

• setItem(key,value)
• getItem(key)
• length()
• key(i)

We used above functions to add item to the localStorage, find the storage length, and find the item by it's key.

In the blog post we will be looking at another interesting feature of HTML5, which is a Web Storage. This feature allows our web applications to store data onto client's browsers. Prior to HTML5 we have used cookies to store such information on client's machine.

The problem with cookies is that you have a very limited space to store all your important data and the data you store in cookies will be always passed back and forth as part of request and response of your pages. This definitely slows down your pages in case you store lot of information in the cookies. Also it is not very secure since your data is exposed during the request and response.

The HTML5 Web Storage feature is trying to address the exact same issue with the introduction to two new APIs for storing data on clients' machines. These two APIs are,

• localStorage - Stores data across user sessions until user clears his history and deletes data explicitly
• sessionStorage - Stores data for only that particular session of the user. As soon as the browser is closed the data will be destroyed.

Benefits of using these new Web Storage APIs

• Data you store using these APIs are not being send back and forth as part of request/response.
• You can store a lot more information in these storage as compare to what you were able to store into cookies.
• Storing and retrieving your data from these storage is much more simpler.

So without any further discussion, let's dive into creating a sample. Again for the demonstration of this sample I will be using Visual Studio 2012. You do not have to use this tool at all if you don't want to since we are not planning to use any Server side technologies here.

In my previous post on HTML5 Geolocation, we created an empty Asp .Net web applications. For this sample we will be working with the same sample.

Creating the Application/Page

Let's start by adding a new HTML page in our existing solution. In case you do not have that project, you can download the one that is attached with this blog post. Let's name our page as localstorage.html. Go ahead and add following JavaScript function. The function basically checks if the localStorage is supported or not.