MVC Post表单使用Ajax(从部分视图)，但没有任何重定向(保持在相同的主视图页面)

Question

我是新的MVC，需要帮助。我有一个主视图(index.vbhtml)，这个页面被成功呈现。我有一个部分视图(test.vbhtml)，这个部分视图被添加到索引。VBHTML动态使用jquery get方法获取事件的发生。

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

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

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

我试过html提交按钮和Ajax。ActionLink用于此目的。但它们都重定向到partialview url。即localhost/test内的动作方法，我已经尝试返回与PartialView, View, RedirectToAction, Json，但没有成功。它们都重定向到一个新的url。

下面是controller

的代码

<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

任何帮助都是伟大的行为。我完全被困在这里了。

Answer 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()语句，以便按照您的需要生成测试部分视图。

Answer 2

我已经想出了一个处理这件事的方法。当我需要获取和渲染局部视图的事件发生时。我之前使用了$.Get()，我用

代替了它

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

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