MVC 2.0 Ajax: автоматическая отправка в выпадающем списке вызывает нормальную обратную передачу - PullRequest
Новая
       7

MVC 2.0 Ajax: автоматическая отправка в выпадающем списке вызывает нормальную обратную передачу

2 голосов
/ 26 января 2011

Я пытаюсь добавить функциональность Ajax в мое приложение MVC.Я хочу, чтобы форма отправлялась обратно асинхронно.Вот код формы: 

using (Ajax.BeginForm("SetInterviewee", "Date", routeValues, new AjaxOptions { UpdateTargetId = "divInterviewee" }))

, и я хочу, чтобы он автоматически отправлял сообщения при изменении выбранного значения в раскрывающемся списке: 

<%= Html.DropDownList("interviewees", Model.interviewees.intervieweeLists.intervieweesList, "-- select employee --", new { @class = "ddltext", style = "width: 200px", onchange = "this.form.submit();" })%>

Однако, когда я пытаюсь это сделать, программа публикуетвернулся нормально, не частичный постбэк, как я ожидал.Вот что я думаю, проблема в следующем: onchange = "this.form.submit ();"в раскрывающемся списке.

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

Вот что MVC генерирует для HTML для тега формы: 

<form action="/SetInterviewee/2011-1-26/2011-1/visit" 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;divInterviewee&#39; });">

Я думаю, что с помощью this.form.submit () обработчик события onsubmit не вызывается.Дело в том, что я не понимаю почему.Разве «onsubmit» не перехватит какое-либо событие, отправляющее форму?

ОБНОВЛЕНИЕ: Я перешел на jquery, таким образом: 

        $(function () {
        $('#interviewees').change(function () {
            var form = $('#intervieweeForm');
            $.ajax({
                url: form.attr('action'),
                type: form.attr('method'),
                data: form.serialize(),
                success: function (result) {
                    $('#selectedInterviewee').val(result);
                }
            });
        });
    });

Это вызывает много проблем, среди них:

- По-видимому, он все еще не выполняет асинхронный постбэк.В моем методе действия контроллера у меня есть следующий код: «if (Request.IsAjaxRequest ())», который возвращает false.

- Кажется, я больше не могу делать привязку модели.Мой маршрут выглядит так:

http://localhost:1986/Interviews/2011-2-25/2011-2/visit

, но маршрут, который, по-видимому, заканчивается отправкой, является 

http://localhost:1986/SetInterviewee/2011-2-25/2011-2?
Count=5&Keys=System.Collections.Generic.Dictionary`2+KeyCollection
[System.String,System.Object]
&Values=System.Collections.Generic.Dictionary`2+ValueCollection
[System.String,System.Object]

, в результате чего привязка модели не работает - "визит"предполагается, что это параметр" mode ", но его там нет, поэтому по умолчанию для" mode "устанавливается значение" phone ", которое расстраивает всю яблочную тележку.

Это вызывает команда serialize?Я не понимаю, почему он добавил бы его в строку запроса, когда метод POST.

Есть и другие вещи - среди них тот факт, что мое действие должно возвращать ViewResult, так как я могу простоверните строку, и это все, что мне нужно, используя ajax ... но я откладываю эту проблему до тех пор, пока не исправлю вещи маршрутизации / привязки!

ОБНОВЛЕНИЕ: "SetInterviewee" действительно правильный путь для публикации в, но параметр routeValues ​​должен копировать значения маршрута из текущего представления - я бы подумал.Вот код для формы: 

RouteValueDictionary routeValues = ViewContext.RouteData.Values;
using (Html.BeginForm("SetInterviewee", "Date", routeValues, FormMethod.Post, new { id = "intervieweeForm" }))

Ответы [ 2 ]

1 голос
/ 30 ноября 2011

Итак, я знаю, что это довольно старый вопрос, но я возился с подобной проблемой и, похоже, нашел обходной путь, который может оказаться полезным в будущем.

Внутри формы добавьте кнопку отправки.Что-то вроде: 

<input type="submit" name="submit" value="save" style="display: none;" />

Убедитесь, что вы указали атрибут имени, как это имеет значение в данном случае.Вот код, который у меня есть, и в настоящее время он работает с полной привязкой модели: 

<% using (Ajax.BeginForm("SaveStatus", "Finding", new { FindingId = Model.FindingId },
       new AjaxOptions {
           HttpMethod = "Post",
           InsertionMode = InsertionMode.Replace,
           UpdateTargetId = "StatusWindow",
           OnBegin = "function(){ jQuery('#SaveStatusForm').block({ Message: 'Saving' }); }",
           OnComplete = "function(){ jQuery('#SaveStatusForm').unblock(); }",
           OnFailure = "HandleMSAjaxFail",
       }, new { id = "SaveStatusForm" })) { %>
<div>
    <%: Html.DropDownListFor(Status => Status.SelectedTagId, Model.AvailableStatuses, null, new Dictionary<string, object> { { "onchange", "jQuery('#SaveStatusForm').submit();" } })%>
    <input type="submit" name="submit" value="save" style="display: none;" />
</div>
<% } %>

Конечно, это мой код, который не привязан к вашему примеру, но вы можете понять, что происходит.Первоначально у меня был выпадающий список, просто делавший отправку, и когда он срабатывал, я получал всевозможные изворотливые ответы - включая полную синхронную обратную передачу.Когда я добавил кнопку отправки, код MS Ajax, кажется, прекрасно работает.Дайте ему шанс!

0 голосов
/ 26 января 2011

Я бы порекомендовал вам использовать jquery и избавиться от всех Ajax.* помощников и MSAjax скриптов.

Итак: 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

<% using (Html.BeginForm("SetInterviewee", "Date", routeValues, FormMethod.Post, new { id = "myform" })) { %>
    ...
<% } %>

<%= Html.DropDownList(
    "interviewees", 
    Model.interviewees.intervieweeLists.intervieweesList, 
    "-- select employee --", 
    new { id = "interviewees", @class = "ddltext", style = "width: 200px" }
)%>

, а затем в отдельном файле JavaScript:

$(function() {
    $('#interviewees').change(function() {
        var form = $('#myform');
        $.ajax({
            url: form.attr('action'),
            type: form.attr('method'),
            data: form.serialize(),
            success: function(result) {
                 $('#divInterviewee').html(result);
            }
        });
    });
});

Теперь мы успешно отделим разметку HTML от javascript.Это ненавязчивый JavaScript.

...