MVC Webgrid with paging and sorting

Introduction: In this article today I am going to explain how to implement the sorting and paging in MVC webgrid

Description:
In the last article I explained
To implement the sorting and paging in Webgrid we have to assign the canSort, canPage and rowsPerPage parameter. In this example I want to display the 2 rows per page.


WebGrid grid = new WebGrid(Model,canSort:true,canPage:true,rowsPerPage:2);

Index.cshtml :-
@model IEnumerable<UserRegistration.Models.User_Registration>

@{
    ViewBag.Title = "Users Detail";
    WebGrid grid = new WebGrid(Model,canSort:true,canPage:true,rowsPerPage:2);
}
<style type="text/css">
table
{
width:100%;
}
th
{
padding: 2px 2px 2px;
}
td
 {
  text-align:center;
}
</style>
<h2>Users Detail</h2>

@grid.GetHtml(
    tableStyle: "table",
    fillEmptyRows: true,    
    headerStyle: "false",  
    footerStyle: "false",
    mode: WebGridPagerModes.All,
    firstText: "<< First",
    previousText: "< Previous",
    nextText: "Next >",
    lastText: "Last >>",
   
    columns: new[]
    {
        //the model fields to display
        grid.Column("User_Name","UserName"),
        grid.Column("First_Name","First Name"),
        grid.Column("Last_Name","Last Name"),
        grid.Column(header:"Profile Image", format: @<text><img src="@Url.Content(item.Profile_Image)" alt="Image" height="100px" width="100px" /></text>),
        grid.Column("EmailId","EmailId"),
        grid.Column("Sex","Sex"),
        grid.Column("Master_Qualification.Qualification","Qualification"),
        grid.Column("Master_Country.Country_Name","Country Name"),
        grid.Column("Phone_No","Phone No"),
   }
) 

Build the project and run.

 Is this article helpful for you?

If yes post your comment to appreciate my work and fell free to contact me. 

Post a Comment

Hi
How to pass the data collection from my controller here only client side code have . i need how to pass the value from the server side.can u send me?

[blogger]

MKRdezign

Contact Form

Name

Email *

Message *

Powered by Blogger.
Javascript DisablePlease Enable Javascript To See All Widget