多个下拉列表触发

本文关键字：下拉列表 | 更新日期: 2023-09-27 18:15:45

我有一个有2个下拉列表的页面。一个国家，一种货币，并取决于国家，我要填写货币下拉列表和点击按钮后，我要从数据库填写网格。我简化了我的代码来展示我所做的尝试。最好和最简单的方法是什么?

    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元素选项

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。方法来呈现下拉菜单

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

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

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

现在确保你的GetCurrencies操作方法接受国家，并返回一个JSON格式的SelectListItem列表

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

现在，在选择下拉值之后，当您提交表单时，所选择的选项将在Index操作的参数中可用。

由于这个问题涉及多个需求，我将尝试将其分解。

在ViewModel中，您要为ddl创建SelectViewItem列表:

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

请记住在构造函数中使用您的数据填充_countries。

In your View:

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

对另一个DDL重复此过程，并为Grid数据创建另一个属性。

相关文章：