How to display data in Webgrid in MVC - Free Asp.Net,MVC,AngularJs,Jquery,Javascript,Sql Server,WCF,Entity framework 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.

Share this

Share on FacebookTweet on TwitterPlus on Google+

2 comments


EmoticonEmoticon