How to perform a CRUD operation on the jQuery igGrid with the ASP.NET Web API

Dhananjay Kumar / Thursday, July 30, 2015

In this post we will learn how to perform a CRUD operation on the igGrid using the ASP.NET Web API, including:

· Creating the ASP.NET Web API using the Entity Framework database first approach

· Performing a CRUD operation on the igGrid in a jQuery application

At the end of the post we should able to create Web API for CRUD operations on the City entity and perform the CRUD operations from the igGrid.

Setting up the Database

Here we have a database with the table name City as shown in the image below:

We have created the database in SQL Server and the Web API will connect to the database using the Entity Framework database first approach.

ASP.NET Web API

Let us go ahead and create a Web API project in Visual Studio. To do this, select File->New Project-> Web Application as shown in the image below.

On the next window, select Web API template to create the Web API project.

Data Model

Once the project is created we need to create the data model. To create the data model we will follow the Entity Framework database first approach. To do this, right click on the Model folder in the project and select Add new item. In the Add new item window, from the data tab select ADO.NET Entity Data Model as shown in the image below:

On the next screen, select the “EF Designer from database” option.

On the next screen, click on the New Connection option. To create a new connection to the database we need to provide the database server name and choose the database from the drop down. Here we are working with the “School” database, so we’ve selected that from the drop down and provided the database server name which is djpc in my case.

After clicking OK, on the next screen, leave the default name of the connection string and click on next. On this screen we need to select the tables. We want to work with only the City table so check the check box for the city table. Leave the default for the other settings and click on Finish to create the data model.

Scaffolding the Web API

As of now we have created the data model which is ready to be used in the Web API. We have two options to create the Web API:

1. Create the API Controller class manually

2. Use Scaffolding to create the API controller class

Here we’ll use the scaffolding option to create the Web API. Once the API is created we will modify the actions as required. To create the Web API using the scaffolding, right click on the Controllers folder and then select Add New Controller. In the installed template of controllers, select Web API 2 controller with actions, using Entity Framework as shown in the image below.

On the Add Controller dialog option, select City class as the model class and SchoolEntities as the Data context class and click on Add.

Once we click on Add, Visual Studio will create the Web API for CRUD operations on the City entity. In the controllers’ folder, we can see the CitiesController class has been created with the code required to perform the CRUD operations on the city entity. The Web API can be accessed on the baseurl/api/cities URL. Different CRUD operations on the Cities Web API can be performed as show in the table below:

We can test the HTTP GET operation in the browser itself. In the browser XML response of the GET operation for the City entity will be rendered as shown below:

We have successfully created the Web API to perform the CRUD operations on the City entity.

Create a jQuery app using the igGrid

Let us start with creating a blank web application in Visual Studio by choosing the ASP.NET Web Application template from the Web tab. In the installed template, select the Empty template to create the web application. Once project is created successfully, we need to add reference of the Ignite UI library in the project. There are three different ways we can work with Ignite UI reference.

1. Use the CDN

2. Download library and add it to the project

3. In Visual Studio use the NuGet package manager

We are going to use NuGet package manager. To use that, right click on project and from the context menu choose Manage NuGet Packages. Next search for Ignite UI and add the Ignite UI package in the project. Once the package is added, then add an HTML and a JavaScript file in the project.

Once the project is created, start with adding the references of the jQuery and the Ignite UI JS files. In the head section of the HTML, we have added the references of:

· Ignite UI CSS

· Bootstrap CSS (optional)

· Modernizer JS

· JQuery JS

· JQuery UI JS

· Ignite UI Core, dv and lob JS files

· Demo JS file (we added this JS file in the project. Here we will write the code behind)

<head>

<title>igGrid CRUD Demo</title>

</head>

On the HTML, let us put a button. On clicking the button, changed data will be saved to the server. Also, let’s create a table to create the igGrid. This HTML will have the following markup:

<body>

<br/>

<div>

<br />

<br/>

</div>

</body>

In the JavaScript, let us convert the table to the igGrid. Essentially in the igGrid, we have to set the following properties:

· dataSource property : set to the GET URL of the Web API

· primaryKey : set to the primary key column of the City entity which is Id

· autoGeneratedColumsn : false

· height and width of the grid

· columns: give the columns a name with the type. In this case we have three columns in which the Id is integer and the other two are strings.

· restSettings: give the REST URL for the CRUD operations

$(document).ready(function () {

$("#grid1").igGrid({

dataSource: "http://localhost:36931/api/cities",

primaryKey: "Id",

restSettings: {

update: {

url: "http://localhost:36931/api/cities"

remove: {

url: "http://localhost:36931/api/cities",

batch: false

create: {

url: "http://localhost:36931/api/cities",

batch: false

}

autoGenerateColumns: false,

height: "200px",

width: "800px",

columns: [

{ headerText: "ID", key: "Id", dataType: "number" },

{ headerText: "Name", key: "Name", dataType: "string" },

{ headerText: "Country", key: "Country", dataType: "string" }

features: [

{

name: "Updating",

editMode: 'cell',

columnSettings: [{

columnKey: 'Id',

readOnly: true

}]

}

]

});

$("#save1").on("click", function () {

$("#grid1").igGrid("saveChanges");

});

And that’s it! Now when we run the application we should able to render the data from the Web API in the grid and perform the CRUD operation. The most important part of the above igGrid is the REST settings. In the REST setting we need to provide the Web API URL for the CRUD operations:

restSettings: {

update: {

url: "http://localhost:36931/api/cities"

remove: {

url: "http://localhost:36931/api/cities",

batch: false

create: {

url: "http://localhost:36931/api/cities",

batch: false

}

When we set the URL properties of update, remove, and create, it will make the POST call on the given URL for the create, PUT for the update, and the DELETE for the remove. Let’s run the application and inspect the network call in the browser developer tool. I added a new ROW to the igGrid and then clicked on the Save to the server button. In the network tab we can notice that for “create”, igGrid is making a POST call with the request payload to create a new record.

While making the WEB API calls, the igGrid is hiding all the complexities - and as a developer we only need to focus on the setting the URL for different CRUD operations and it’s done! This is the power of the igGrid. When finished, the grid should be rendered as shown in the image below:

Conclusion

In this post, we learned how to:

· create an ASP.NET Web API

· perform a CRUD operation in the jQuery igGrid

I hope you found the post useful - thanks for reading and happy coding!