MVC 3 Razor 视图中的级联下拉菜单 [英] Cascading drop-downs in MVC 3 Razor view

问题描述

我对如何在 Razor 视图中为地址实现级联下拉列表感兴趣.我的站点实体有一个 SuburbId 属性.Suburb 有一个 CityId，City 有一个 ProvinceId.我想在站点视图中显示所有郊区、城市和省的下拉菜单，例如郊区下拉列表最初将显示首先选择一个城市"，而城市下拉列表将显示首先选择一个省".在选择一个省时，该省内的城市是否有人口等.

我怎样才能做到这一点?我从哪里开始?

解决方案

让我们用一个例子来说明.一如既往地从模型开始:

公共类 MyViewModel{公共字符串 SelectedProvinceId { 获取；放;}公共字符串 SelectedCityId { 获取；放;}公共字符串 SelectedSuburbId { 获取；放;}公共 IEnumerable省 { 得到;放;}}公开课省{公共字符串 ID { 获取；放;}公共字符串名称 { 获取；放;}}

接下来是控制器:

公共类 HomeController : 控制器{公共 ActionResult 索引(){var 模型 = 新的 MyViewModel{//TODO:从您的存储库中获取那些省份 = Enumerable.Range(1, 10).Select(x => new Province{Id = (x + 1).ToString(),名称 = "省" + x})};返回视图(模型)；}公共 ActionResult 郊区(int cityId){//TODO: 根据 cityId 从您的存储库中获取郊区var 郊区 = Enumerable.Range(1, 5).Select(x => new{id = x,名称 = "郊区" + x});返回 Json(suburbs, JsonRequestBehavior.AllowGet);}公共 ActionResult 城市(int ProvinceId){//待办事项:根据省 ID 从您的存储库中获取城市var city = Enumerable.Range(1, 5).Select(x => new{id = x,名称 = 城市" + x});返回 Json(城市，JsonRequestBehavior.AllowGet)；}}

最后是一个视图:

@model SomeNs.Models.MyViewModel@{ViewBag.Title = "首页";}<script type="text/javascript" src="/scripts/jquery-1.4.4.js"></script><script type="text/javascript">$(函数(){$('#SelectedProvinceId').change(function () {var selectedProvinceId = $(this).val();$.getJSON('@Url.Action("Cities")', { ProvinceId: selectedProvinceId }, function (cities) {var citySelect = $('#SelectedCityId');citySelect.empty();$.each(城市，功能(索引，城市){城市选择.附加($('<选项/>').attr('value', city.Id).text(city.Name));});});});$('#SelectedCityId').change(function () {var selectedCityId = $(this).val();$.getJSON('@Url.Action("Suburbs")', { cityId: selectedCityId }, function (suburbs) {var 郊区选择 = $('#SelectedSuburbId');郊区选择.empty();$.each(郊区，功能(索引，郊区){郊区选择.附加($('<选项/>').attr('价值', 郊区.Id).text(suburb.Name));});});});});<div>省:@Html.DropDownListFor(x => x.SelectedProvinceId, new SelectList(Model.Provinces, "Id", "Name"))

<div>城市:@Html.DropDownListFor(x => x.SelectedCityId, Enumerable.Empty())

<div>市郊:@Html.DropDownListFor(x => x.SelectedSuburbId, Enumerable.Empty())

作为改进，可以通过编写 jquery 插件来缩短 javascript 代码以避免重复某些部分.

<小时>

更新:

谈到一个插件，你可能会有一些东西:

(函数 ($) {$.fn.cascade = 函数(选项){var 默认值 = { };var opts = $.extend(defaults, options);返回 this.each(function () {$(this).change(function () {var selectedValue = $(this).val();无功参数 = { };参数[opts.paramName] = selectedValue;$.getJSON(opts.url, params, function (items) {opts.childSelect.empty();$.each(items, function (index, item) {opts.childSelect.append($('<选项/>').attr('value', item.Id).text(item.Name));});});});});};})(jQuery);

然后简单地连接起来:

$(function () {$('#SelectedProvinceId').cascade({url: '@Url.Action("城市")',参数名称:'省ID'，childSelect: $('#SelectedCityId')});$('#SelectedCityId').cascade({url: '@Url.Action("郊区")',paramName: 'cityId',childSelect: $('#SelectedSuburbId')});});

I am interested in how to implement cascading dropdown lists for addresses in a Razor view. My Site entity has a SuburbId property. Suburb has a CityId, and City has ProvinceId. I would like to display dropdowns for all of Suburb, City, and Province on the Site view, where e.g. the suburb dropdown will initially display "First select a City", and the City dropdown, "First select a province". On selecting a province, cities in the province are populated etc.

How can I achieve this? Where do I start?

解决方案

Let's illustrate with an example. As always start with a model:

public class MyViewModel
{
    public string SelectedProvinceId { get; set; }
    public string SelectedCityId { get; set; }
    public string SelectedSuburbId { get; set; }
    public IEnumerable<Province> Provinces { get; set; }
}

public class Province
{
    public string Id { get; set; }
    public string Name { get; set; }
}

Next a controller:

public class HomeController : Controller
{
    public ActionResult Index()
    {
        var model = new MyViewModel
        {
            // TODO: Fetch those from your repository
            Provinces = Enumerable.Range(1, 10).Select(x => new Province
            {
                Id = (x + 1).ToString(),
                Name = "Province " + x
            })
        };
        return View(model);
    }

    public ActionResult Suburbs(int cityId)
    {
        // TODO: Fetch the suburbs from your repository based on the cityId
        var suburbs = Enumerable.Range(1, 5).Select(x => new
        {
            Id = x,
            Name = "suburb " + x
        });
        return Json(suburbs, JsonRequestBehavior.AllowGet);
    }

    public ActionResult Cities(int provinceId)
    {
        // TODO: Fetch the cities from your repository based on the provinceId
        var cities = Enumerable.Range(1, 5).Select(x => new
        {
            Id = x,
            Name = "city " + x
        });
        return Json(cities, JsonRequestBehavior.AllowGet);
    }
}

And finally a view:

@model SomeNs.Models.MyViewModel

@{
    ViewBag.Title = "Home Page";
}

<script type="text/javascript" src="/scripts/jquery-1.4.4.js"></script>
<script type="text/javascript">
    $(function () {
        $('#SelectedProvinceId').change(function () {
            var selectedProvinceId = $(this).val();
            $.getJSON('@Url.Action("Cities")', { provinceId: selectedProvinceId }, function (cities) {
                var citiesSelect = $('#SelectedCityId');
                citiesSelect.empty();
                $.each(cities, function (index, city) {
                    citiesSelect.append(
                        $('<option/>')
                            .attr('value', city.Id)
                            .text(city.Name)
                    );
                });
            });
        });

        $('#SelectedCityId').change(function () {
            var selectedCityId = $(this).val();
            $.getJSON('@Url.Action("Suburbs")', { cityId: selectedCityId }, function (suburbs) {
                var suburbsSelect = $('#SelectedSuburbId');
                suburbsSelect.empty();
                $.each(suburbs, function (index, suburb) {
                    suburbsSelect.append(
                        $('<option/>')
                            .attr('value', suburb.Id)
                            .text(suburb.Name)
                    );
                });
            });
        });
    });
</script>

<div>
    Province: 
    @Html.DropDownListFor(x => x.SelectedProvinceId, new SelectList(Model.Provinces, "Id", "Name"))
</div>
<div>
    City: 
    @Html.DropDownListFor(x => x.SelectedCityId, Enumerable.Empty<SelectListItem>())
</div>
<div>
    Suburb: 
    @Html.DropDownListFor(x => x.SelectedSuburbId, Enumerable.Empty<SelectListItem>())
</div>

As an improvement the javascript code could be shortened by writing a jquery plugin to avoid duplicating some parts.

---

UPDATE:

And talking about a plugin you could have something among the lines:

(function ($) {
    $.fn.cascade = function (options) {
        var defaults = { };
        var opts = $.extend(defaults, options);

        return this.each(function () {
            $(this).change(function () {
                var selectedValue = $(this).val();
                var params = { };
                params[opts.paramName] = selectedValue;
                $.getJSON(opts.url, params, function (items) {
                    opts.childSelect.empty();
                    $.each(items, function (index, item) {
                        opts.childSelect.append(
                            $('<option/>')
                                .attr('value', item.Id)
                                .text(item.Name)
                        );
                    });
                });
            });
        });
    };
})(jQuery);

And then simply wire it up:

$(function () {
    $('#SelectedProvinceId').cascade({
        url: '@Url.Action("Cities")',
        paramName: 'provinceId',
        childSelect: $('#SelectedCityId')
    });

    $('#SelectedCityId').cascade({
        url: '@Url.Action("Suburbs")',
        paramName: 'cityId',
        childSelect: $('#SelectedSuburbId')
    });
});

这篇关于MVC 3 Razor 视图中的级联下拉菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！