14

Ajax.BeginFormがリターンパーシャルビューでターゲット要素を正しく更新しない問題に関するSOに関するトピックは非常にたくさんあります：
mvc4ajaxが同じページを更新するASP.NETMVC4
-Ajax.BeginFormおよびhtml5MVC
4（かみそり）-コントローラーは部分ビューを返すが、ページ全体が更新されている
MVC 4 Ajaxはページ内のPartialViewを更新していません。
ただし、これらはすべて、jQuery ajaxを手動で書き出すか、不足しているjavascriptファイルを含めることで解決されます。

  @using (Ajax.BeginForm("PostcardDetails", new AjaxOptions()
  {
    InsertionMode = InsertionMode.Replace,
    UpdateTargetId = "details"
  }))
  {
    <div id="PostcardSearchResults">
      @{Html.RenderAction("PostcardSearchResults", Model);}
    </div>
  }
  <div id="details">
  </div>

関連するコントローラーコード：

[AcceptVerbs(HttpVerbs.Post | HttpVerbs.Get)]
public ActionResult PostcardSearchResults(PostcardSearchFilter filter)
{
        PostcardSearchResults model = new PostcardSearchResults(filter);
        return PartialView("_PostcardSearchResults", model);
}

私のレイアウトでは、これらのjQueryファイルを参照しています。さらに、ページが適切なパスを出力していること、および正しいファイルが検出されていることを確認しました。unobtrusive-ajax.min.jsとの順序を切り替えてみましたが、うまくいきませvalidate.min.jsんでした。

<script type="text/javascript" src="@Url.Content("~/Scripts/globalize.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery-1.9.1.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery-ui-1.10.0.custom.min.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery.validate.min.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")"></script>

さらに、私のWebサイトのルートweb.configとViewフォルダーのweb.configには、次のものが含まれています。

<add key="webpages:Version" value="2.0.0.0"/>
<add key="PreserveLoginUrl" value="true"/>
<add key="ClientValidationEnabled" value="true"/>
<add key="UnobtrusiveJavaScriptEnabled" value="true"/>

私は他にどこを見るべきか途方に暮れています。スローされるJavaScriptエラーはなく、コントローラーは適切にヒットされ、PartialViewResultを返します。HTMLのForm要素は、すべての正しいdata-属性を入力しています。

4

12 に答える 12

13

JQuery 1.9はlive（）メソッドをサポートしなくなったため、jquery.unobtrusive-ajax.minとJQuery1.9には問題があります。したがって、JQueryマイグレーションプラグインを使用し、JQueryマイグレーションjsを参照する必要があります。

于 2013-02-26T17:57:19.750 に答える
5

ajaxフォームを配置したページにunobtrusive-ajax.jsが含まれていることを確認してください。

<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
于 2014-11-09T16:20:10.253 に答える
2

この問題が発生しました。NuGetから最新の目立たないパッケージをインストールして問題を解決しました

PM>インストール-パッケージMicrosoft.jQuery.Unobtrusive.Ajax

JQ1.8+が必要になります

于 2014-04-27T20:42:46.130 に答える
2

他の誰かがこれに遭遇するかどうかはわかりませんが、私の場合は、更新されていないように見えました。ドロップダウンから編集したいアイテムを選択し、ボタンをクリックすると、AJAXが選択したアイテムの編集フォームをロードする簡単な編集フォームを作成していました。

初めて機能しましたが、ドロップダウンリストで選択を変更してボタンをクリックした後、サーバー側のコードが新しいアイテムをビューモデルに読み込んでいることを確認しても、フォームの値は変更されませんでした。そのため、Replaceが機能していないように見えました。jquery.unobtrisive-ajax.jsをステップ実行した後、ターゲット要素のコンテンツが、ビューに渡されたモデルと一致しなかった、すでに持っていたのと同じビューマークアップに置き換えられていることがわかりました。

その時、私は気づきました。それがModelState私を惹きつけていたのです。2回目にロードボタンをクリックすると、ドロップダウン選択だけでなく、入力した編集フォームも送信されました。編集フォームのすべての値がに追加されましたModelState（予想どおり）。次に、コントローラーコードは、送信されたビューモデル（モデルバインダーが編集フォーム値から作成したもの）を、選択したドロップダウン値のビューモデルに置き換え、部分ビューに渡しました。ただし、部分ビューは一連のHtml.[X]Forヘルパーメソッドを使用します。これらは更新されたビューモデルを無視し、から直接値を取得しますModelState。例えば：

@Html.DisplayFor(m => m.Name)
@Model.Name

Nameに2つの異なる値を表示します。前者は送信された名前を表示し、後者は更新された名前を表示します。これは、（サーバー側の）検証エラーの後にMVCがユーザーのフォームエントリを記憶できるようにするメカニズムです。この場合、これは部分的なページの読み込みであり、送信されたすべての値を破棄するだけなので、ModelState値は必要ないため、更新されたビューを返す前にModelState.Clear（）を呼び出すだけです。モデルを表示します。

    public ActionResult GetItemEditForm(EditItemsViewModel editItemsVM)
    {
        if (editItemsVM.SelectedItemID != null)
        {
            //Load the selected item
            ItemsModelManager.GetEditItemsVM(editItemsVM);

            //Clear the submitted form values
            ModelState.Clear();
        }

        return PartialView("_ItemsEditor", editItemsVM);
    }
于 2015-09-23T21:47:06.463 に答える
1

私はあなたと同様の問題を抱えていました-私はすべてのスクリプトをバンドルして正しくロードし、すべてのコードを正しく実装しました。パッケージマネージャーをチェックして、スクリプトを更新する必要があるかどうかを確認しました。jQueryとjquery.unobtrusive-ajaxは更新しました。jQueryは1.9から1.9.1になりました。ソリューションを再構築すると、ターゲットDIVが正常に更新されました。ソリューション内のすべてのJSを更新してみてください。機能する可能性があります。

于 2013-03-03T15:33:42.613 に答える
1

以下は、ajaxを使用するすべてのページにある必要があります。

@section Script {
    @Scripts.Render("~/bundles/jqueryval")
}
于 2013-11-20T23:20:26.470 に答える
1

うわー、ここにはたくさんの答えがあります。私の問題は、ブートストラップパネルが原因でした。それは「ネストされた」パネルを作成していました。パネルマークアップを削除し、単純な古いdivを使用しただけで、機能しました。UpdateTargetIdはAJAXフォームの直接の親である必要があると思います。

これが問題を説明するhtmlです。

<div class="panel panel-default" id="notes-form">
  <div class="panel-body">
    @using (Ajax.BeginForm("EditNote", new { id = Model.Id }, new AjaxOptions { UpdateTargetId = "notes-form" }, htmlAttributes: new { @class = "form-horizontal" }))
    {
    }
  </div>
</div>
于 2016-08-12T19:07:54.017 に答える
0

もう少し説明が必要な人のために....

Package Manager Console PM>Install-PackagejQuery.Migrateにこれを入力します

パーシャルビューでこれを参照してください。

スクリプトsrc="〜/ Scripts / jquery.unobtrusive-ajax.js">

みんなハッピーコーディング。

于 2015-03-04T21:33:06.613 に答える
0

含めるためのユーザーxr280xrの回答

ModelState.Clear();

私のために働いた。私が使用しているアプリは古いjQ（1.7.x）であるため、この状況ではmigrateは機能しません。コントローラでモデルの状態をクリアすると、BeginFormで期待したとおりの結果が得られました。

于 2015-11-10T20:13:12.053 に答える
0

このjsに関するリファレンスを追加しない場合は、jquery.unobtrusive-ajax.jsに関するマスターページまたはページのスクリプトリファレンスを確認してください：jquery.unobtrusive-ajax.js

于 2016-01-13T06:18:08.250 に答える
0

live（）メソッドはjQueryバージョン1.7で非推奨になり、バージョン1.9で削除されました。代わりにon（）メソッドを使用してください。詳細については、http ：//www.w3schools.com/jquery/event_live.aspを参照してください。

于 2016-06-17T11:08:07.223 に答える
0

まず、NuGetManagerから「Microsoft.JQuery.Unobtrusive.Ajax」をインストールし、後で「 jquery- {version} .js 」をインクルードした後、 「 BundleConfig」に「 〜/ Scripts/jquery.unobtrusive」をインクルードします。これは次のようになります。

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                "~/Scripts/jquery-{version}.js",
                "~/Scripts/jquery.unobtrusive*));
于 2016-12-22T07:25:59.193 に答える