Question

我有一个包含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>
}

Answer 1

您基本上需要执行级联下拉加载方法。首先，首先在页面加载上加载“国家/地区”下拉列表。为此，在页面的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.DropDownList帮助器方法呈现下拉列表

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

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

Answer 2

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

在<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="new-goal-button">Create new goal</div> <div id="new-goal-container"> <input type="text" placeholder="Goal Title"> <textarea placeholder="Goal Description"></textarea> </div>中，您要为DDL创建ViewModel列表：

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

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

多个下拉列表触发

2 个答案: