MyContactBook : Part 3 - Create Home Page for Show Contact list in Webgrid

Steps :
Step - 1 : Add Entity Data Model.

Go to Solution Explorer > Right Click on Project name form Solution Explorer > Add > New item > Select Entity Data Model under data > Enter model name > Add.
A popup window will come (Entity Data Model Wizard) > Select Generate from database > Next >
Chose your data connection > select your database > next > Select tables > enter Model Namespace > Finish.

Step-2: Add a New Folder for Create our ViewModel here.

Right Click on Solution Explorer > Add > New Folder > Rename folder.

Here I have named the folder "ViewModel".

ViewModel is a class that contains the fields which are represented in the strongly-typed view. It is used to pass data from controller to strongly-typed view.

Step-3: Add a Class (ViewModel).

Right Click on Created Folder (here ViewModel folder) > Add > Class > Enter Class name > Add.

Step-4: Write the following code in the class.
            namespace MVCContactBook.ViewModel
                public class ContactModel
                    public int ContactID { get; set; }
                    public string FirstName { get; set; }
                    public string LastName { get; set; }
                    public string ContactNo1 { get; set; }
                    public string ContactNo2 { get; set; }
                    public string EmailID { get; set; }
                    public string Country { get; set; }
                    public string State { get; set; }
                    public string Address { get; set; }
                    public string ImagePath { get; set; }
Step-5: Write code in Index Action for Show Contact List in WebGrid.
Index Action
            using MVCContactBook.ViewModel;
            using System.Collections.Generic;
            using System.Linq;
            using System.Web.Mvc;

            namespace MVCContactBook.Controllers
                public class HomeController : Controller
                    public ActionResult Index()
                        List<ContactModel> contacts = new List<ContactModel>();
                        //here MyContactBookEntities is our datacontext
                        using (MyContactBookEntities dc = new MyContactBookEntities())
                            var v = (from a in dc.Contacts
                                     join b in dc.Countries on a.CountryID equals b.CountryID
                                     join c in dc.States on a.StateID equals c.StateID
                                     select new ContactModel
                                          ContactID = a.ContactID,
                                          FirstName = a.ContactPersonFname,
                                          LastName = a.ContactPersonLname,
                                          ContactNo1 = a.ContactNo1,
                                          ContactNo2 = a.ContactNo2,
                                          EmailID = a.EmailID,
                                          Country = b.CountryName,
                                          State = c.StateName,
                                          Address = a.Address,
                                          ImagePath = a.ImagePath
                            contacts = v;
                        return View(contacts);

Step-6: Write code in View of Index Action for Show Contact List in WebGrid.
Index Action
            @model IEnumerable<MVCContactBook.ViewModel.ContactModel>
                ViewBag.Title = "Contact List";
                var grid = new WebGrid(source: Model, canPage: true, canSort: true, rowsPerPage: 10);

            <h3>Contact List</h3>
            <div style="overflow:auto">

                    tableStyle: "table table-responsive",
                            grid.Column("FirstName", "First Name"),
                            grid.Column("LastName", "Last Name"),
                            grid.Column("ContactNo1", "Contact No1"),
                            grid.Column("ContactNo2", "Contact No2"),
                            grid.Column("EmailID","Email ID"),
                            grid.Column(header:"Image", format:@<text>@Html.Raw((item.ImagePath == null? "":"<img width='100' alt='' src='/image/"+item.ImagePath+"'"))</text>),
                            grid.Column(header:"View", format:(item)=> Html.ActionLink("View", "View","Home", new {id = item.ContactID}, null)),
                            grid.Column(header:"Edit", format:(item)=> Html.ActionLink("Edit", "Edit","Home", new {id = item.ContactID}, null)),
                            grid.Column(header:"Delete", format:(item)=> Html.ActionLink("Delete", "Delete","Home", new {id = item.ContactID}, null))
Step-7: Run Application.
MyContactBook : Part 3 - Create Home Page for Show Contact list in Webgrid
Posted By :