JQuery AJAX CRUD Operation On Web API - Part I

Facebook Twitter Google Digg Reddit LinkedIn Pinterest StumbleUpon Email

In this post we looked at how to create a basic Asp .Net MVC Web API from scratch. We will continue working on the same sample and incorporate basic Create/Read/Update/Delete operations on Contact entity.

Defining Contact Table

To start with I am going to create a new Contact Table in ContactAPI Database. If you are interested in following along with this tutorial, I have attached the Create script for the Contact table.

Building Asp .Net MVC Web API From Scratch

Facebook Twitter Google Digg Reddit LinkedIn Pinterest StumbleUpon Email

In this blog post we will start creating the basic Asp .Net MVC Web API sample. There are bunch of blog posts I have been making around this topic. So in case you are looking for what this new platform is and how it is different from other service building frameworks out there, please look at the following post.

So, let's jump right into building a basic ContactManager API. To follow along with this tutorial you will be using,

Creating The Empty Solution

As the goal of Web API is to keep things simple and as minimum as possible, let's start from creating and Empty solution.

Understanding Asp .Net MVC Web API

Facebook Twitter Google Digg Reddit LinkedIn Pinterest StumbleUpon Email

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.

Custom Data- Attributes In HTML5

Facebook Twitter Google Digg Reddit LinkedIn Pinterest StumbleUpon Email

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.

HTML5 New Form Elements

Facebook Twitter Google Digg Reddit LinkedIn Pinterest StumbleUpon Email

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.