mvc partial view ajax update将局部视图作为页面返回

时间:2012-02-19 12:57:28

标签: ajax asp.net-mvc-3 partial-views partial-page-refresh

我有一个部分观点,即在向数据库添加项目时需要更新。

Index.cshtml:

@using (Ajax.BeginForm("Index", "WinEntry", new AjaxOptions { HttpMethod = "POST",      UpdateTargetId = "wingrid", InsertionMode = InsertionMode.Replace}))
{
    @Html.Partial("_winVenue")
    @Html.Partial("_singleWin")
}
<div id="wingrid">
    @Html.Partial("_wingrid")
</div>

_singleWin有提交按钮

控制器:

[HttpPost]
public ActionResult Index(Win win)
{
    win.dealerId = "1234567890";
    win.posterid = "chris";
    win.posttime = DateTime.Now;
    wem.addWin(win);
    IEnumerable<Win> w = wem.getVenueWins(win.venue,win.windate);
    return PartialView("_wingrid",w);
}

当控制器返回局部视图_wingrid时,它将其作为新页面返回,我正在寻找的行为就像是wingrid div中的更新面板。

任何帮助都将不胜感激。

1 个答案:

答案 0 :(得分:5)

由于AJAX表单中的UpdateTargetId = "wingrid"选项,您似乎已经这样做了。只需确保清除您在POST控制器操作中从模型状态修改的值。否则HTML帮助程序仍然可以使用旧值:

[HttpPost]
public ActionResult Index(Win win)
{
    ModelState.Remove("dealerId");
    win.dealerId = "1234567890";
    ModelState.Remove("posterid");
    win.posterid = "chris";
    ModelState.Remove("posttime");
    win.posttime = DateTime.Now;
    wem.addWin(win);
    IEnumerable<Win> w = wem.getVenueWins(win.venue,win.windate);
    return PartialView("_wingrid",w);
}

如果您希望jquery.unobtrusive-ajax.js帮助者工作,请不要忘记将Ajax.*脚本包含在您的网页中:

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