Question

我有一个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"])
 {
%>

感谢。

Answer 1

注意：当我写这个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 %>

这应该可以让你减少你的演员并从长远来看节省大量的时间，如果上述任何一点没有意义或难以理解让我知道，我会重新说出来。

Answer 2

您唯一缺少的步骤是将现有表替换为成功函数中返回的新数据。

有关更多信息，您应该使用具有id的div将调用包装到操作视图中的局部视图。然后在成功方法中调用该div上的.html(newData)函数。

Answer 3

您可以通过简单地使用更新面板在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/

MVC部分页面更新

3 个答案:

完全不同的注释......