Wednesday, March 28, 2012

This Post is continuation to my Previous Post where I have created a ASP.NET Web Api Service, In this Post I am going to create a simple client using jQuery, MVC 4 and Razor View Engine to call the Services and perform POST, DETELE, PUT and of course GET operations using the Web Api Service.

Lets just directly get into my client code, as discussed in Part 1 of this post, on how to create a Web Api Project you can follow the same steps here,

OR alternatively you can use any existing application not necessarily on MVC 4, it can be any web application which supports jQuery version 1.6.2 or later. Now lets start one by one

1. Get (Get All Records, GET)

In this function I have given a sample which gets all the records present in my Database using code first approach of entity framework, jQuery and ASP.NET Web Api Services. I have used two approach here, one using getJson function of jQuery and the other using ajax function.

1:function GetCustomersAJAX() {

2: $.ajax({

3: url: "/api/values/",

4: type: "GET",

5: contentType: "application/json;charset=utf-8",

6: success: function(data)

7: {

8://declare a varialbe which holds html string to be appnended to create a table structure from returned data

Both my function above gives the list of all the contacts I have in my DB and wraps the results in a HTML Tables using $each method of jQuery. Just for a quick reference here I am giving below the Get method which maps to the url “api/values”

1:// GET /api/values

2: [HttpGet]

3:public IEnumerable<ContactDetail> Get()

4: {

5:return repository.GetAll();

6: }

And the corresponding repository method is as below:

1: ContactEntities context = new ContactEntities();

2:

3:/// <summary>

4:/// Gets All Contact

5:/// </summary>

6:/// <returns>All Contact Details</returns>

7:public IEnumerable<ContactDetail> GetAll()

8: {

9:return context.ContactDetails;

10: }

When I run my application and press the Get All Button either Ajax or Json, I will get the following result.

Now let me run my Developer toolbar using F12 key of IE 9 to show you the result in raw data format using Ajax and Json.

This is giving me the the Http result as 200, which means Get request is Successful, which exactly I am checking in the jQuery ajax code using the statusCode: 200, and displaying the Success message. Similarly for other results we can either return from my controller as 404 not found and handle it here to display appropriate message.

Now lets dig more into this request, by clicking into go to detailed view of developer toolbar and see the response body, this gave me the following Text output, this will be same for both JSON and AJAX.

Now let me take you to my next Get request which is get by Id, this will take id as a parameter and returns me the specific contact:

1: function GetCustomersByIdAJAX() {

2://declare a varialbe which holds html string to be appnended to create a table structure from returned data

3: $.ajax({

4: url: "/api/values/" + $("#ContactId").val(),

5: type: "GET",

6: contentType: "application/json;charset=utf-8",

7: success: function(data)

8: {

9:if (data != null) {

10: $("#ContactFName").val(data.FirstName);

11: $("#ContactMName").val(data.MiddleName);

12: $("#ContactLName").val(data.LastName);

13: $("#ContactEmail").val(data.EmailAddress);

14: }

15:else {

16: alert("Customer does not exists");

17: ResetForm();

18: }

19: },

20: statusCode: {

21://Web API Post method returns status code as 201

22: 200: function () {

23: $('#errMsg').html('');

24://alert("Contact Displayed successfully using AJAX");

25://GetCustomersById();

26: },

27: 400: function (jqXHR, textStatus, err)

28: {

29: $('#errMsg').html('Error: ' + err);

30: },

31: 404: function (jqXHR, textStatus, err)

32: {

33: $('#errMsg').html('Error: ' + err);

34: }

35: }

36: });

37: }

And the same code using Json is as follows

1: function GetCustomersByIdJSON() {

2://declare a varialbe which holds html string to be appnended to create a table structure from returned data

3: $.getJSON("api/values/" + $("#ContactId").val(),

4: function (data) {

5:if (data != null) {

6: $("#ContactFName").val(data.FirstName);

7: $("#ContactMName").val(data.MiddleName);

8: $("#ContactLName").val(data.LastName);

9: $("#ContactEmail").val(data.EmailAddress);

10: $('#errMsg').html('');

11: }

12:else {

13: alert("Customer does not exists");

14: ResetForm();

15: }

16: })

17: .fail(

18: function (jqXHR, textStatus, err)

19: {

20: $('#errMsg').html('Error: ' + err);

21: });

22:

23:returnfalse;

24: }

In the code above for AJAX I have handled the different error codes aka Not Found, Bad Request or Success using their error codes, to elaborate more on this let me first give here the code for controller

1:// GET /api/values/5

2: [HttpGet]

3:public ContactDetail Get(int id)

4: {

5: ContactDetail contact = repository.GetById(id);

6:if (contact == null)

7:thrownew HttpResponseException(HttpStatusCode.NotFound);

8:return contact;

9: }

So now you can see above few things, first of all my Contact Id should be integer, if this this not integer then I will get HttpResponseException as BadRequest (400), and if the Contact Id does not exists then I am explicitly throwing the Not Found Exception (404) and if everything is success the system is giving me Success response (200), which I am handling in my jQuery as below

Now when I run my application I will get the following result:

For Success Result (200)

For Bad Request (400):

And finally for Not Found (404)

These are just few examples, you can have as many as possible depending upon your requirements. The code of the repository is given below I hope this code is self explanatory,

So with these codes above I have covered the GET, now lets move on to PUT, POST and DELETE of Web Api. defined as Update, Add and Delete in my example.

3. Update (PUT)

In this method I have created a simple form where I can search for a contact as I have given in my example above, displaying the values in the HTML text boxes, updating those values and finally I am saving those updated values back to my Database.

Her let me start in reverse direction, I am first giving my repository code and then controller and then I will show how I am updating those values using jQuery.

My repository codes are very simple I am just taking the updated contact from the controller, searching the same in the context of Entity model, and finally calling SaveChanges.

1:// PUT /api/values

2: [HttpPut]

3:publicvoid PutContact(ContactDetail contact)

4: {

5:if (repository.Update(contact)==0)

6: {

7:thrownew HttpResponseException(HttpStatusCode.NotFound);

8: }

9: }

Controller codes is also just taking the value from the HttpRequestContext and just passing the values to the repository, now lets get into my view code where I am taking the values from the Html Controls, creating the Json object and using Ajax I am passing the contact object to the controller.

In the above example once I created the contact object in JSON, I am using the Json.stringyfy method to convert the object to string format, which can be passed to the controller. Now lets see this in action, in the developer toolbar you can see my both the results are showing 200, one is used for GET and other for PUT,

Now lets get deeper into the request and response. Here you can see my Request body has the updated values, which is passed as a string to the Action method Update, which in turn calls the repository and update my contact Database.

4. Add (POST)

As the name indicates this method is used to Add a new record to the Database, my Add method is very much similar to the Update method only difference is instead of calling the HttpPut this is using HttpPost, and in repository I have to add a new contact object to the entity context and save the changes.

You can see my jQuery code, this is same as what I have used for update, only difference is instead of using the PUT I am using POST

and this will call the action method which is listening to HttpPost.

1:// POST /api/values

2: [HttpPost]

3:publicvoid PostContact(ContactDetail contact)

4: {

5: repository.Add(contact);

6: }

and my repository method is taking the contact object and saving this to the Database

1:/// <summary>

2:/// Adds New Contact

3:/// </summary>

4:/// <param name="contact">Contact</param>

5:public ContactDetail Add(ContactDetail contact)

6: {

7: var addedContact = context.ContactDetails.Add(contact);

8: context.SaveChanges();

9:

10:return addedContact;

11: }

Now lets see this in action.

the last result returned in the Dev Toolbar shows the result as 200, and the method as POST, which means addition successful, if you check the detailed view this will give you the request body which is very much similar to what we have in update method.

5. Delete (DELETE)

And last but not the least, lets clean up my unwanted records using the delete method. this method is simplest of all, where I just pass the contact id the action method, which uses the repository method to delete the contacts.

Table above is showing all my contacts present in the database, I will try to delete the contact id 16.

In the Dev Toolbar you can see my Method is showing DETELE and Result is 200, which means Delete Success.

With all the examples above I just tried to demonstrate a basic CRUD operations using jQuery and ASP.NET Web Api.

Hi Brij,Thanks for your post, this is what I was looking for.I am having similar setup, the the method calls the CreateEntity, the url post also has data, but inside the method the entity seems to be null. any sense into me would be greatly appreciated. ThanksBabu