Как вы представляете выпадающий список в 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, вся страница заменяется.

Каков правильный способ для dropdownlist вызвать this.form.submit, чтобы только область внутри Ajax.BeginForm?

Ответ 1

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

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

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

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

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

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

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

Ответ 2

в выпадающем списке

this.form.submit()

$(this.form).submit();

Ответ 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!") });
});

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

Ответ 5

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

Ответ 6

У меня была кнопка вроде этого в моей AJAX.BeginForm

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

И onsubmit или решение от Francisco не сработало (я до сих пор не знаю почему)

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

  new { onchange = "document.getElementById('submitButton').click()" }

Ответ 7

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

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

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