Partial Page in ASP.NET MVC


This article will give you the high level of understanding about the partial page and webgrid. I was working on a requirement where I need to show the user request based on their status (Approved, Pending, ect...) in different tables.

The resource has not been reviewed by Editors yet. Readers are advised to use their best judgement before accessing this resource.
This resource will be reviewed shortly.
If you think this resource contain inappropriate content, please report to webmaster.
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
-


My Draft SOW





Pending SOW





Approved SOW





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

}


Comments

No responses found. Be the first to comment...


  • Do not include your name, "with regards" etc in the comment. Write detailed comment, relevant to the topic.
  • No HTML formatting and links to other web sites are allowed.
  • This is a strictly moderated site. Absolutely no spam allowed.
  • Name:
    Email: