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 / partialView？

是否可以在控制器中的ddlState select call action（PartialViewResult）动态生成城市列表并将其发送回视图？

THX！

Answer 1

您可以使用jQuery的第一个下拉列表中的change（）事件：

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

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

});

'Controller / GetCities'将成为一个动作的路径，该动作将根据发布的所选val返回一个新的城市<option>列表的部分视图。

您发布的动作如下所示：

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

根据以前的列表填充下拉列表（mvc3）

2 个答案: