web-dev-qa-db-ja.com

MVC4 Ajax.BeginFormがUpdateTargetIdを置き換えない

SOには、Ajax.BeginFormが戻り部分ビューでターゲット要素を正しく更新しない問題に関するトピックがたくさんあります。
同じページを更新するmvc4 ajax
ASP.NET MVC 4-Ajax.BeginFormおよびhtml5
MVC 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-属性を設定しています。

c#ajaxasp.net-mvc-4ajax.beginformrazor-2
14
drovani

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

13
Gabriel Monteiro Nepomuceno

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

<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
5
Cyrus

私はこの問題を抱えていました、私はNuGetから最新の邪魔にならないパッケージをインストールして問題を解決しました

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

JQ 1.8+が必要になります

2
Andy

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

1
MattSull

うわー、ここにはたくさんの答えがあります。私の問題は、bootstrapパネルによるものでした。「ネストされた」パネルを作成していました。パネルのマークアップを削除し、プレーンな古い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>
1
Jess

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

@section Script {
    @Scripts.Render("~/bundles/jqueryval")
}
1
user3015361

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

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

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

@Html.DisplayFor(m => m.Name)
@Model.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);
    }
1
xr280xr

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

0
Steven.Qiu

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

ModelState.Clear();

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

0
Jason Turnage

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

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                "~/Scripts/jquery-{version}.js",
                "~/Scripts/jquery.unobtrusive*));
0
Radha Anil K

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

これをパッケージマネージャーコンソールに入力しますPM> Install-Package jQuery.Migrate

これをあなたのpartialviewで参照してください：

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

みんなでコーディングを楽しんでください。

0
cyclical

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

0
Madhusudhan V Indian