multiple dropdownlist triggering

Question

I have a page with 2 dropdownlist. one country, one currency and depend on country I want to fill currency dropdownlist and after click button I want to fill the grid from database. I simplfied my code to show what I have tried. What is the best and easist approach?

    public ActionResult ddlCountry()
    {
        var countryList = new List<string>();
        countryList.Add("US");
        countryList.Add("GB");
        return View(countryList);
    }

    public ActionResult ddlCurrency(string country)
    {
        var curencyList = new List<string>();
        if(country == "US")
           curencyList.Add("USD");
        if(country == "GB")
           curencyList.Add("GBP");

        return View(curencyList);
    }

    public ActionResult Index(string country, string currency)
    {
        var viewModels = new List<FooViewModel>();
        //code gets values from database
        return View(viewModels);
    }


<div>
   @using (Html.BeginForm())
   {
      <table>
         <tr>
            <td>Country</td>
            <td>@Html.DropDownListFor(model => model.SelectedId, new SelectList(Model.Choices, "Id", "Text"), "Choose... ")</td>
            <td>Currency</td>
            <td>@Html.DropDownListFor(model => model.SelectedId, new SelectList(Model.Choices, "Id", "Text"), "Choose... ")</td>
         </tr>
      </table>
      @Html.ActionLink("Search", "Index", new {})
   }
</div>

@using (Html.BeginForm("Search", "Index", new { Country = "IN", Currency = "INR" }, FormMethod.Post, new { id = "foo" }))
{
    <div>
        @Html.Grid(Model).Named("valueGrid").Columns(columns =>
            {
                columns.Add(vm => vm.Country).Titled("Country");
                columns.Add(vm => vm.Currency).Titled("Currency");
                columns.Add(vm => vm.Value).Titled("Value");
            }).WithPaging(25).Sortable(true).Filterable(true)
    </div>
}

Depends on if you prefer an in page reload like an ajax call or a full page reload? — Ryan Searle, Nov 01 '16 at 15:46
I am fine with full page load, looking for practical solution. — Mert, Nov 01 '16 at 15:48

score 2 · Answer 1 · answered Nov 01 '16 at 16:16

You basically need to do the cascading dropdown loading approach. To start, first load the Country dropdown on your page load. For that, in the GET action of your page, send a list of SelectListItem's to the view so that we can use to build the SELECT element options

public ActionResult Index()
{
  var items =  new List<String> {"EN", "GN"};
  var options = list.Select(x => new SelectListItem {Value = x, Text = x});
  return View(options);
}

Now make sure your view is strongly typed to a list of SelectListItem. In your view, you can use the Html.DropDownList helper method to render the dropdown

@model List<SelectListItem>
@using(Html.BeginForm("Index","Home"))
{
   @Html.DropDownList("country", Model, "Choose... ")
   <SELECT id="currency" name="currency" data-url="@Url.Action("GetCurrencies")"></SELECT>
   <input type="submit" />
}

Now you need to listen to the change event of the first dropdown, get the value and make an ajax call to get the options for your second dropdown.

$(function(){

  $("#country").change(function(){

     var c=$(this).val();
     var url = $("#currencies").data("url");
     $("#currency").empty();

     $.get(url+'?country'+c,function(data){
        $.each(data,function(a,b){
          var o ='<option value="'+b.Value+'">'+b.Text+'</option>';
           $("#currencies").append(o);
        });
     });

  });

});

Now make sure you have your GetCurrencies action method which accepts the country and return a List of SelectListItem in JSON format

public ActionResult GetCurrencies(string country)
{
  var list = new List<SelectListItem>{
     new SelectListItem {  Value ="$", Text="$$$"}    
  };
  return Json(list,JsonRequestBehavior.AllowGet);
}

Now after selecting dropdown values, when you submit the form, the selected options will be available in the parameters of your Index action.

Ryan Searle · Answer 2 · 2016-11-01T16:01:06.513

Since the question spans multiple requirements I will try to break it down.

In your ViewModel you want to create Lists of SelectViewItem for your DDLs:

private readonly IEnumerable<Country> _countries;
public IEnumerable<SelectListItem> Countries
{
    get
    {
        return _countries.Select(x => new SelectListItem
        {
            Value = x.Id.ToString(),
            Text = x.Name
        });
    }
}

Remember to fill _countries with your data in your constructor.

In your View:

@Html.DropDownListFor(model => model.SelectedCountryId, Model.Countries)

Repeat this process for the other DDL and create another property for the Grid data.

multiple dropdownlist triggering

2 Answers2

Linked