You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.
Become a sharper developer and jumpstart your career.
$0
$
. 00
monthly
For Basic members:
$10
For Premium members:
This article shows how to easily implement paging, sorting, filtering and CRUD operations with the jQuery Grid Plugin in ASP.NET MVC with bootstrap.
Introduction
In order to use the grid plugin you will need a HTML table tag for a base element of the grid. I recommend to use the "data-source" attribute of the table as identification for the location of source URL on the server side.
Then, we need to initialize the table as a jQuery grid with the fields that we are planning to display in the Grid.
If you want to be able to sort by a specific column you need to set the sortable option of the colum to true. When you do that, the grid plugin will send information to the server about the field name that needs to be sorted. In order to configure paging you need to use the pager option from where you can control the paging.In the sample project I use the following code to implement simple CRUD operations over the data inside the grid.
Server SideIn the Controller we need only the 4 methods Index, GetPlayers, Save and Remove.
Please note that I'm using the custom "[NoCache]" attribute for the controller that will resolve some issues with the caching. I recommend the usage of that attribute or a similar mechanism for the prevention of bugs related to caching.
In the data model of this example I use XML as a data store to simplify the logic in the model. You can customize the date model as you want and replace my implementation with code using relational databases like Microsoft SQL Server, My SQL or other services that are specific for your project.I hope that this article will be useful for your project. Happy codding!
Diving Into ASP.NET WebAPI