ASP.NET MVC无限级联异步下拉框（select）控件

前段时间参与一个公司的项目，使用ASP.NET MVC 3.0，其中有多处使用了级联下拉。

考虑到这种ajax异步调用代码重复且不方便调试，于是做了一个公用控件，实际是一个.NET MVC的PartialView。

PartialView：

@model Platform.Modules.Base.ViewModels.SelectViewModel
<select id="@Model.Id" name="@Model.Name" class="@Model.Class" style="@Model.Style"><option value='@Model.DefaultValue'>@Model.DefaultText</option></select>
<script type="text/javascript">
    $(function () {
        var actionUrl = '@Model.ActionUrl';
    var unselected = "<option value='@Model.DefaultValue'>@Model.DefaultText</option>";
    var tagId,textProperty,valueProperty,parentTagId,paramName,currentSelectedValue,requestMethod;
        tagId = '@Model.Id';
        textProperty='@Model.TextProperty';
        valueProperty='@Model.ValueProperty';
        parentTagId='@Model.ParentTagId';
        paramName='@Model.ParamName';
        currentSelectedValue='@Model.SelectedValue';
        requestMethod='@Model.RequestMethod.ToString()';
        @{if(String.IsNullOrEmpty(Model.ParentTagId)){
            <text>
                $.ajax({
                type: requestMethod,
                url: actionUrl+"?ts="+new Date().getTime(),
                cache:false,
                success: function(data){
                $("#" + tagId).empty();
                $("#" + tagId).append(unselected);
                $.each(data, function (i, item) {
                    if($(item).attr(valueProperty)==currentSelectedValue){
                        $("#" + tagId).append($("<option selected='selected' value='" + $(item).attr(valueProperty) + "'>" + $(item).attr(textProperty) + "</option>"));                    
                    }else{
                        $("#" + tagId).append($("<option value='" + $(item).attr(valueProperty) + "'>" + $(item).attr(textProperty) + "</option>"));
                    }
                });
            },
            complete:function()
            {
                if(currentSelectedValue!=null){
                    if($('#'+tagId).fireEvent)   
                        $('#'+tagId).fireEvent("onchange");
                    else   
                        $('#'+tagId).change();
                }
            }
            });
            </text>
        }else{
            <text>
            $("#" + parentTagId).change(function () {
                $('#'+tagId).empty();
                $('#'+tagId).append(unselected);

                if($('#'+tagId).fireEvent)   
                    $('#'+tagId).fireEvent("onchange");
                else   
                    $('#'+tagId).change();

                var parentValue = $(this).val();
                if (!parentValue) {
                    return;
                }

                $.ajax({
                type: requestMethod,
                url: actionUrl+"?ts="+new Date().getTime(),
                data: paramName+"=" + parentValue,
                cache:false,
                success: function(data){    
                    $.each(data, function (i, item) {
                        if($(item).attr(valueProperty)==currentSelectedValue){
                            $("#" + tagId).append($("<option selected='selected' value='" + $(item).attr(valueProperty) + "'>" + $(item).attr(textProperty) + "</option>"));                            
                        }else{
                            $("#" + tagId).append($("<option value='" + $(item).attr(valueProperty) + "'>" + $(item).attr(textProperty) + "</option>"));
                        }
                    });
                },
                complete:function()
                {
                    if(currentSelectedValue!=null){
                        if($('#'+tagId).fireEvent)   
                            $('#'+tagId).fireEvent("onchange");
                        else   
                            $('#'+tagId).change();
                    }
                }
            });
            });
            
            </text>
        }
        }
    });
</script>

 

该控件使用到的Model类：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Web.Mvc;

namespace Platform.Modules.Base.ViewModels
{
    public class SelectViewModel
    {
        /// <summary>
        /// select标签Id
        /// </summary>
        public String Id { get; set; }

        /// <summary>
        /// select标签Name
        /// </summary>
        public String Name { get; set; }

        /// <summary>
        /// json数据源元素中代表select>option>Text的属性
        /// </summary>
        public String TextProperty { get; set; }
        
        /// <summary>
        /// json数据源元素中代表select>option>value的属性
        /// </summary>
        public String ValueProperty { get; set; }
        /// <summary>
        /// 数据源获取地址
        /// </summary>
        public String ActionUrl { get; set; }

        /// <summary>
        /// select标签初始项文本,默认为空字符串
        /// </summary>
        public String DefaultText { get; set; }

        /// <summary>
        /// select标签初始项值,默认为空字符串
        /// </summary>
        public String DefaultValue{ get; set; }
        
        /// <summary>
        /// 获取数据时传递的参数名
        /// </summary>
        public String ParamName { get; set; }

        /// <summary>
        /// 父级下拉框的标签id
        /// 有父级必选
        /// </summary>
        public String ParentTagId { get; set; }

        /// <summary>
        /// 样式表
        /// </summary>
        public String Class { get; set; }

        /// <summary>
        /// 样式
        /// </summary>
        public String Style { get; set; }

        /// <summary>
        /// select标签当前选定项
        /// </summary>
        public String SelectedValue { get; set; }

        private FormMethod requestMethod = FormMethod.Get;

        /// <summary>
        /// 请求方式
        /// 默认为GET
        /// </summary>
        public FormMethod RequestMethod
        {
            get { return requestMethod; }
            set { requestMethod = value; }
        }
    }

}

 

Demo:

        public ActionResult GetProvinces()
        {
            var entities = locationService.GetProvinceList();
            return Json(entities, JsonRequestBehavior.AllowGet);
        }

        public ActionResult GetCities(String provinceCode)
        {
            var entities = locationService.GetCityList(new CityQuery() { ProvinceCode = provinceCode });
            return Json(entities, JsonRequestBehavior.AllowGet);
        }

        public ActionResult GetCounties(String cityCode)
        {
            var entities = locationService.GetCountyList(new CountyQuery() { CityCode = cityCode });
            return Json(entities, JsonRequestBehavior.AllowGet);
        }

        /// <summary>
        /// 测试页Action
        /// </summary>
        /// <returns></returns>
        public ActionResult SelectControlTest()
        {
            return View();
        }

 

@{
    ViewBag.Title = "SelectControlTest";
}
@using Platform.Modules.Base.ViewModels
<h2>SelectControlTest</h2>
            省：@{Html.RenderPartial("SelectView", new SelectViewModel()
              {
                  ActionUrl = Url.Action("GetProvinces", "Location"),
                  DefaultText = "---请选择---",
                  DefaultValue = "",
                  Id = "aaaaa",
                  Name = "aaaaa",
                  TextProperty = "Name",
                  ValueProperty = "Code",
                  Style = "width:173px",
              });}
              市：@{Html.RenderPartial("SelectView",new SelectViewModel(){
                    ActionUrl = Url.Action("GetCities", "Location"),
              DefaultText="---请选择---",
              DefaultValue="",
              Id="bbbbbb",
              ParentTagId="aaaaa",
              ParamName = "provinceCode",
              Name="bbbbbb",
              TextProperty="Name",
              ValueProperty = "Code",
              Style = "width:173px"
              });}
              县：@{Html.RenderPartial("SelectView",new SelectViewModel(){
                    ActionUrl = Url.Action("GetCounties", "Location"),
              DefaultText="---请选择---",
              DefaultValue="",
              Id="cccccc",
              ParamName = "cityCode",
              ParentTagId="bbbbbb",
              Name="cccccc",
              TextProperty="Name",
              ValueProperty="Code",
              Style = "width:173px"
              });}

 

理论上支持无限级联。。

支持Post，Get两种请求方式。默认使用Get方式。

注意：使用Get方式请求Action,返回JSON的时候一定要加JsonRequestBehavior.AllowGet。