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