несколько выпадающих списков триггеров

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

Поскольку вопрос охватывает несколько требований, я попытаюсь сломать его.

В вашей ViewModel вы хотите создать списки SelectViewItem для DDL,:

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

Не забудьте заполнить _countries с вашими данными в вашем конструкторе.

В вашем Вид:

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

Повторите этот процесс для других DDL и создать еще одно свойство для данных грид.

Answer 2

Вам в основном нужно выполнить каскадный подход к загрузке выпадающего списка. Чтобы начать, сначала загрузите раскрывающийся список Страна на странице загрузки страницы. Для этого, в GET действия вашей страницы, отправить список SelectListItem, чтобы мнение, так что мы можем использовать для создания Выбор параметров элементов

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 действий, который принимает страну и возвращает список SelectListItem в формате JSON

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

Теперь после выбора значения выпадающего, когда вы отправите форму, выбранные параметры будут доступны в параметрах действия вашего индекса.