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?

From the following question here: http://stackoverflow.com/questions/364505/how-do-you-submit-a-dropdownlist-in-aspnet-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" })) { %>

Top Authors

Sort by: <%=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

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 2

Hi

I have been having the exact same problem. I added a simple button to the form element to test if it is working as well as a very simple controller that just returns a string.

I noticed that the Request.IsAjaxRequest() in the controller is true for the button, but false for the dropdown.

The ajax div update works with the simple button but not the dropdown.

Have been able to make any progress?

Answer 3

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 4

Hi,

Do you retrieve the information "data" with request.from["data"] on IE7?

I have an issue only in IE7 which don't retrieve the value of data in the action controler.

Any suggestion?

thanks.

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);
}