background image



Add, Edit, Delete In jqGrid With ASP.NET Web API

This post explains how to implement a simple FILTH (Create, Study, Update, and Delete) in jqGrid with ASP.NET MVC 4 Web API. If you are beginner to Web API, read this post to create a web API that supports CRUD operations. We will use GET, POST, PUT and DELETE HTTP methods for Take, Insert, Update and Delete operations respectively.


I am using same model and secretary structure as therein spot:

 public class Product
        public int Id { get; set; }
        public string Name { get; set; }
        public string Category { get; set; }
        public decimal Price { get; set; }

Repository Interface:

 interface IProductRepository
        IEnumerable<Product> GetAll();
        Product Get(int id);
        Product Add(Product item);
        void Remove(int id);
        bool Update(Product item);


 public class ProductRepository : IProductRepository
        private List<Product> products = new List<Product>();
        private int _nextId = 1;

        public ProductRepository()
            Add(new Product { Name = "Tomato soup", Category = "Groceries", Price = 1.39M });
            Add(new Product { Name = "Yo-yo", Category = "Toys", Price = 3.75M });
            Add(new Product { Name = "Hammer", Category = "Hardware", Price = 16.99M });
            Add(new Product { Name = "Network Cards", Category = "Electronics", Price = 6.59M });
            Add(new Product { Name = "Spotting Scopes", Category = "Optics", Price = 25.99M });
            Add(new Product { Name = "Biometric Monitors", Category = "Health Care", Price = 100.0M });
            Add(new Product { Name = "Perfume", Category = "Cosmetics", Price = 10.99M });
            Add(new Product { Name = "Hair Coloring", Category = "Personal Care", Price = 16.99M });

        public IEnumerable<Product> GetAll()
            return products;

        public Product Get(int id)
            return products.Find(p => p.Id == id);

        public Product Add(Product item)
            item.Id = _nextId++;
            return item;

        public void Remove(int id)
            products.RemoveAll(p => p.Id == id);

        public bool Update(Product item)
            int index = products.FindIndex(p => p.Id == item.Id);
            if (index == -1)
                return false;
            return true;

Web API Controller:

Annex an empty API controller in your project and add a subject that holds an IProductRepository instance:

public class ProductsController : ApiController
    static readonly IProductRepository repository = new ProductRepository();

let’s take a look at the JSON initialise expected by the grid:

  total: "xxx",
  page: "yyy",
  records: "zzz",
  rows : [
    {id:"1", cell:["cell11", "cell12", "cell13"]},
    {id:"2", cell:["cell21", "cell22", "cell23"]},

To expose product list in jqGrid, we implement the supra format. See following method:

  public dynamic GetProducts(string sidx, string sord, int page, int rows)
            var products = repository.GetAll() as IEnumerable<Product>;
            var pageIndex = Convert.ToInt32(page) - 1;
            var pageSize = rows;
            var totalRecords = products.Count();
            var totalPages = (int)Math.Ceiling((float)totalRecords / (float)pageSize);
            products = products.Skip(pageIndex * pageSize).Take(pageSize);
            return new
                total = totalPages,
                page = page,
                records = totalRecords,
                rows = (
                    from product in products
                    select new
                        i = product.Id.ToString(),
                        cell = new string[] {

To add new product, HTTP POST request is used:

 public HttpResponseMessage PostProduct(Product item)
            item = repository.Add(item);
            var response = Request.CreateResponse<Product>(HttpStatusCode.Created, item);
            string uri = Url.Link("DefaultApi", new { id = item.Id });
            response.Headers.Location = new Uri(uri);
            return response;

To update existing product, HTTP PUT is used:

 public void PutProduct(int id, Product item)
            item.Id = id;
            if (!repository.Update(item))
                throw new HttpResponseException(new HttpResponseMessage(HttpStatusCode.NotFound));

To erase a ware:

                public HttpResponseMessage DeleteProduct(int id)
            return new HttpResponseMessage(HttpStatusCode.NoContent);


For simplicity, We are going to use same app to consume Web API.
1. First we include jqGrid library in our project. To install jQuery.jqGrid from NuGet, run the following command in the Package Coach Console

Install-Package jQuery.jqGrid

2. include jQuery UI and jqGrid css files

 @Styles.Render("~/Content/themes/base/css", "~/Content/css")
 <link href="~/Content/jquery.jqGrid/ui.jqgrid.css" rel="stylesheet" type="text/css" />

OR include ui.jqgrid.css in existing bundle.

3. include javascript files:

    <script src="~/Scripts/jquery-1.6.2.js" type="text/javascript"></script>
    <script src="~/Scripts/jquery-ui-1.8.23.js" type="text/javascript"></script>
    <script src="~/Scripts/i18n/grid.locale-en.js" type="text/javascript"></script>
    <script src="~/Scripts/jquery.jqGrid.min.js" type="text/javascript"></script>

you can affix grid.locale-en.js and jquery.jqGrid.min.js in the bundle and use it. Make trusted, the sequence must be same.

HTML Structure:

4. You have to add HTML table for jqGrid and a div for pager in body.

        <table id="gridMain">
        <div id="pagernav">

That’s it.

5. To create staple jqGrid structure:

 var API_URL = "api/products/";
            url: API_URL,
            datatype: 'json',
            mtype: 'GET',
            pager: '#pagernav',
            sortable: true,
            height: 200,
            viewrecords: true,
            colNames: ['Id', 'Name', 'Category', 'Price'],
            colModel: [{ name: 'Id', index: 'Id', width: 40, sorttype: "int" },
             { name: 'Name', index: 'Name', editable: true, edittype: 'text', width: 70 },
             { name: 'Category', index: 'Category', editable: true, edittype: 'text', width: 70 },
             { name: 'Price', index: 'Price', editable: true, edittype: 'text', width: 50, align: "right", sorttype: "float", formatter: "number" }
            caption: "CRUD With ASP.NET Web API",
            autowidth: true


6. By default, jqGrid uses POST HTTP method for adding and editing record. But we have to use unlike HTTP methods for different operations. It’s the most tricky part of this situation. I created a method takes HTTP Method type and return parameter for editing.

 function updateDialog(action) {
            return {
                url: API_URL
                , closeAfterAdd: true
                , closeAfterEdit: true
                , afterShowForm: function (formId) { }
                , modal: true
                , onclickSubmit: function (params) {
                    var list = $("#gridMain");
                    var selectedRow = list.getGridParam("selrow");
                    rowData = list.getRowData(selectedRow);
                    params.url += rowData.Id;
                    params.mtype = action;
                , width: "300"

  jQuery("#gridMain").jqGrid('navGrid', '#pagernav',
        { add: true, edit: true, del: true },

Now, In seafaring bar, click on add, edit or delete icon to insert, update or delete product respectively.

Hope, It helps. Share your opinion, suggestion or queries in comment box.


Related posts:

  1. Passing Multiple Parameters to ASP.NET Web API With jQuery
  2. Using jQuery Featured Content Slider With ASP.NET Web API
  3. Using jQuery UI Autocomplete With ASP.NET Web API
  4. Creating a Chart with jQuery Flot and ASP.NET Web API
  5. Quantity Validation and Totality Deliberation in ASP.NET Gridview Shopping Cart with jQuery
  6. jqGrid Inline Editing With jQuery Autocomplete FlexBox
  7. Make Separate Web API’s Fulfil for Mobile Request: ASP.NET MVC 4

Comments:  5

Friday, 14 September 2012, 19:00 | Added by: Development Team | Viewed: 2232

You can get your own Online Store in one Month for just $600! Get a Free Quote!

Copyright © 2012 eCommercePros. All Rights Reserved.
eCommercePros maintains this Web Site as a convenience to online users. The information located here was believed to be accurate at the time it was posted for public viewing by the online community. eCommercePros specializes in Logo Web Design, Web Application Development and Marketing. New York Web Design Company.
For this Web Site link sharing please click: