我有一个Razor页面,其中包含一个表和部分视图,其中source作为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>
}
这是局部视图(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>
在应用程序控制器中,我们为部分视图分配了一些值
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);
}
这很好用,我可以看到带有元素的网格
网格元素可以按名称排序(因为我们有defaultsort:Name) 但是当我们点击名称时,整个页面都会被刷新(调用公共ActionResult RatesAndCharges()) 因此,我需要一种方法来对网格中的元素进行排序,而无需刷新页面。
答案 0 :(得分:0)
你必须使用JQuery或其他东西向服务器发出一个AJAX请求......我不知道WebGrid是否支持这个。但是你总是可以通过使用JQuery调用一个动作方法来自己完成它,它返回一个局部视图,然后你将旧的HTML换成新的。