Как вы отправляете выпадающий список в asp.net mvc из формы Ajax

Как вы отправляете из выпадающего списка «onchange» событие из формы ajax?

В соответствии со следующим вопросом: Как вы отправляете выпадающий список в asp.net mvc , внутри Html.BeginFrom вы можете установить onchange = "this.form.submit" и изменить выпадающие сообщения обратно.

Однако, используя следующий код (внутри Ajax.BeginFrom):

<% using (Ajax.BeginForm("UpdateForm", new AjaxOptions() { UpdateTargetId = "updateText" })) { %>
    <h2>Top Authors</h2>

    Sort by:&nbsp;<%=Html.DropDownList("sortByList", new SelectList(ViewData["SortOptions"], new { onchange = "this.form.submit()" })%>

    <%= Html.TextBox("updateText")%>
<% } %>

Возвращает обратно к действию контроллера, но вся страница заменяется содержимым текста «updateText», а не только тем, что находится внутри текстового поля «updateText».

Таким образом, вместо замены только области внутри Ajax.BeginForm, вся страница заменяется.

Как правильно выпадающему списку вызывать this.form.submit, чтобы только область внутри Ajax.BeginForm?

15.12.2008 02:29:29
7 ОТВЕТОВ

Что вы можете попробовать сделать это (требуется jQuery):

$("#yourDropdown").change(function() {
  var f = $("#yourForm");
  var action = f.attr("action");
  var serializedForm = f.serialize();
  $.post(action, serializedForm,
    function () { alert("Finished! Can do something here!") });
});
3
15.12.2008 03:30:17

Можем ли мы увидеть ваш код контроллера? Вы можете использовать Request.IsMvcAjaxRequest () в вашем контроллере, чтобы вернуть только часть данных, если это Ajax-запрос, а не весь View. В вашем представлении переместите вашу форму в PartialView и вызовите

Html.RenderPartial("viewname");

В вашем контроллере:

if (Request.IsMvcAjaxRequest())
{
return PartialView("viewname");
}
else
{ //Non Ajax code here. }

0
21.12.2008 03:00:58
Проблема не в контроллере. Проблема именно в том, что форма не представлена ​​как ajax.
Serge Wautier 1.12.2010 15:51:24

У меня тоже была такая же проблема. У меня было несколько выпадающих списков в частичных представлениях, чтобы они могли обновляться независимо, но установка атрибута «onchange» продолжала обновлять всю страницу.

Я заметил, что «this.form.submit ()» всегда ссылался на основную форму, вне частичного представления. Поэтому вместо этого я добавил кнопку отправки внутри формы AJAX и сослался на это:

<%=Html.DropDownList("data", ViewData["data"] as SelectList
, new { onchange = "$(\"#button" + Model.IdIndex + "\").click();" })%>


<input type="submit" id="button<%=Model.IdIndex %>" style="display: none"  /><br />

Мой Model.IdIdex - это просто переменная для доступа к различным элементам управления на одной странице. Надеюсь, поможет.

2
9.06.2009 16:55:59

Если вы используете MVC, то, вероятно, лучше всего использовать jQuery ...

<%= Html.DropDownList("sortByList", new SelectList(ViewData["SortOptions"]) %> 
<%= Html.TextBox("updateText") %>

<script>
$("#sortByList").change(function() {
    $.ajax({
        url: <%= Url.Action("UpdateForm")%>,
        type: "POST",
        data: { 'sortBy': $(this).val() },
        dataType: "json",
        success: function(result) { $('#updateText').text(result); },
        error: function(error) { alert(error); }
    })

});
</script>

Ваш контроллер будет что-то вроде:

public JsonResult UpdateForm(string sortBy)
{
    string result = "Your result here";
    return Json(result);
}
1
16.12.2009 12:24:01

Хорошо, почти через 2 года вам, наверное, уже все равно. Кто знает: может быть, другие (такие как я ;-) делают.

Итак, вот (чрезвычайно простое) решение:

В вашем Html.DropDownList(...)звонке изменить

new { onchange = "this.form.submit()" }

в

new { onchange = "this.form.onsubmit()" }

Вы можете заметить разницу? ;-)

Причина в том, что Ajax.BeginForm()создается форма с onsubmit()обработчиком для асинхронной отправки формы. Позвонив submit(), вы обойдете этот onsubmit()пользовательский обработчик. Звонок onsubmit()работал на меня.

41
1.12.2010 15:50:20
Спасибо, мужик ... определенно самый простой подход и нет необходимости во всех лишних сценариях jquery
CkH 31.12.2010 05:43:09
в простоте есть красота!
Elad Katz 27.10.2011 09:36:49
Это не сработало для меня, но очень похожее решение сработало. Пожалуйста, обратитесь к следующему вопросу по stackoverflow.
Alex M 8.04.2013 10:35:54
будет ли это работать в сафари? как я знаю, onsubmit не будет работать в сафари
mzonerz 1.11.2016 18:39:38

У меня была кнопка, как это в моем AJAX.BeginForm

  <button id="submitButton" type="submit"  class="btn" style="vertical-align: top"><i class="icon"></i> replace</button>

И подача заявки или решение из Франциско не сработало (я до сих пор не знаю, почему)

Итак, я создал альтернативу:

  new { onchange = "document.getElementById('submitButton').click()" }
1
18.05.2012 03:02:35

в вашем выпадающем списке заменить

this.form.submit()

в

$(this.form).submit();
5
25.06.2014 14:48:43