Question

我正在玩jQuery UI和PartialViews，遇到了一个我无法安静的问题。

这个位按我的预期工作：

<div>
    @Ajax.ActionLink("Test Me!", "dialogtest", new { id = Model.Id }, new AjaxOptions { InsertionMode = InsertionMode.Replace, UpdateTargetId = "dialogtest-view" })</td>
</div>
<div id="dialogtest-view">
</div>

这就是采取这种行动方法

[HttpGet]
public PartialViewResult DialogTest(int id)
{
    //pretend to get something from DB here
    var vm = new DialogUITestVM();
    return PartialView("uidialog_partial", vm);
}

然后返回一个显示在目标div中的PartialView。 jQuery + jQueryUI用于将此div作为模态对话框弹出。测试的第1部分！

好的，现在让我们说返回的PartialView只是一个带文本框的基本表单，类似于：

@using (Html.BeginForm("DialogTest", "pages", FormMethod.Post))
{  
    @Html.HiddenFor(x => x.Id)
    @Html.TextBoxFor(x => x.Name)
    <button type="submit">Test Me!</button>
}

这将POST回控制器 -

[HttpPost]
public ActionResult DialogTest(DialogUITestVM vm)
{
    //arbitrary validation so I can test pass and fail)
    if (vm.Name.Equals("Rob"))
    {
        //error!
        vm.ErrorMessage = "There was an error you numpty. Sort it out.";
        return PartialView(vm);
    }

    //hooray it passed - go back to index
    return RedirectToAction("index");
}

然而 - 如果我使操作失败了验证，而不是再次将PartialView定位到div，它会重绘整个页面（这显然会丢失jQuery UI对话框）。

我想要的是：如果验证失败，只需更新包含表单的div。

我哪里错了？

Answer 1

您可以在部分而不是普通表单中使用Ajax表单，并在AjaxOptions中使用OnSuccess回调：

@using (Ajax.BeginForm("DialogTest", "pages", new AjaxOptions { UpdateTargetId = "dialogtest-view", OnSuccess = "success" }))
{  
    @Html.HiddenFor(x => x.Id)
    @Html.TextBoxFor(x => x.Name)
    <button type="submit">Test Me!</button>
}

然后分别修改控制器操作：

[HttpPost]
public ActionResult DialogTest(DialogUITestVM vm)
{
    //arbitrary validation so I can test pass and fail)
    if (vm.Name.Equals("Rob"))
    {
        //error!
        vm.ErrorMessage = "There was an error you numpty. Sort it out.";
        return PartialView(vm);
    }

    //hooray it passed - go back to index
    return Json(new { redirectUrl = Url.Action("Index") });
}

当然在javascript文件中定义相应的成功回调：

function success(result) {
    if (result.redirectUrl) {
        window.location.href = result.redirectUrl;
    }
}

将部分视图返回到Action的特定div

1 个答案: