Partial Page in ASP.NET MVC

How to use the partial pages in ASP.NET MVC

I was working on a ASP.NET MVC project where requirement was to create dashboard for the user and display the request based on their status in different tables. Initially, I thought to create tables using JavaScript frameworks. But there was another side of story, requirement was to add the CRUD operations on each record. I am not saying that this is not achievable in JavaScript but I was looking for the simple solution.

I explore multiple options and found that partial page implementation is the right solution of my problem. I followed below steps to implement the partial page functionality for my requirement. If you think you have a different/simple approach feel free to leave your suggestion in the comment section down below.

Step 1. Form Layout

<div class="form-horizontal">

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

        <h4>My Draft SOW</h4>

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

    </div>

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

        <h4>Pending SOW</h4>

        <div id="pendingSow"></div>

    </div>

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

        <h4>Approved SOW</h4>

        <div id="approvedSow"></div>

    </div>

</div>

Step 2. JavaScript code to render the partial page

$(document).ready(function () {

       //Draft

       //debugger;

       $.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) { }

       });

       //Pending

       $.ajax({

           type: "GET",

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

           data: { "typeOfSOW": "Pending" },

           datatype: "json",

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

           success: function (result) {

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

           },

           error: function (data) { }

       });

       //Approved

       $.ajax({

           type: "GET",

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

           data: { "typeOfSOW": "Approved" },

           datatype: "json",

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

           success: function (result) {

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

           },

           error: function (data) { }

       });

   });

Step 3. Action method 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")

           {

               objsow = new SOWDisplay() { SOWId = "3", ProjectName = "Prj1", CurrencyName = "GBP", Location = "Onsite", SOWStartDate = "01/01/2018", SOWEndDate = "12/31/2018" };

               lstSowDisplay.Add(objsow);

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

               lstSowDisplay.Add(objsow);

               return PartialView("_Draft", lstSowDisplay);

           }

           else

           {

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

               lstSowDisplay.Add(objsow);

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

               lstSowDisplay.Add(objsow);

               return PartialView("_Draft", lstSowDisplay);

           }

           

       }

Step 4. Partial Page

@model IEnumerableSOWDisplay>

@{

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

}

@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("Edit", "Create", new { sowId = item.SOWId }))

))

Step 5. Model

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; }

   }