34

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」は何をしますか？それらの間のスイッチですか？！簡単に理解していきたいと思います。

4

2 に答える 2

85

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

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

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

控えめなJavaScriptは異なります。これはjqueryに基づいています。Ajax.*ASP.NET MVC 3でなどのHTMLヘルパーの1つを使用すると、それらのヘルパーは対応するアンカーでAjax.ActionLinkHTML5属性も出力します。data-*これらの属性はjquery.unobtrusive-ajax.js、ページに含めてそれらのリンクをAJAX化する必要があるMicrosoftスクリプトによって解釈されます。したがって、たとえば、次のように記述します。

@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ファイルを作成し、属性に含まれるURLにAJAXリクエストを送信し、href属性の値に基づいて、data-ajax-mode一部のコンテナーのhtmlをIDに含まれるIDに置き換えることができます。data-ajax-update属性セレクター。そして、それはまさにそれがjquery.unobtrusive-ajax.js行うことです。それは別のファイルにあり、マークアップとjavascriptは独立しているだけですが、以前のバージョンではそうではありませんでした。

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

于 2011-03-06T08:22:36.910 に答える
0

このコードを使用して解決しました：

@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' });"
        }))

なしと同じ動作を追加するとAjax.BeginForm、javascript の動作が失われます。

私はそれをテストしましたMVC4

于 2015-02-18T14:00:23.553 に答える