1

私はjQueryUIと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>
}

これは、コントローラーに正常に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、フォームを含むを更新するだけです。

どこが間違っているのですか？

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 に答える