包含多个表单的MVC局部视图不会更新UI

时间:2013-09-15 15:48:53

标签: c# asp.net-mvc asp.net-ajax

我有一个MVC应用程序。它具有部分视图,通过循环呈现多个表单。 这些是ajax表单,应该在提交时更新UI。问题是我可以进入控制器并正确地更改模型,但UI不会更新。

这是我的部分观点。你可以看到一个创建了许多ajax表单的循环......

@{
    Layout = string.Empty;
}
<div id="divTileHistory">
    @foreach (var t in Model.TileHistory)
    {              
        <article class="tile-prev">
            @using (Ajax.BeginForm("RemoveTileFromHistory", "Home", new { controller = "Home" }, new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "divTileHistory" }, new { }))
            { 
                <div class="tile-prev-inner">
                    <h1>
                        @t.Title</h1>
                    <p>
                        @t.Quote1</p>
                </div>

                <input type="hidden" name="archiveTileId" id="archiveTileId" value="@t.ArchiveTileId" />                   
                <input id="submit_@t.ArchiveTileId" type="submit" value="Delete" class="button primary small radius checkin" />                    
            }
        </article>
    }
</div>

部分视图在主页上呈现,如...

  <section class="user-prev-tiles row">
                <h3>
                    Tiles by @Model.User.SafeUserName</h3>
                @Html.Partial("ProfileArchiveTilesPartial", Model)
  </section>

我的控制器看起来像这样......

[Authorize]
public PartialViewResult RemoveTileFromHistory(string archiveTileId)
{
    UserModelActions u = new UserModelActions((User as CustomPrincipal).Id);
    u.DeleteTileFromHistory(int.Parse(archiveTileId));

    UserModel um = new UserModel((User as CustomPrincipal).Id);
    return PartialView("ProfileArchiveTilesPatial", um);
}

还有另一个局部视图在页面上正确更新,因此我确信我包含了正确的脚本。我的控制器也会正确地提交表单。

我也认为我已正确设置'target div'。

有谁知道为什么这可能不起作用?

1 个答案:

答案 0 :(得分:0)

尝试在主视图中移动部分之外的divTileHistory div:

<section class="user-prev-tiles row">
    <h3>Tiles by @Model.User.SafeUserName</h3>
    <div id="divTileHistory">
        @Html.Partial("ProfileArchiveTilesPartial", Model)
    </div>
</section>

另外,请确保您传递到RemoveTileFromHistory视图的模型具有正确的TileHistory集合数。您可以使用Google Chrome浏览器的Network标签检查控制器操作返回的确切部分标记,并检查其是否正确。