这是我在页面元素上更新一些信息的做法:
在我的 Practices.ascx 视图中,我有一个需要更新实践的 div。
<div style=" width:20%; float:right; background-color:inherit" >
(Last Seen: <span id="<%: practice.ID %>LastSeenPractice" class="LastSeenPractice" >Loading...</span>)
</div>
同时,在 Practices.ascx 文件的脚本部分,使用 jQuery 每 10 分钟更新一次实践:
function UpdatePractice() {
jQuery.post("/reporter/LastSeenPractice", $.param({ practiceID: pid, doctorIDs: DoctorIDs }, true), UpdateLastSeenPractice, "json");
}
setInterval(UpdatePractice, 1000*60*10)
在你的控制器中,创建一个函数来接收jQuery调用:
[HttpPost]
public JsonResult LastSeenPractice(string practiceID, List<String> doctorIDs)
{
... process query ...
return Json(new { pid = practiceID, LastSeenPractice = lastSeenPractice, LastSeenDoctor = lastSeenDoctor });
}
最后,在您的JScript中,创建一个回调函数来处理JSON结果。
function UpdateLastSeenPractice(data) {
$("#" + data.pid + " .LastSeenPractice").html(data.LastSeenPractice);
for (var key in data.LastSeenDoctor) {
$("#" + key + " .LastSeenDoctor").html(data.LastSeenDoctor[key]);
}
};
这应该是使用jQuery进行Ajax调用的基本流程
更新:
忘记了问题中的部分视图。我使用嵌套部分视图来降低已经复杂语法的复杂度。每个实践都在自己的视图下,而index.ascx循环遍历所有实践并在一个treenode中创建一个部分视图并传递一个参数(不幸的是你只能传递一个参数,所以我把部分视图所需的所有设置都放在一个字典里,因此PracticesDict:
<div id="bodyPracticesList" style="float:left; width:100%">
<% Html.RenderPartial("Practices", Model.PracticesDict); %>
</div>
我的所有脚本都在index.aspx中,而html则在practices.ascx中,所以你可以像Max建议的那样,将你的三个表单放在部分视图中来拆分它们。