当用户单击主视图上的按钮时,如何显示其他部分视图？

Question

我想单击"主视图"上的按钮并自行填充局部视图.更新

我有一个主要观点:

 @{
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>

如果我把它们留下来,就像达林所说:

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

我被重定向到同一页面(我想要的),但不显示附加的局部视图.

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

Answer 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>