多个下拉列表触发 [英] multiple dropdownlist triggering

问题描述

我有一个包含2个下拉列表的页面.一种国家/地区，一种货币，并取决于国家/地区，我想填写货币下拉列表，然后单击按钮后，我想从数据库中填写表格.我简化了代码以显示自己尝试过的内容.什么是最佳且轻松的方法?

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

推荐答案

您基本上需要执行级联下拉加载方法.首先，请先在页面加载中加载国家/地区"下拉列表.为此，在页面的GET操作中，将SelectListItem的列表发送到视图，以便我们可以用来构建SELECT元素选项

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

现在，请确保您的视图已强力键入到 SelectListItem 的列表中.在您的视图中，可以使用Html.DropDownList帮助器方法来呈现下拉列表

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" />
}

现在，您需要监听第一个下拉菜单的change事件，获取值并进行ajax调用以获取第二个下拉菜单的选项.

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

  });

});

现在，请确保您拥有可以接受国家/地区并以JSON格式返回SelectListItem列表的GetCurrencies操作方法.

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.

这篇关于多个下拉列表触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！