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

Question

Как вы отправляете из выпадающего списка событие "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?

Answer 1

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

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

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

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

до

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

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

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

Answer 2

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

this.form.submit()

до

$(this.form).submit();

Answer 3

Что вы можете попробовать сделать это (требуется 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!") });
});

Answer 4

У меня тоже была такая же проблема. У меня было несколько раскрывающихся списков в частичных представлениях, чтобы они могли обновляться независимо, но установка атрибута «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" - это просто переменная для доступа к различным элементам управления на одной странице. Надеюсь, это поможет.

Answer 5

У меня была такая кнопка в моем 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()" }

Answer 6

Если вы используете 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);
}

Answer 7

Можем ли мы увидеть ваш код контроллера? Вы можете использовать Request.IsMvcAjaxRequest () в вашем контроллере для возврата только части данных, если это Ajax-запрос, а не весь View. В вашем представлении переместите вашу форму в PartialView и вызовите
<br>Html.RenderPartial("viewname");

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

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