如何在单击按钮时加载局部视图？

Question

我有一种情况，我正在使用Ajax.ActionLink（）调用并在父视图中加载子视图。 我在子视图上有一个按钮，可以调用另一个子视图。 我希望该子视图也显示在父视图上。

如果我使用Ajax.ActionLink，则可以将子视图加载到调用子视图中，看起来好像在父视图中，这很好，但是该按钮为我提供了更多好处，包括在beginform中发送内容以及在提交之前检查字段。

当用户单击按钮时，它将发送来自两个下拉列表的选定数据以及BeginForm中的其他数据，例如：

  @using (Html.BeginForm("Action", "Controller", new { courseID = 1001 }, FormMethod.Post, new { @id = "formName", @name = "formName" }))

但是，当视图返回时，它将在新窗口中打开，而不是在调用它的父视图或子视图中。

如何使局部视图显示在调用它的子视图或父视图上。 意思是父母给孩子A打电话，孩子A给孩子B打电话。

Answer 1

原因＃2,343,657为什么我鄙视Ajax.*家庭佣工。 它们隐藏了功能，以便当某些功能无法按预期工作时，您不知道为什么。 编写自己的AJAX； 你永远不会后悔。

无论如何，这里的问题是Ajax.ActionLink将JavaScript写入页面，从而为您连接所有这些功能。 您没有写过JavaScript（显然甚至都不知道它在那里），但是它仍然在那里。

现在，您已经切换到使用Html.BeginForm ，该JavaScript已经消失了，只剩下标准的HTML表单，这导致在提交时重新加载页面。 如果您想要相同的功能，则可以改用Ajax.BeginForm 。 但是，在开始执行此操作之前，请趁此机会改进代码并自己编写JavaScript。 然后，事情非常明确，您（或其他开发人员）就不必怀疑它是如何工作的，因为它就在那里 。

您需要做的就是将处理程序附加到表单的Submit事件，序列化表单，然后将其发布到AJAX上，然后对响应进行一些处理。 在本示例中，我将使用jQuery，因为1）AJAX是其中一种，您应该使用某种框架来避免一堆重复的样板代码，以及2）由于默认情况下MVC项目随附该框架，您已经必须有机会使用它。

$(document).ready(function () {
    $('#YourForm').on('submit', function (e) {
        e.preventDefault();
        $.post('/url/to/post/to', $(this).serializeArray(), function (result) {
            // do something with `result`
            // For example, if `result` is a string of HTML, you can just
            // write it out to some element:
            $('#ResultDiv').html(result);
        });
    });
});