How do you submit a dropdownlist in asp.net mvc from an Ajax form

Question

How do you submit from a dropdownlist "onchange" event from inside of an ajax form?

According to the following question: How do you submit a dropdownlist in asp.net mvc, from inside of an Html.BeginFrom you can set onchange="this.form.submit" and changing the dropdown posts back.

However, using the following code (inside an 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")%>
<% } %>

Posts back to the controller action, but the entire page is replaced with the contents of the "updateText" text, rather than just what is inside the "updateText" textbox.

Thus, rather than replacing just the area inside the Ajax.BeginForm, the entire page is replaced.

What is the correct way for the dropdownlist to call this.form.submit such that only the area inside the Ajax.BeginForm?

Answer 1

OK, nearly 2 years later, you probably don't care anymore. Who knows: Maybe others (such as me ;-) do.

So here's the (extremely simple) solution:

In your Html.DropDownList(...) call, change

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

to

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

Can you spot the difference? ;-)

The reason is that Ajax.BeginForm() creates a form with an onsubmit() handler to submit the form asynchronously. By calling submit(), you bypass this onsubmit() custom handler. Calling onsubmit() worked for me.

Answer 2

in your dropdown replace

this.form.submit()

to

$(this.form).submit();

Answer 3

What you can try to do it this (jQuery required):

$("#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

I had the same problem too. I had several dropdown lists in partial views so they could refresh independently, but setting the "onchange" attribute kept refreshing the entire page.

I noticed that "this.form.submit()" always referred to the main form, outside the partial view. So instead I added a submit button inside the AJAX form and referred to that:

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


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

My "Model.IdIdex" is just a variable to access different controls in the same page. Hope it helps.

Answer 5

If you are using MVC then probably the best way is with 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>

Your controller would be something like:

public JsonResult UpdateForm(string sortBy)
{
    string result = "Your result here";
    return Json(result);
}

Answer 6

I had a button like this in my AJAX.BeginForm

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

And onsubmit or the solution from Francisco didn't work (I still don't know why)

So I created an alternative:

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

Answer 7

Can we see your Controller code? You can use Request.IsMvcAjaxRequest() in your controller to return only a portion of data if it is an Ajax Request instead of an entire View. In your View move your form to a PartialView and call

Html.RenderPartial("viewname");

In your Controller:

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