MVC WITH WEB GRID

File->New->Project

select : ASP.NET MVC 4- Application

AND CLICK ON OK

And select the project template and click on ok

Now Go to Solution Explorer

And again go to solution explorer and add new item 
and add ado.net entity frame work

And click on add

Click on New Connection.

Give the Details and Click on Ok Button.

Click on Finish.

And Go to Controller Folder and Right Click  AddController.

Write the following Code in Controller.


public class Default1Controller : Controller
    {
        EmployeeDatabaseEntities entities;
       
        public Default1Controller()
        {
            entities = new EmployeeDatabaseEntities ();
        }
        public ActionResult Index()
        {
            return View(entities.Employee2);
        }

        public ActionResult Delete(int id)
        {
            try
            {
                Employee2 obj = entities.Employee2.Find(id);
                if (obj == null)
                {
                    return HttpNotFound();
                }
                entities.Employee2.Remove(obj);
                entities.SaveChanges();
                return RedirectToAction("Index");
            }
            catch (Exception ex)
            {
                throw ex;
            }
        }
    }

And then Right Click on the Page and select    Add View

Write the following Code in Index.cs.html


@model IEnumerable<MvcApplication1.Employee2>
@{
    ViewBag.Title = "Index";
}
<style type="text/css">
    .webGrid { margin: 6px; border-collapse: collapse; width: 500px;  background-color:#B4CFC3;}
    .header { background-color: #C1D4E6; font-weight: bold; color: #FFF; }
    .webGrid th, .webGrid td { border: 1px solid #C0C0C0; padding: 5px; }
    .alt { background-color: # aqua; color: #000; }
    .gridHead a:hover {text-decoration:underline;}
    .description { width:auto}
    .select{background-color: #71857C}
</style>
<h2>Index</h2>
<div>
    @{
    var grid = new WebGrid(Model, canPage: true, rowsPerPage: 5, 
    selectionFieldName: "selectedRow",ajaxUpdateContainerId: "gridContent");
        grid.Pager(WebGridPagerModes.NextPrevious);}
    @grid.GetHtml(tableStyle: "webGrid",
            headerStyle: "header",
            alternatingRowStyle: "alt",
            selectedRowStyle: "select",
            columns: grid.Columns(
            grid.Column("EmpID"),
            grid.Column("FirstName", "FirstName", style: "description"),
            grid.Column("", header:"Delete",format: @<text>@Html.ActionLink("Delete", "Delete", "Default1", new { id = item.EmpID},null)</text>)
            ))

</div>

Output:

Other Sample:(using html attributes)

   @{
        var grid = new WebGrid(source: Model,canPage:true,canSort:true,rowsPerPage:10);
        grid.Pager(WebGridPagerModes.NextPrevious);
        @grid.GetHtml(htmlAttributes: new { id = "DataTable" },tableStyle: "table", headerStyle: "header", footerStyle: "grid-footer",columns: grid.Columns(
        grid.Column("UserID"),
        grid.Column("UserName"),
        grid.Column("Password"),
        grid.Column("RoleID","Role"),
        grid.Column("", header: "Edit", format: @<text>@Html.ActionLink("Edit", "Edit", "User", new { id = item.UserID}, new { target = "_blank" })</text>),
        grid.Column("",header:"Delete",format:@<text>@Html.ActionLink("Delete","Delete","Login",new{id=item.UserID},new{target="_blank"})</text>)));

        }