CODEWITHSUNDEEP
asp.net-mvcdrop-down-menuajax.beginform
Gene
Gene

Reputation:

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:&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?

Upvotes: 22

Views: 39489

Answers (7)

Bonomi
Bonomi

Reputation: 2743

in your dropdown replace

this.form.submit()

to

$(this.form).submit();

Upvotes: 5

Carbosound1
Carbosound1

Reputation: 610

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()" }

Upvotes: 1

Serge Wautier
Serge Wautier

Reputation: 21878

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.

Upvotes: 41

Stelloy
Stelloy

Reputation: 2336

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

Upvotes: 1

Francisco
Francisco

Reputation: 4101

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.

Upvotes: 2

Adam
Adam

Reputation: 1561

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

Upvotes: 0

Strelok
Strelok

Reputation: 51451

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

Upvotes: 3

Related Questions