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.ne

Answer 1

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. }

Answer 2

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 3

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 4

in your dropdown replace

this.form.submit()

to

$(this.form).submit();

Answer 5

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 6

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.