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>

Answer 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);
       }
    });
});

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

2 个答案: