web-dev-qa-db-ja.com

UnobtrusiveJavaScriptEnabled = trueを設定すると、ajaxが機能しなくなるのはなぜですか？

MVC3かみそりを使用してサンプルを実行しているときに、私は書きました：

<p>
    Show me the time in:
    @Ajax.ActionLink("UTC", "GetTime", new { zone = "utc" }, new AjaxOptions { UpdateTargetId = "myResults" })
    @Ajax.ActionLink("BST", "GetTime", new { zone = "bst" }, new AjaxOptions { UpdateTargetId = "myResults" })
    @Ajax.ActionLink("MDT", "GetTime", new { zone = "mdt" }, new AjaxOptions { UpdateTargetId = "myResults" })
</p>
<div id="myResults" style="border: 2px dotted red; padding: .5em;">
    Results will appear here
</div>
<p>
    This page was generated at @DateTime.UtcNow.ToString("h:MM:ss tt") (UTC)
</p>

Web.configでこのキーを変更するまで、私のajax呼び出しは機能しませんでした。

<add key="UnobtrusiveJavaScriptEnabled" value="true"/>

私はこの記事を読みました： http://weblogs.asp.net/owscott/archive/2010/11/17/mvc-3-ajax-redirecting-instead-of-updating-div.aspx
しかし、クライアント側の検証は以前と同じように機能していません。

私の質問は：ajaxとクライアント側の検証の両方を同時に機能させるにはどうすればよいですか？ 「UnobtrusiveJavaScriptEnabled」は何をしますか？それらの間の切り替えですか？もっと簡単に理解したいと思います。

ajaxasp.net-mvcasp.net-mvc-3razorasp.net-mvc-ajax
32
Amr Elgarhy

ASP.NET MVC 3には、クライアント側の検証と控えめなJavaScriptの2つがあります。これらは、web.configの対応する値によって制御されます。

<add key="ClientValidationEnabled" value="true" /> 
<add key="UnobtrusiveJavaScriptEnabled" value="true" />

クライアント側の検証は、Microsoftのjquery.validate.jsスクリプトとともにjquery.validate.unobtrusive.jsプラグインに基づいています。 HTMLフォームを含むビュー内にこれらの2つのスクリプトを含めると、モデルで定義したデータ注釈ルールに基づいてクライアント側の検証が実行されます。ビューの生成されたHTMLソースコードを見ると、入力フィールドに検証ルールを含むHTML5 data-*属性があることがわかります。次に、Microsoftの控えめな検証スクリプトがそれらのルールを読み取り、jquery検証プラグインを構成します。

控えめなJavaScriptは異なります。それはjqueryに基づいています。 ASP.NET MVC 3でAjax.*などのAjax.ActionLink HTMLヘルパーの1つを使用すると、それらのヘルパーも対応するアンカーでHTML5 data-*属性を発行します。これらの属性は、Microsoft jquery.unobtrusive-ajax.jsスクリプトによって解釈され、ページに含めて、それらのリンクをAJAXifyする必要があります。だから例えばあなたが書くとき：

@Ajax.ActionLink("UTC", "GetTime", new { zone = "utc" }, new AjaxOptions { UpdateTargetId = "myResults" })

これにより、次のHTMLが生成されます。

<a data-ajax="true" data-ajax-mode="replace" data-ajax-update="#myResults" href="/Home/GetTime?zone=utc">UTC</a>

ご覧のとおり、AJAXリクエストの実行方法に関するすべての情報はDOMに含まれています。そのため、clickをサブスクライブする個別のJavaScriptファイルを作成できます。このリンクのイベント、AJAXリクエストをhref属性に含まれるURLに送信し、次にdata-ajax-mode属性の値に基づいて一部のHTMLを置き換えますdata-ajax-update属性セレクターに含まれているIDのコンテナー。そして、まさにjquery.unobtrusive-ajax.jsが行うことです。それは、それが別のファイルにあり、マークアップとJavaScriptが独立していることです。バージョン。

したがって、ASP.NET MVC 1および2とは異なり、ASP.NET MVC 3では、jQueryがデフォルトのJavaScriptフレームワークであり、HTMLヘルパーがそれに基づいています。すべてのMicrosoftAjax*スクリプトは使用されなくなりました。

81
Darin Dimitrov

私はこのコードを使用してそれを解決しました：

@using (Ajax.BeginForm("Index2","Home", 
    new AjaxOptions
        {
            UpdateTargetId = "result", 
            HttpMethod = "POST"
        }, 
    new
        {
            onclick = "Sys.Mvc.AsyncForm.handleClick(this, new Sys.UI.DomEvent(event));",
            onsubmit="Sys.Mvc.AsyncForm.handleSubmit(this, new Sys.UI.DomEvent(event), { insertionMode: Sys.Mvc.InsertionMode.replace, httpMethod: 'POST', updateTargetId: 'result' });"
        }))
{
    <input type="hidden" name="id" value='1'/>
    <input type="submit" value="OK" />
}

行を追加します。

new
        {
            onclick = "Sys.Mvc.AsyncForm.handleClick(this, new Sys.UI.DomEvent(event));",
            onsubmit="Sys.Mvc.AsyncForm.handleSubmit(this, new Sys.UI.DomEvent(event), { insertionMode: Sys.Mvc.InsertionMode.replace, httpMethod: 'POST', updateTargetId: 'result' });"
        }))

JavaScriptの動作を失うことなく、Ajax.BeginFormと同じ動作を追加しています。

MVC4でテストしました

0
MrMins