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.