Webgrid implementation in ASP.NET MVC 5

Datetime:2016-08-23 04:38:52          Topic: ASP.NET MVC           Share

Hi every one welcome again.In my last tutorial i explained about Multi Bar Horizontal Chart using Angular nvd3 Library. In this tutorial i am going to explain about How to fetch and display Data from database in Webgrid. Webgrid is an Html helper that can be used to work with displaying grid data inASP.NET MVC web applications.

See more details about Webgrid class here .(from MSDN).In this article i am going to explain about the How to display data that is coming from server in Webgrid. Here, we can learn how to implement web grid helper in our MVC 5 web application.Follow this article.This do not need any jquery plugins need to b e installed. Sample web grid is seen in below screen shot.

Web Grid implementation in MVC5 application

Step 1 : Create web application

1. Open visual studio 2013 and create a web application using Empty MVC template.

2.Create a table in database with below structure(i named the table as UserTable ).

3.See below table structure i created in Local Database.

Step 2: Add ADO.NET Entity Data Model

1.Right click on Models folder--> Add --> New Item -->Select ADO.NET Entity Data Model(Under Data) --> name it -->Add --> select Add from Database (In Entity Data Model wizard) --> Next

2.Select Database --> give name for web.config.

3.Choose your Database objects(tables) and click finish.

4.Now Model is added to my project.

Step 3:  Create a controller to fetch data

1.Right click on Controllers folder --> Add --> controller --> Select Empty Controller template --> name i as HomeController --> Add.

2.Create a Index method to fetch data from database and to render View.

3.Replace the Controller code with below code.

public class HomeController : Controller
    {
        //Fetch data from database
        public ActionResult Index()
        {
            List

  
   
  lst = new List
 
   
    
  ();
            using (DatabaseEntities db = new DatabaseEntities())
            {
                lst = db.UserTables.ToList();
            }
            //I am passing data ti view through model binding
            return View(lst);
        }
	}

 
   

  

Step 4: Add view to the Index action

1.Right click on Index view --> Add View --> name it --> Add.

2.Now replace the Index.cshtml page  code with the below code.

@model List<WebGridinMVC5.Models.UserTable>
@{
    ViewBag.Title = "www.mitechdev.com";
    //create object for webgrid to use Webgrid helper
    var grid = new WebGrid(source: Model, canPage: true, rowsPerPage: 7);
    //pager
    grid.Pager(WebGridPagerModes.All);
 }   
<h2>Fetching and displaying data from server in WebGrid</h2>
<!--web grid styles starts-->
<style type="text/css">
    /*styles for altering rows*/
    .webgrid-row-style {
        padding: 3px 7px 2px;
    }
     .webgrid-alternating-row {
        background-color: #EAF2D3;
        padding: 3px 7px 2px;
    }
</style>
<!--web grid styles Ends-->
<!--web grid display element-->
<div id="webgrid">
    @grid.GetHtml(
    //styles class for table
    //here i used bootstrap table templates
            tableStyle: "table table-responsive backcolor",
            headerStyle:"wedgrid-header",
            footerStyle:"webgrid-footer",
            alternatingRowStyle:"webgrid-alternating-row",
            rowStyle:"webgrid-row-style",
            //binding table column to the grid
            columns:grid.Columns(
            grid.Column(header:"Serial No",format:@<text><div>@(item.WebGrid.Rows.IndexOf(item)+1)</div></text>),
            grid.Column(columnName:"Name",header:"Name"),
            grid.Column(header:"Email", format:@<text><a href="mailto:@item.Email">@item.Email</a></text>),
    grid.Column(columnName:"PhoneNumber",header:"Phone No"),
            grid.Column(header:"Is Active", format:@<text><input type="checkbox" checked="@item.Status" disabled="disabled" /></text>)
            )
    )
</div>

3.Now run the application we got the output like below with responsive table(with default paging).

Download the source code for this application here Source Code

Conclusion

I hope this article may helpful for many readers.Please subscribe to this blog to get posts to your mail inbox.And follow through social networks(F,,) for daily updates... 





About List