Web Grid in ASP.NET MVC

I was working on the requirement where data needs to be presented on the page with option available to view, update, delete each row. I am very new in ASP.NET MVC and looking for the control like GridView that I commonly use in ASP.NET Web Form. I did some finding and came to know that GridView functionality can achieved by the Web Grid.

Let’s get started to learn Web Grid together. If you think that he way I choose can be more refine, feel free to give you suggestion in comment box given below.

In this example I will add the Web Grid on partial view and show that partial page on different pages.

Step 1. Define a model – First thing first, define a contract and add properties to it.

   public class SOWDisplay

   {

       public string SOWId { get; set; }

       public string ProjectName { get; set; }

       public string CurrencyName { get; set; }

       public string Location { get; set; }

       public string SOWStartDate { get; set; }

       public string SOWEndDate { get; set; }

   }

Step 2. Create a partial view (_draft.cshtml)

@model IEnumerableSOWDisplay>

@{

   var draftGrid = new WebGrid(Model, canPage: true, rowsPerPage: 10, canSort: true, ajaxUpdateContainerId: "approveList");

}

@draftGrid.GetHtml(tableStyle: "table",

   headerStyle: "header",

   alternatingRowStyle: "alt",

   selectedRowStyle: "select",

   columns: draftGrid.Columns(draftGrid.Column("ProjectName", "Project Name"),

draftGrid.Column("CurrencyName", "Currency Name"),

draftGrid.Column("Location", "Location"),

draftGrid.Column("SOWStartDate", "Start Date"),

draftGrid.Column("SOWEndDate", "End Date"),

draftGrid.Column(columnName: "Action", format: (item) => Html.ActionLink("Add Numbers", "Create", new { sowId = item.SOWId })))

)

Step 3. Main View (xyz.cshtml)

   <div class="col-md-6">

       <h4>My Draft SOW</h4>

       <div id="draftSow"></div>

   </div>

Step 4. JavaScript code to call fill the Web Grid

       $.ajax({

           type: "GET",

           url: "@Url.Action("DisplaySow", "Home")",

           data:{"typeOfSOW":"Draft"},

           datatype: "json",

           contentType: "application/json; charset=utf-8",

           success: function (result) {

               $('#draftSow').html(result);

           },

           error: function (data) { }

       });

Step 5 – Define action in controller

[HttpGet]

       public ActionResult DisplaySow(string typeOfSOW)

       {

           //Set Status as Pending Approval

           //Models.SOW uObject = JsonConvert.DeserializeObject(objSOW.ToString());

           ListSOWDisplay> lstSowDisplay = new List<SOWDisplay>();

           Models.SOWDisplay objsow;

           if (typeOfSOW == "Draft")

           {

               objsow = new SOWDisplay() { SOWId = "1", ProjectName = "Test1", CurrencyName = "USD", Location = "Onsite", SOWStartDate = "01/01/2018", SOWEndDate = "12/31/2018" };

               lstSowDisplay.Add(objsow);

               objsow = new SOWDisplay() { SOWId = "2", ProjectName = "Test2", CurrencyName = "CAD", Location = "Offshore", SOWStartDate = "01/01/2018", SOWEndDate = "12/31/2018" };

               lstSowDisplay.Add(objsow);

               return PartialView("_Draft", lstSowDisplay);

           }

           else if (typeOfSOW == "Pending")

           {

               return PartialView("_Pending", lstSowDisplay);

           }

           else

           {

               

               return PartialView("_Approved", lstSowDisplay);

           }

           

       }

Output