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

Ответ 1

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

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

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

Ненавязчивый javascript отличается. Он основан на jquery. Когда вы используете один из Ajax.* HTML-помощников, например Ajax.ActionLink, в ASP.NET MVC 3, эти помощники также генерируют атрибуты HTML5 data-* на соответствующем якоре. Затем эти атрибуты интерпретируются Microsoft jquery.unobtrusive-ajax.js script, которые вам необходимо включить в свою страницу, и 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* больше не используются.

Ответ 2

Я решил, что используя этот код:

@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