JQuery AJAX CRUD Operation On Web API - Part I

Aug 24, 2013
Facebook Twitter Google Digg Reddit LinkedIn Pinterest StumbleUpon Email
Download Source

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.

Add File

Adding Entity Framework Data Model

Next, we will add Entity Framework Data model on our newly created database. We will be leveraging the Scaffolding feature of Asp .net MVC and let it generate the Web API Controller methods.

Add a new folder in the project, I have named it "Data". Now right click on the new folder and add a new Entity Framework Data Model File.

EDMX File

Since we are starting from existing database we will select the first option in the Wizard.

Model From Database

Select appropriate Server where you have created the ContactAPI database.

Database Selection

In the next screen, select the Contact table we created earlier.

Select Table

Click Finish and wrap up the EDMX generation wizard. Finally you should see the model crated by the Wizard with the Contact entity in it.

EDMX Model

Creating Web API Controller

First of all, make sure to compile your application after successfully adding the Entity Framework Data Model. Now let's add a new API Controller with the help of Scaffolding.

API Scaffolding

Once you select appropriate model class and entities class, Scaffolding template will generate a new Controller ContactAPI, with following ActionMethods in it.

API Action Methods

Couple of interesting things to note here.

  • The scaffolding template generates 4(actally 5) methods for us. One for each specific type of database operations namely, Create/Read/Update/Delete(CRUD).

  • Another interesting thing to note here is the underlined words on every method. They correspond to your regular HTTP Get/Put/Post/Delete verbs.

  • And the Sample URLs (Commented line above every method) on these methods are surprisingly missing the actual method name from the routes !!! That is because, the method names are starting with Get/Put/Post/Delete verbs and so depending on the type of request made by client, an appropriate ActionMethod will be invoked without you needing to provide the method name in the URL.

Creating The JavaScript Client For Web API

Now, that we have the API up and running, let's go build a jQuery client against this API. We will start by adding a new Controller, ActionMethod and an Empty view in the same application. For the purpose of this demo we will consume our API in the same Application.

Add a Home Controller

Add Dialog

Solution

Add the Index View

Add View Dialog

View in solution

View in solution

Add a jQuery

We will be using jQuery 1.9.1 downloaded from here and add that to the js folder in the project.

Add jQuery

Next, add a jQuery to our Index view that we created few steps above this.

jQuery in view

JavaScript Function To perform Get operation

Now, let's add a button which will invoke Ajax call to bring all Contacts from the API. Go ahead and add following HTML on our view. We will be adding all the incoming contacts as ListItem in this UL element. Our button is invoking a JavaScript function that is essentially an Ajax call to our Web API Get Method.

HTML Elements

jQuery Function To Perform GET operation

The first function will help us perform Get operation and the second function is the success call back where we will bind the incoming contacts to the UL elements.

HTML Elements

Go ahead and run the application. Once you click on the Get All Contacts button, you should see the Ajax request in Developer Toolbar, and the response will display the data flowing back as part of the response. Our success function will take care of processing this result and will display this data in UL element.

Developer Toolbar

In the next blog post we will complete this sample by adding remaining three operations, Create/Update/Delete by creating jQuery functions that performs relevant POST/PUT/DELETE operations on our Contact entity.