当用户单击主视图上的按钮时，如何显示附加的局部视图？答案

【问题标题】：How do I display an additional partial view when a user clicks a button on the main view?当用户单击主视图上的按钮时，如何显示附加的局部视图？
【发布时间】：2012-09-21 15:14:30
【问题描述】：

我想单击“主视图”上的按钮并在其自己的 .更新了

我有一个主视图：

 @{
using (Ajax.BeginForm("PastClaims", "Claim", FormMethod.Post, new AjaxOptions { UpdateTargetId = "update_panel", InsertionMode = InsertionMode.Replace }, new { @class = "form-horizontal" }))
{
    <legend>Submit a Claim</legend>
    @Html.EditorForModel()
    <div class="controls">
        <input id="btnCheckForClaims" type="submit" class="btn btn-primary" value="Submit Claim" />
    </div>


    }

我需要单击提交按钮，然后显示另一个视图：如果我在下面这样做，那么在初始加载的页面上它会显示 div

 <div id="update_panel">@Html.Partial("PastClaims")</div>

如果我将 div 留空，那么我会得到一个新的局部视图。

  <div id="update_panel"></div>

如果我像 darrin 建议的那样让它们为空：

using (Ajax.BeginForm("PastClaims", "Claim", FormMethod.Post, new AjaxOptions { UpdateTargetId = "update_panel", InsertionMode = InsertionMode.Replace }, new { @class = "form-horizontal" }))

我被重定向到同一页面（我想要的），但未显示额外的部分视图。

感谢下面的 Darrin 让我走到这一步。

【问题讨论】：

标签： asp.net-mvc asp.net-mvc-3 razor

【解决方案1】：

在这种情况下，您可以使用Ajax.BeginForm：

@using (Ajax.BeginForm(null, null, new AjaxOptions { UpdateTargetId = "update_panel", InsertionMode = InsertionMode.Replace }, new { @class = "form-horizontal"}))
{
    @Html.EditorForModel()
    <div class="controls">
        <input id="btnOpenPartialView" type="submit" class="btn btn-primary" value="OpenPartialView" />
    </div>
}

<div id="update_panel">
    @Html.Partial("PartialView")
</div>

然后相应的控制器动作将返回部分视图：

[HttpPost]
public ActionResult SomeAction() 
{
    // some processing ...
    return PartialView("PartialView");
}

要让Ajax.* 助手工作，不要忘记包含jquery.unobtrusive-ajax.js 脚本：

<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>

【讨论】：

这三个空值是否应该是我的控制器和模型的名称以及其他名称。还是他们的目的是空的？
第一个是控制器动作，第二个是控制器名称，第三个是附加路由值。如果您将控制器和操作保留为空，那么它将使用与用于呈现视图的相同，除了使用 POST 动词。
当我使用它时，我被重定向到一个带有部分视图的新页面。我希望在显示部分视图的当前视图上添加一个 div。我是不是在某个地方漏掉了一步？
是的，你错过了最后一步：For Ajax.* helpers to work don't forget to include the jquery.unobtrusive-ajax.js script.
目前我的代码中有这个。我试图让“PartialView”出现在我的“MainView”页面上的新
标签中。上面的代码工作得很好，而不是将新按钮和消息添加到原始视图中，我得到了一个全新的页面

【解决方案2】：

@Html.Partial是服务器代码，如果你想在提交后加载部分，那么试试这个：

$("form").on('submit', function(event){
    event.preventDefault();
    var form = $(this);

    $.ajax({
       url: form.attr('action'),
       type: form.attr('method'),
       data: form.serialize(),
       success: function(r) {
           $('#update_panel').html(r);
       }
    });
});

【讨论】：