Razor (using partial views) specific refresh - razor

Question

I have a Razor page which contains a table and partial view with source as a List //(Model.LeaveTypeList)
#using (Html.BeginForm())
{
<table>
#*Grid Added as Partial View for leave Types*#
<tr>
<td colspan="2">
<div>
#Html.Partial("LeaveTypesPartial", Model.LeaveTypeList)
</div>
</td>
</tr>
</table>
}
This is the partial view (LeaveTypesPartial.cshtml)
#model List<AscoraWeb.Models.LeaveTypeModel>
#{
Layout = null;
}
#{
//canSort:false,
var grid = new WebGrid(source: Model,
defaultSort: "Name",
rowsPerPage: 7);
}
<table>
<tr>
<td colspan="2" style="text-align: left; font-family: Arial Baltic; font-style: italic;font-size: 15px">
These leaves can be assigned to Employees in the Service Calender for scheduling
</td>
<td colspan="2" style="text-align: left; font-family: Arial Baltic; font-style: italic;font-size: 15px">
</td>
</tr>
#*Row with buttons*#
<tr>
<td align="right" colspan="1">
<input type="button"/>
<input type="button"/>
</td>
</tr>
<tr>
<td>
<div id="grid">
#grid.GetHtml(
tableStyle: "grid",
headerStyle: "head",
alternatingRowStyle: "alt",
columns: grid.Columns(
grid.Column("name")
)
)
</div>
</td>
</tr>
</table>
In the application controller we are assigning some value to the partial view
public ActionResult RatesAndCharges()
{
//Message that will appear before the content of the view is shown
ViewBag.Message = "This is the Rates and Charges section!";
//Adding content for the leave types grid
var ratesChargesModel = new RatesChargesModel { };
ratesChargesModel.LeaveTypeList = new List<LeaveTypeModel>();
var leaveTypeModel = new LeaveTypeModel { Name = "Paid Leave" };
ratesChargesModel.LeaveTypeList.Add(leaveTypeModel);
leaveTypeModel = new LeaveTypeModel { Name = "Unpaid Leave" };
ratesChargesModel.LeaveTypeList.Add(leaveTypeModel);
return View(ratesChargesModel);
}
This works fine and I am able to see my Grid with elements
The grid elements can be sorted by Name (as we have defaultsort: Name)
but when we click on name the whole page gets refreshed (call being made to public ActionResult RatesAndCharges())
Hence I need a way to sort my elements in the grid without having to refresh my page.

Answer 1

You would have to make an AJAX request to the server using JQuery or something else... I don't know that the WebGrid supports this or not. But you can always do it yourself by using JQuery to invoke an action method, which returns a partial view, and you swap the old HTML for the new.