0

unobtrusive Ajax によってまだ Ajax 化されていないformすべての sを Ajax化するカスタム プラグインを作成しているときに、通常の Unobtrusive Ajax フォームでは部分/レイアウト コードがポストバックで表示されないことに気付きました。

私の他の部分更新プラグインでは、次のように条件付きでページを部分 (ajax リクエストの場合) またはレイアウト付きの完全 (通常のリクエストの場合) としてレンダリングします。

    public ActionResult AjaxForm()
    {
        if (!Request.IsAjaxRequest())
        {
            ViewBag.Layout = "_Layout.cshtml";
        }
        return PartialView();
    }

    [HttpPost]
    [ValidateAntiForgeryToken]
    public ActionResult AjaxForm(AjaxFormModel model)
    {
        if (!Request.IsAjaxRequest())
        {
            ViewBag.Layout = "_Layout.cshtml";
        }

        if (ModelState.IsValid)
        {
            return PartialView("Success", model);
        }

        return PartialView(model);
    }

通常の控えめな Ajax フォームをテストするときは、独自の要素だけを更新する次のテスト ビューを使用しましたUpdateTargetId="FormPanel"。

@using (Ajax.BeginForm("AjaxForm", null, new AjaxOptions() { UpdateTargetId = "FormPanel" }, new { id = "FormPanel" }))
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        <div class="form-group">
            @Html.LabelFor(model => model.Name, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.AddressLine, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.AddressLine, new { htmlAttributes = new { @class = "form-control" } })
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Create" class="btn btn-default" />
            </div>
        </div>
    </div>
}

test を削除し、if (!Request.IsAjaxRequest())マスターページ/レイアウトを含むページ全体を返すと、フォームがあった場所に結果が表示されます。

Fiddler は、どちらの場合も「成功」ビューが返されることを示していますが、レイアウトが存在しないと何もしません。

Q.控えめな Ajax がコンテンツを抽出し、指定された要素を置き換えるために必要なマスターページ/レイアウトは何ですか?

アップデート：

さらに悪いことに、実際には最初は正しく機能しますが、同じフォームを ajax で再度ロードすると機能しません。

4

1 に答える 1

0

A: フォームには一意の ID が必要です。

SO には一意の ID に関する問題がたくさんありますが、これは一般的にブラウザーが対処しますが、絶対に破ることができないのは、同じ ID で読み込まれた 2 つのフォームを持つことです。JavaScript/jQuery から見えるのは 1 つだけです!

私の問題は、重複したフォーム ID が原因でした。結果ページをフォーム自体に挿入しないでください(フォーム要素はそのままにしておきます)。

元のフォームをスライドショー スタイルのコントロールで動的にリロードすると、フォーム ID が重複してしまいました。

これは、目立たない Ajax が DOM の最初のフォームしか認識できないことを意味していました。

解決策 (Ajax フォームを自分自身を更新するように設定しないでください):

UpdateTargetIdパネルを動的にロードする場合は、フォーム自体ではなく、フォームの上の要素に設定します。

サンプル ビュー (ターゲット パネルでフォームを囲む) を修正します。

<div id="FormPanel">
    @using (Ajax.BeginForm("AjaxForm", new AjaxOptions() { UpdateTargetId = "FormPanel" }))
于 2014-06-18T14:37:12.790 に答える