1

我正在使用 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>

这个 GET 到这个操作方法

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

这是 POSTd 回控制器罚款 -

[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包含表单的内容。

我哪里错了？

4

1 回答 1

2

您可以在部分表单中使用 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;
    }
}
于 2012-07-20T21:12:42.197 回答