заполнить выпадающий список на основе предыдущего списка (mvc3)

Question

У меня есть 2 выпадающих списка, и я хочу выбрать первый, вызвать второй ddl и показать конкретные данные из базы данных. например, первый ddl1 содержит (состояния), а ddl2 будет динамически отображать свои города.

Контроллер загружает состояния:

  ViewBag.ddlStates= new SelectList(db.State, "StateCode", "Title"); 
  return View();

Вид:

    @Html.DropDownList("ddlStates")
    @Html.DropDownList("ddlCities", String.Empty)

как бы мне сработать, когда значение состояния ddl изменяется, вызывать базу данных и динамически получать ее города ... используя AJAX, просто чтобы перезагрузить ddl /partView?

Возможно ли в ddlState select call action (PartialViewResult) в контроллере динамически генерировать список городов и отправлять его обратно в представление?

Thx!

Answer 1

Вы можете использовать событие change () первого раскрывающегося списка с jQuery:

$('#ddlStates').on('change', function() {

    $.ajax({
        type: "POST",
        url: 'Controller/GetCities',
        data: $(this).val(),
        success: function(response) {
            $('#ddlCities').html(response);
        }
    });

});

'Controller / GetCities' будет маршрутом к действию, которое возвращает частичное представление с новым списком городов<option> s на основе выбранного значения, которое было опубликовано.

Действие, которое вы разместили, будет выглядеть примерно так:

           [HttpPost]
    public ActionResult GetCities(GetCitiesViewModel model)
    {
        var selectedState = model.ddlStates;
        IEnumerable<CityViewModel> cities = GetCitiesInState(selectedState);
        IEnumerable<SelectListItem> filteredItems =
            cities.Select(c => new SelectListItem {Text = c.Name, Value = c.CityId.ToString()});

        return PartialView("CityList", filteredItems);
    }

    private IEnumerable<CityViewModel> GetCitiesInState(int stateId)
    {
        // Just returning a list regardless of state ID. But you would look the cities up by state here.
        return new List<CityViewModel>
            {
                new CityViewModel {CityId = 1, Name = "London"},
                new CityViewModel {CityId = 2, Name = "Birmingham"},
            };
    }

    public class CityViewModel
    {
        public int CityId { get; set; }

        public string Name { get; set; }
    }

    public class GetCitiesViewModel
    {
        public int ddlStates { get; set; }
    }

С видом примерно так:

@model System.Collections.Generic.IEnumerable<System.Web.Mvc.SelectListItem>
@{ Layout = null; }

@foreach (var city in Model)
{
    <option value="@city.Value">@city.Text</option>
}

Answer 2

У меня есть что-то похожее на одном из моих сайтов. Я использую действие контроллера, которое возвращает города как Json. JQuery, который я использую, очищает и отключает раскрывающийся список городов, когда для штата не выбрано значение.

Вот моя разметка

@Html.LabelFor(model => model.StateCode)
@Html.DropDownList("StateCode", string.Empty)
@Html.LabelFor(model => model.CityID)
@Html.DropDownList("CityID", string.Empty)

Вот JQuery

$("select#StateCode").bind('change', function () {
    var StateCode = $("select#StateCode option:selected").val();
    if (StateCode == "" || StateCode == 0) 
    {
        $("select#CityID").empty();
        $("select#CityID").attr('disabled', 'disabled');
    }
    else 
    {
        $.getJSON('@Url.Action("GetCityiesForState")', { StateCode: StateCode }, function (data) {
            $("select#CityID").empty();
            $.each(data, function (i, c) {
                $('select#CityID').append('<option value="' + c.Value + '">' + c.Text + '</option>');
            });
            $("select#CityID").removeAttr('disabled');
            $("select#CityID option:first").attr('selected', 'selected');
        });
    }
});

Действие контроллера

public JsonResult GetCityiesForState(string stateCode) {
    var cities = repository.getCities(stateCode);
    return Json(cities, JsonRequestBehavior.AllowGet);
}