Почему установка UnobtrusiveJavaScriptEnabled = true препятствует работе ajax? - PullRequest
Новая
       24

Почему установка UnobtrusiveJavaScriptEnabled = true препятствует работе ajax?

32 голосов
/ 06 марта 2011

Делая пример с использованием бритвы 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>

Ни один из моих вызовов ajax не работал, пока я не изменил этот ключ в web.config: 

<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"?Это переключение между ними ?!Я надеюсь понять больше об этом в простых терминах.

Ответы [ 2 ]

81 голосов
/ 06 марта 2011

В ASP.NET MVC 3 есть 2 вещи: проверка на стороне клиента и ненавязчивый JavaScript, которые управляются их соответствующими значениями в web.config: 

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

Проверка на стороне клиента основана на плагине jquery.validate.js вместе со скриптом jquery.validate.unobtrusive.js от Microsoft. Когда вы включаете эти два сценария в представление, которое содержит HTML-форму, проверка на стороне клиента будет выполняться на основе правил аннотации данных, определенных вами в вашей модели. Когда вы посмотрите на сгенерированный исходный код HTML представления, вы заметите, что поля ввода имеют атрибуты HTML5 data-*, которые содержат правила проверки. Затем ненавязчивый сценарий проверки Microsoft прочитает эти правила и настроит подключаемый модуль проверки jquery.

Ненавязчивый JavaScript отличается. Он основан на jquery. При использовании одного из Ajax.* помощников HTML, таких как Ajax.ActionLink, в ASP.NET MVC 3 эти помощники также генерируют атрибуты 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. Таким образом, у вас может быть отдельный файл javascript, в котором вы подписываетесь на событие click этой ссылки, отправляете запрос AJAX на URL-адрес, содержащийся в атрибуте href, а затем на основе значения атрибута data-ajax-mode заменяете HTML-код некоторого контейнера с идентификатором, содержащимся в селекторе атрибута data-ajax-update. И это именно то, что делает jquery.unobtrusive-ajax.js. Просто он находится в отдельном файле, и ваша разметка и javascript независимы, чего не было в предыдущих версиях.

Таким образом, в отличие от ASP.NET MVC 1 и 2, в ASP.NET MVC 3 jQuery является фреймворком javascript по умолчанию, и на нем основаны HTML-помощники. Все скрипты MicrosoftAjax* больше не используются.

0 голосов
/ 18 февраля 2015

Я решил, что с помощью этого кода: 

@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

...