How do you submit a dropdownlist in asp.net mvc fr

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

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 2

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 3

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 4

in your dropdown replace

this.form.submit()

to

$(this.form).submit();

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

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