Пожарный пост на Ajax.BeginForm с JQuery - PullRequest
Новая
       26

Пожарный пост на Ajax.BeginForm с JQuery

0 голосов
/ 01 июля 2010

У меня есть эта форма 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 (вызванному кодом отправки формы) и второму полному обновлению страницы.

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

Когда я отлаживаю 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 в событии change первого выпадающего списка, но я все еще хочу использовать первый (самый чистый imo).

Любой совет?

S.

Ответы [ 2 ]

1 голос
/ 05 июля 2010

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

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

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

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

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

Я нашел этот метод благодаря следующему сообщению: Визуализация частичной формы в диалоге jQuery

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

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

0 голосов
/ 01 июля 2010

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

...