You can display and edit the data returned from a web api service using the web api grid.
Required references
To use the grid include the following js and css in the web page
<script src=”../Scripts/WebGrid.js” type=”text/javascript”></script>
<link href=”../Content/GridStyle.css” rel=”stylesheet” />
Grid control also uses jQuery ,so also reference the jQuery library on the page.
Derive your controller class from the CustomController class which is available.
Also add the [WebGrid.PagingAttribute] to the controller class.
To display the data in a grid
1.Declare html table on the page
2.Call the GetValues method on the declared table
$(document).ready(
function () {
$(“IdOfTable”).GetValues({
URL: “/api/ControllerName/”,
IdColumn: “NameofPrimaryKeyColumn”
});
}
);
Add the following attribute to the Controller class
[WebGrid.PagingAttribute(EntityId = “AnyIdentifier”, PageSize = SizeOfPage, EntityType = typeof(TypeOfEntity))]
For example below will display the data for students in a grid
[WebGrid.PagingAttribute(EntityId = “Students”, PageSize = 10, EntityType = typeof(Student))]
3.Derive the controller class from the CustomController class.
You can also sort the displayed data by clicking the grid column headers
Leave a Reply