使用 Ajax（从部分视图）但没有任何重定向的 MVC 发布表单（保留在同一主视图页面上）答案

【问题标题】：MVC Post Form using Ajax (from partial view) but without any redirect (remain on same main view page)使用 Ajax（从部分视图）但没有任何重定向的 MVC 发布表单（保留在同一主视图页面上）
【发布时间】：2014-08-27 15:45:30
【问题描述】：

我是 MVC 新手，需要帮助。我有一个主视图（index.vbhtml），并且该页面已成功呈现。我有一个局部视图（test.vbhtml），这个局部视图是在发生事件时使用 jquery get 方法动态添加到 index.vbhtml 中的。

$.get('@Url.Action("test", "abc")', function (data) {
                $('#partialViewRender').html(data);
            });

我能够成功渲染这个局部视图。我以这种方式添加局部视图，因为我有多个局部视图，它们将以类似的方式呈现，例如在发生事件时。所有这些局部视图都将在同一个标签 partialViewRender 中呈现，一次只呈现一个。

在这些局部视图中，我需要形成帖子。就像在测试部分视图上单击提交按钮一样，表单发布发生并调用发布控制器操作。在action方法内部，根据下拉选择的值获取相关数据并需要显示给用户。这就是我卡住的地方。我不希望我的主视图被重定向，我想要与更新数据呈现的部分视图相同的主视图。换句话说，我希望在事件代码背后实现与经典 ASP 应用程序中类似的行为。

为此，我尝试了 html 提交按钮和 Ajax.ActionLink。但它们都重定向到部分视图 url。即 localhost/test 内部操作方法我尝试使用 PartialView、View、RedirectToAction、Json 返回但没有成功。他们都重定向到一个新的网址。

这是控制器的代码

<HttpGet>
    Function test() As ActionResult 'this is called on jquery get method

       'do some intializing data stuff
        Return PartialView("test")

    End Function

    <HttpPost>
    Function test(id As String) As ActionResult

        'fetch data on basis of id, this data needs to be shown in a grid

    End Function

任何帮助都是一件好事。我完全被困在这里。

【问题讨论】：

当测试部分视图中的表单被 POST 时，您是否试图避免重新加载整个页面？或者您是否对重新加载整个页面感到满意，只要结果页面是主视图，其中包含正确的部分视图？
我正在避免重新加载整页

标签： jquery asp.net-mvc asp.net-mvc-4

【解决方案1】：

您可以通过使用 AJAX 在部分中发布表单来维护主视图。表单的操作将是处理它的控制器操作的路由（在您的情况下将路由到test(id as String)）。您使用了$.get() 意味着您应该能够改用您已经必须执行$.post() 的代码。

您需要使用 jQuery 将事件处理程序附加到表单的提交事件。在该处理程序中，您可以选择表单的 action 属性作为 POST 的 URL，读取 POST 正文的表单元素值，并且您的回调可以与您已经使用的一样：

function (data) {
    $('#partialViewRender').html(data);
}

处理程序可以进行 POST，控制器 Action 可以返回部分视图，并且该内容将在页面加载时注入到 #partialViewRender 元素中。

替代方案将重点放在 VB 代码上。生成部分内容的原始调用必须指定从哪个主视图调用它，以便它可以在包含该信息的表单中创建一个隐藏字段。然后，从表单处理 POST 的 Action 需要读取该隐藏字段值以计算出要返回哪个主视图，以及如何编写动态 $.get() 语句以生成测试部分视图随心所欲。

【讨论】：

【解决方案2】：

我想出了一个办法来处理这件事。在我需要获取和渲染部分视图的事件发生时。我之前使用的是 $.Get() 替换为

@Ajax.ActionLink("Load Partial View", "test", "abc", New AjaxOptions() With {.UpdateTargetId = "partialViewRender", .InsertionMode = InsertionMode.Replace, .LoadingElementId = "progress"})

这将通过 jquery ajax 调用加载部分视图，并解决问题。但为了使其正常工作，我需要将包添加到脚本文件夹。添加 jquery.unobtrusive-ajax.js 和 jquery.unobtrusive-ajax.min.js 后，我能够实现我想要做的事情。

【讨论】：