CODEWITHSUNDEEP
asp.net-mvcasp.net-mvc-4
mmilan
mmilan

Reputation: 1778

MVC 4 postback on Dropdownlist change

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

Upvotes: 12

Views: 36720

Answers (3)

Abhijeet Nagre
Abhijeet Nagre

Reputation: 916

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

Upvotes: 1

Oualid KTATA
Oualid KTATA

Reputation: 1116

In MVC there is no need for a post back, When the user selects from the dropdown, redirecect to the same action again but this time the action will have a HttpPost attribute (that will be your postback). Then you can do whatever you like and re-render the same view but this time with a new view model (having your new data loaded: AvailiableCredit and ClosingDay)

    public ActionResult DisplayMainView()
    {    
      LoadDataOnDropDown();    
      return View();    
    }

on the dropdown when a user selects the value, redirect to action (with httpPost) and give whatever value you need to reload the data.

[HttpPost]
public ActionResult DisplayMainView(string selectedValueFromDropdown) {

// get AvailiableCredit and ClosingDay  based on selection
ViewBag.AvailiableCredit = myService.GetAvailiableCredit (selectedValueFromDropdown);
ViewBag.ClosingDay   = myService.GetClosingDay (selectedValueFromDropdown);

return View;

}

This a pseudo-code that illustrate how you should use HttpPost to simulate the webForm postback. N.B.:I Used the viewbag but I would suggest using a seperate viewmodel for every view you create.

Upvotes: 0

David
David

Reputation: 218798

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.

Upvotes: 25

Related Questions