How to Bind Data to Webgrid in ASP.net MVC Using C#.Net

In this article I will show you how you can how to bind data to webgrid by using entityframework  in asp.net MVC using c#.Net. In this I will fetch data from data base by using linq query in c#.net and lenda expression.  In this I have used asp.net, mvc, c#.net, webgrid, entityframework, lenda expression, sql db and linq query.

Some of my previous articles are as follows: Code to Select All Checkbox in GridView in Asp.Net Using jQuery,   Highlight GridView Row on Mouseover Using CSS in Asp.Net C#.Net, Drag Drop Cells in GridView Control Using Asp.net C# and jQuery, Track and Display Error Message in Asp.Net MVC Application Using C#.Net, Simple Login From in Asp.Net MVC Using C#.Net, Bind and Retrieve ListBox Selected Value in MVC Using C#.Net, Bind DropDownList Using Entity Framework in ASP.Net MVC Using C#.

So for this article first we will create our table to add

After creating table we will create a mvc application. After creating mvc application we will create model

using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace MVCDemo.Models {     public class StudentDetails     {         public List<StudentDetail> Studentmodel { get; set; }     }     public class StudentDetail     {         public int Id { get; set; }         public string Name { get; set; }         public string Class { get; set; }         public string Section { get; set; }         public string Address { get; set; }     } }

After creating model add the table in your entity file(.edmx)

Now we will come to our controller end and add the below code in your controller.

using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using MVCDemo.Models; namespace MVCDemo.Controllers {     public class HomeController : Controller     {         //         // GET: /UserLogin/         public ActionResult Index()         {             StudentDetails _objuserloginmodel = new StudentDetails();             List<StudentDetail> _objStudent = new List<StudentDetail>();             _objStudent = GetStudentList();             _objuserloginmodel.Studentmodel = _objStudent;             return View(_objuserloginmodel);         }         public List<StudentDetail> GetStudentList()         {             List<StudentDetail> objStudent = new List<StudentDetail>();             /*Create instance of entity model*/             NorthwindEntities objentity = new NorthwindEntities();             /*Getting data from database for user validation*/             var _objuserdetail = (from data in objentity.Students                                   select data);             foreach (var item in _objuserdetail)             {                 objStudent.Add(new StudentDetail { Id = item.Id, Name = item.Name, Section = item.Section, Class = item.Class, Address = item.Address });             }             return objStudent;         }         } }

In above code I have first created instance for the entity class. After that we have used linq query to access the value from table. After that I have assign it to model. Now we have done at controller end. We will create view and add the below code in our view.

@model MVCDemo.Models.StudentDetails @{     ViewBag.Title = "How to Bind Data to Webgrid in ASP.net MVC Using C#.Net"; } <b>     Bind Data to Webgrid in ASP.net MVC</b> <style>     table, td, th     {         border: 1px solid green;         border-collapse:collapse;     }         th     {         border: 1px solid black;         background-color: green;         color: white;     } </style> @using (@Html.BeginForm("Index", "Home")) {     var grid = new WebGrid(Model.Studentmodel,canSort:false);     <div>         @grid.GetHtml(columns:                                 grid.Columns                                 (                                     grid.Column("ID", "Stud ID"),                                     grid.Column("Name", "Stud Name"),                                     grid.Column("Class", "Class"),                                     grid.Column("Section", "Section"),                                     grid.Column("Address", "Address")                                 ), mode: WebGridPagerModes.Numeric)     </div> }

In above code first we have assign the data source to webgrid and after that i have defied he columns names.

Now run the page to view the output