How do you submit a dropdownlist in asp.net mvc from an Ajax form
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: <%=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
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.