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

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

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

PartialView：

SelectView.cshtml

@model Platform.Modules.Base.ViewModels.SelectViewModel
<select id="@Model.Id" name="@Model.Name" class="@Model.Class" style="@Model.Style">'@Model.DefaultValue'>@Model.DefaultTextselect>

 

该控件使用到的Model类：

SelectViewModel.cs

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

namespace Platform.Modules.Base.ViewModels
{
    public class SelectViewModel
    {
        /// 

        /// select标签Id
        /// 
        public String Id { get; set; }

        /// 

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

        /// 

        /// json数据源元素中代表select>option>Text的属性
        /// 
        public String TextProperty { get; set; }
        
        /// 

        /// json数据源元素中代表select>option>value的属性
        /// 
        public String ValueProperty { get; set; }
        /// 

        /// 数据源获取地址
        /// 
        public String ActionUrl { get; set; }

        /// 

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

        /// 

        /// select标签初始项值,默认为空字符串
        /// 
        public String DefaultValue{ get; set; }
        
        /// 

        /// 获取数据时传递的参数名
        /// 
        public String ParamName { get; set; }

        /// 

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

        /// 

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

        /// 

        /// 样式
        /// 
        public String Style { get; set; }

        /// 

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

        private FormMethod requestMethod = FormMethod.Get;

        /// 

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

}

 

Demo:

Ajax回调的Action

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

        /// 

        /// 测试页Action
        /// 
        /// 
        public ActionResult SelectControlTest()
        {
            return View();
        }

 

测试页面（省市县三级联动）

@{
    ViewBag.Title = "SelectControlTest";
}
@using Platform.Modules.Base.ViewModels
<h2>SelectControlTesth2>
            省：@{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。

转载于:https://www.cnblogs.com/hhq365/archive/2013/03/05/2944495.html