How to display data in Webgrid in MVC - ASPMANTRA | Asp.Net,MVC,AngularJs,Jquery,Javascript,Sql Server AND WCF snippets and tutorial

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.


What do you think about this article?

If you found this article useful, please share and follow on Facebook, Twitter, Google Plus and other social media websites. To get free updates subscribe to newsletter. Please put your thoughts and feedback in comments section.

2 Comments


EmoticonEmoticon