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

I have a partial view that upon adding an item to the database needs to update.

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

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

The _singleWin has the submit button

_singleWin有提交按钮

The controller:

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

When the controller returns the partial view _wingrid it returns it as a new page and the behavior I am looking for is like an update panel inside the wingrid div.

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

Any help would be appreciated.

任何帮助,将不胜感激。

1 个解决方案

#1

You already seem to be doing this thanks to the UpdateTargetId = "wingrid" option in your AJAX form. Just make sure that you clear values that you modify in your POST controller action form the modelstate. Otherwise HTML helpers could still use the old values:

由于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);
}

Also don't forget to include the jquery.unobtrusive-ajax.js script to your page if you want your Ajax.* helpers to work:

如果您希望Ajax。*帮助程序工作,也不要忘记将jquery.unobtrusive-ajax.js脚本包含到您的页面中:

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