Пожарная стойка на Ajax.BeginForm с JQuery

Question

У меня есть эта форма MVC с 2 раскрывающимся списком, где выбор в первом выпадающем списке должен обновлять второй через вызов AJAX.

форма выглядит следующим образом:

<%using (Ajax.BeginForm("GetChildren", "Home", null, new AjaxOptions { UpdateTargetId = "result" }, new Dictionary<string, object> { { "id", "someForm" } })) 
{ %> 
<%= Html.DropDownList("masterSelection", new SelectList((IList<Master>)ViewData["Master"], "MasterName", "MasterName"))%> 
<span id="result"> 
    <%Html.RenderPartial("ChildSelection");%> 
</span> 
<% } %> 

со следующим JQuery сценарием:

$(function() { 
    $("#masterSelection").change(function() { 
     $("#someForm").submit(); 
    }); 
}); 

Это приводит к следующей стороне клиента HTML

<form action="/Home/GetChildren" id="someForm" method="post" 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, updateTargetId: &#39;result&#39; });"> 

Если я получаю это право onsubmit должен позаботиться о вызове AJAX, а также предотвратить нормальное поведение формы (полное обновление).

Теперь все работает отлично в Firefox, но в IE кажется, что поведение по умолчанию не отменяется, что приводит к вызову AJAX (вызванному кодом onsubmit формы) и во-вторых полное обновление страницы.

Очевидно, что я не хочу.

Когда я отлаживаю код javascript onsubmit, он сводится к методу в файле MicrosoftAjax.js, который должен отменять поведение по умолчанию моей формы.

function Sys$UI$DomEvent$preventDefault() { 
    /// <summary locid="M:J#Sys.UI.DomEvent.preventDefault" /> 
    if (arguments.length !== 0) throw Error.parameterCount(); 
    if (this.rawEvent.preventDefault) { 
     this.rawEvent.preventDefault(); 
    } 
    else if (window.event) { 
     this.rawEvent.returnValue = false; 
    } 
} 

При отладке с IE я получаю строку this.rawEvent.returnValue = false; который должен быть правильным для отмены события в IE, но, как ни странно, это не работает для меня.

Я уже разработал альтернативные решения, в которых я использую jQuery для запуска AJAX-вызова и создания новой выпадающей панели на стороне клиента или другой, где я добавляю невидимую кнопку в форму, чтобы вызвать событие click в изменении событие первого раскрывающегося списка, но я все еще хочу использовать первый (самый чистый imo).

Любые советы?

S.

Answer 1

Я сделал еще несколько поиска и я придумал следующее, который не так хорошо, как простой вызов $("#someForm").submit(); но я предпочитаю более строить DropDownList на стороне клиента после вызова AJAX или вызова клика по скрытой кнопке.

Я удалил Ajax.BeginForm со страницы.

<%= Html.DropDownList("masterSelection", new SelectList((IList<Master>)ViewData["Master"], "MasterName", "MasterName"))%> 
<span id="result"> 
    <%Html.RenderPartial("ChildSelection");%> 
</span> 

И использовать метод JQuery нагрузки, чтобы изменить содержание моего второго DropDownList

$(function() { 
     $("#masterSelection").change(function() { 
      $('#result').load("Home/GetChildren", { masterSelection: this.value }); 
     }); 
    }); 

Я нашел этот метод благодаря следующему сообщению: Render partial form in jQuery dialog

Это работает как для IE и FF для меня.

Мне все еще хотелось бы знать, почему мой первый код не работает в IE.

Answer 2

У вас возникли проблемы с этим? Можете ли вы установить alert() в окне. Возьмите, действительно ли IE называет его? Кроме того, вы можете просто попробовать return false(); вместо this.rawEvent.returnValue = false;