JQuery Grid with ASP.

The jquery grid makes it easy to implement CRUD operations in the pagination, sorting, filtering, and jquery plug-in grids in ASP.

Has the following characteristics:

• A stylish tabular data rendering control.

• JavaScript controls are used to represent and manipulate tabular data on the web.

• Ajax can be enabled.

• can be integrated with any ASP, javaservelets, JSP, PHP and other server-side technology.

• Integrated with ASP, it's simple.

• Support for paging, JavaScript, and server-side data sources.

• Supports JQuery UI and boot (Bootstrap).

To use a grid plug-in, you will need an HTML table marked as the base element order of the grid. It is recommended that you use the table's data source property as the location identifier for the server-side source URL.

<table id= "Grid" Data-source= "@Url. Action (" Getplayers ") ></table>

Initialize the table as the field displayed in the grid:

grid = $ ("#grid"). Grid ({     datakey:  "ID",      uiLibrary:  "Bootstrap",      columns: [     {  field:  "ID",  width: 50, sortable: true },     {  field:  "Name", sortable: true },     { field:  " Placeofbirth ", title: " Place of birth ", sortable: true },      { field:  "dateOfBirth", title:  "Date of birth", sortable:  true },     { field:  "Edit", title:  "",  width: 34,  type:  "icon", icon:  "Glyphicon-pencil", tooltip:  "Edit",  events: {   "click": edit } },     { field:  "Delete",  title:   "",  width: 34, type:  "icon", icon:  "glyphicon-               remove ", tooltip: " Delete ", events: { " click ":  Remove } }     ],     pager: {  enable: true, limit: 5, sizes: [2, 5, 10, 20] }  });

Example of a simple CRUD operation:

Function add ()  {      $ ("#playerId"). Val ("");       $ ("#name"). Val ("");       $ ("#placeOfBirth"). Val ("");       $ ("#dateOfBirth"). Val ("");       $ ("#playerModal"). Modal ( "Show");     }    function edit (e)  {       $ ("#playerId"). Val (e.data.id);       $ ("#name"). Val ( E.data.record.name);       $ ("#placeOfBirth"). Val (E.data.record.placeofbirth);       $ ("#dateOfBirth"). Val (E.data.record.dateofbirth);       $ ("#playerModal"). Modal ("show");    }    function  Save ()  {      var player = {         id: $ ("#playerId").Val (),         name: $ ("#name"). Val (),         placeofbirth: $ ("#placeOfBirth"). Val (),         dateofbirth: $ ("#dateOfBirth"). Val ()       };       $.ajax ({ url:  "Home/save", type:  "POST", data: { player:  player } })         .done (function  ()  {           grid.reload ();           $ ("#playerModal"). Modal ("Hide");         })          .fail (function  ()  {           alert ("Unable to save.");           $ ("#playerModal"). MoDal ("Hide");         });    }     function remove (e)  {      $.ajax ({ url:  "Home/Remove",  type:  "POST",  data: { id: e.data.id } })          .done (function  ()  {           grid.reload ();         })          .fail (function  ()  {          alert (" Unable to remove. ");         });     }    function  search ()  {      grid.reload ({ searchstring: $ ("#search"). Val ()  });     }

Server-side

Four methods are required in the controller: index, Getplayers, save, and delete.

[nocache]    public class homecontroller : controller     {      public actionresult index ()        {        return view ();       }        [httpget]      public  jsonresult getplayers (int? page, int? limit, string sortby, string  direction, string searchstring = null)       {         int total;        var  records = new gridmodel (). Getplayers (page, limit, sortby, direction, searchstring, out total);         return json (NEW { RECORDS, TOTAL&NBsp;}, jsonrequestbehavior.allowget);      }         [httppost]      public jsonresult save (Player  Player)       {        new gridmodel (). Save (player);         return json (True);       }        [HttpPost]       Public jsonresult remove (Int id)       {         new gridmodel (). Remove (ID);         return json (True);       }    }

[AttributeUsage (Attributetargets.class | attributetargets.method)]    public  sealed class NoCacheAttribute : ActionFilterAttribute    {       public override void onresultexecuting (ResultExecutingContext  filtercontext)       {         FilterContext.HttpContext.Response.Cache.SetExpires (DateTime.UtcNow.AddDays ( -1));         filtercontext.httpcontext.response.cache.setvaliduntilexpires (False);         filtercontext.httpcontext.response.cache.setrevalidation ( Httpcacherevalidation.allcaches);         FilterContext.HttpContext.Response.Cache.SetCacheability (Httpcacheability.nocache);         filtercontext.httpcontext.response.cache.setnostore (); &nbsP;       base. Onresultexecuting (filtercontext);       }    }

Project home:http://www.open-open.com/lib/view/home/1430832881320

JQuery Grid with ASP.