How to display data in Webgrid in MVC

Introduction: In this article today I am going to explain how to display data in Webgrid in MVC
How to display data in Webgrid in MVC

Description:
In this example I want to display the data of User_Registration table in Webgrid. To display the data add a view for Index action and design to display the data.

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

@{


    ViewBag.Title = "Users Detail";
    WebGrid grid = new WebGrid(Model,canSort:false,canPage:false);
}
<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,
      
    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.


Post a Comment

[blogger]

MKRdezign

Contact Form

Name

Email *

Message *

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