MVC 4 postback on Dropdownlist change

Question

I am using MVC4 and I have a menu inside of a layout. part of my menu consists of a dropdown list where a user can select between availiable providers.

<div class="row">
    <div class="col-md-4">
    @Html.DropDownListFor(x=> x.usr.DatUsrs.IdProvider, new SelectList(Lista, "Value","Text"))
    </div>
    <div class="col-md-3">
      Credit
      @Html.DisplayTextFor(x=> x.usrSelectedProvider.AvailiableCredit)
    </div>
    <div class="col-md-3">
      TEXT
    </div>
    <div class="col-md-2">
      Closing Day  @Html.DisplayTextFor(m=> m.usrSelectedProvider.ClosingDay)
    </div>
  </div>

the problem I am having is: when a user changes the selected item in the dropdownlist, I want to make a postback to be able to load the AvailiableCredit and ClosingDay. In webforms i could do this with autopostback, but I haven't found a way to do this in MVC4

Answer 1

There are a couple of ways to do this, but first you need to understand the structure of what you're doing.

It's not a "post back" in MVC (or, really, in HTTP in general... WebForms lied to you). What you're trying to do is simply post data to the server and receive a response. In the MVC Framework, the target of that post would be a controller action. The response can be a couple of different things, depending on the approach you take.

I recommend writing some JavaScript to perform this task via AJAX. That way the page doesn't refresh and you're only sending/receiving the data relevant to the specific task at hand. ASP.NET MVC comes with jQuery, so I'm going to assume the use of jQuery in this case.

First you'd need to bind to the change event for that select element. It's probably identified with the id "IdProvider" but you'll want to check the rendered HTML to make sure. Assuming it is, you can use something like this:

$('#IdProvider').change(function () {
    // respond to the change event in here
});

Now you can make the AJAX call to the server within that handler. It might be something as simple as:

var selectedValue = $('#IdProvider').val();
$.post('@Url.Action("MyAction", "MyController")', { selection : selectedValue }, function (data) {
    // handle the server response here
});

With this, the controller action would have the selected value available in an argument called selection:

public ActionResult MyAction(string selection)
{
    // do your server-side processing and get your data
    return Json(data);
}

This action returns Json formatted data, since it's being used by JavaScript on the client. So when handling the response in the $.post() call above, you'd get that data in the data value there.

What you do with that data in the JavaScript code is then up to you. If it's a simple structure with the two values you're looking for, it might be something as simple as this:

$('#AvailableCredit').text(data.AvailableCredit);
$('#ClosingDay').text(data.ClosingDay);

Alternatively, you could wrap the select element in a form and post the whole thing when the selection changes, and the controller action would then want to return a View with the data populated in that view. But that's likely overkill since all you want to do is send one value and receive two values.

Answer 2

Disclaimer : This approach will submit entire form. If possible, it is better to perform an Ajax operation instead of form submit. Answer by David explains how to do Ajax call.

If one adds class data-on-change-submit to the select list (or any input element, which should trigger post back). Then it is possible to add event handler; which will submit form on change, as follows.

$(function () {
    $(".data-on-change-submit")
        .change(function ()
                {
                   var form = button.closest("form");
                   form.submit();
                })
});