[英]MVC partial page update
我有一个MVC项目,我有一个表单,其中包含用户可以输入和保存的字段。 在同一页面上,我有一个表格,其中显示了用户刚刚保存的信息的简要列表。 我遇到的问题是尝试在保存而不是整个页面刷新后仅更新表。
这在jquery或MVC中是否可行? 如果是这样,任何人都有一个例子。
以下是控制器中的操作:
public ActionResult RefreshList()
{
string _employeeID = Request.QueryString["empIDSearch"];
this.ViewData["coursehistorylist"] = _service.ListCoursesByEmpID(_employeeID);
return View("CourseHistoryList");
}
视图中的函数:(这是我对如何只更新表格感到困惑的地方)
$.ajax({
url: "/Home/RefreshList",
type: "POST",
success: function(result) {
alert("got here");
},
error: function(xhr, ajaxOptions, thrownError) {
alert(xhr.status + " " + thrownError + " " + ajaxOptions);
}
});
从控制器抓取ViewData:
<% foreach (var item in
(IEnumerable<EdMVC.Models.tblEdCourse>)ViewData["coursehistorylist"])
{
%>
谢谢。
注意:当我写这个MVC时只是版本1,虽然现在大部分相关,但是这篇文章的某些部分不适用于MVC的更高版本。
这是NickLarsen的答案的更深入版本,遗憾的是我在评论中用尽了空间,因此将其添加为答案。
这应该是一个“GET”请求,因为您没有在此请求中向服务器发送任何数据。 当你使用$ .ajax请求时,jQuery实际上会自行解决这个问题,所以你可以把它留在下面。 明确需要“POST”操作时,请务必进行区分。
在您在此处进行的ajax调用中,结果变量是从服务器返回的字符串,可以查看和应用。 如果您希望也可以将其转换为jQuery对象并对其进行过滤,但这超出了此问题的范围。
您的$ .ajax代码需要更新为以下内容:
$.ajax({
url: '/Home/RefreshList',
success: function(result) {
alert('Received: ' + result);
$('#myDivId').html(result);//This is the line you need
},
error: function(xhr, ajaxOptions, thrownError) {
alert(xhr.status + " " + thrownError + " " + ajaxOptions);
}
});
如果服务器响应正确,上面的代码会将结果插入到id为“myDivId”的元素中。
该div需要具有以下id属性,但div和其他属性的内容无关紧要。
<div id="myDivId"></div>
只要您的url指向的控制器操作返回一个值,上面的示例就会完全自行运行。
以下内容完全是为了让您的MVC生活更轻松,即使它与评论中不适合的问题并不相关,值得一提。
要减少名称空间声明,请将名称空间添加到web.config文件中,在<pages><namespaces>
节点下,添加以下内容: <add namespace="EdMVC.Models"/>
您还应该与其他任何名称一起使用您需要定期访问的命名空间,因为这样您可以从视图中轻松访问其对象。
此外,在这种情况下,您可能应该通过视图的“模型”值将数据发送到视图(如果可能的话),而不是在使用时始终需要返回的ViewData字典。
要做到这一点,请改变您的回报:
this.ViewData["coursehistorylist"] = _service.ListCoursesByEmpID(_employeeID);
return View("CourseHistoryList");
至:
return View("CourseHistoryList", _service.ListCoursesByEmpID(_employeeID))
从这里开始,您需要创建一个强类型视图,以便将视图顶部的inherits属性替换为:
Inherits="System.Web.Mvc.ViewPage<IEnumerable<tblEdCourse>>")
通过这些步骤,您现在可以将其作为强类型对象访问,如下所示:
foreach(tblEdCourse item in Model)
{
}
或者如果它是单个对象,只需<%= Model.Id %>
这应该可以让你减少你的演员并从长远来看节省大量的时间,如果上述任何一点没有意义或难以理解让我知道,我会重新说出来。
您缺少的唯一步骤是使用success函数中返回的新数据替换现有表。
有关更多信息,您应该使用具有id的div将调用包装到操作视图中的局部视图。 然后在success方法中调用该div上的.html(newData)
函数。
您可以通过简单地使用更新面板在Web表单中执行此操作。
然而...
MVC是一种理想的方法,因为它消除了Web应用程序的表示层与处理用户交互的实际代码之间的紧密耦合。 但是,如果您投资于webforms解决方案,仍然可以实现jquery ...
JQuery是一个JavaScript库,允许您“查询”网页的DOM以访问该页面中的不同元素。 它还具有用于对服务器执行异步请求的便捷功能。
在Web表单中,您可以构建Web服务以保存用户输入并返回新表行以执行部分更新。 您还需要了解如何从Web服务返回JSON,以便在JavaScript中轻松处理。
以下是一些有用的链接:
从.NET Web服务返回JSON: http : //blog.davebouwman.com/index.php/2008/09/posting-data-to-aspnet-json-services-with-dojo/
使用JQuery使用.NET Web服务: http : //encosia.com/2008/03/27/using-jquery-to-consume-aspnet-json-web-services/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.