ASP.NET自定义省市级联控件

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

using System.Web.UI;
using System.Data;

using Newtonsoft.Json;
using Newtonsoft.Json.Converters;

namespace DistributionCenter.CustomControl
{
    public class SelectArea : Control
    {
        public string AreaId;
        public string ParentId;
        private DataTable dt;

        public SelectArea()
        {
            dt = Framework.Cache.Area.Instance().GetCacheArea();
        }

        protected override void Render(HtmlTextWriter writer)
        {
            if (string.IsNullOrEmpty(this.ParentId))
            {
                this.MyInit();
            }
            //省级下拉菜单
            writer.AddAttribute(HtmlTextWriterAttribute.Name, "SelectProvince");
            writer.AddAttribute(HtmlTextWriterAttribute.Id, "SelectProvince");
            writer.RenderBeginTag(HtmlTextWriterTag.Select);

            writer.AddAttribute(HtmlTextWriterAttribute.Value, "");
            writer.RenderBeginTag(HtmlTextWriterTag.Option);
            writer.Write("请选择");
            writer.RenderEndTag();

            DataRow[] dr = this.GetProvince();
            foreach (DataRow item in dr)
            {
                if (this.ParentId == item["Id"].ToString())
                {
                    writer.AddAttribute(HtmlTextWriterAttribute.Selected, "selected");
                }
                writer.AddAttribute(HtmlTextWriterAttribute.Value, item["Id"].ToString());
                writer.RenderBeginTag(HtmlTextWriterTag.Option);
                writer.Write(item["AreaName"]);
                writer.RenderEndTag();
            }

            writer.RenderEndTag();
            //市级下拉菜单
            writer.AddAttribute(HtmlTextWriterAttribute.Name, "SelectCity");
            writer.AddAttribute(HtmlTextWriterAttribute.Id, "SelectCity");
            writer.RenderBeginTag(HtmlTextWriterTag.Select);

            writer.AddAttribute(HtmlTextWriterAttribute.Value, "");
            writer.RenderBeginTag(HtmlTextWriterTag.Option);
            writer.Write("请选择");
            writer.RenderEndTag();

            dr = this.GetCityByProvince();
            foreach (DataRow item in dr)
            {
                if (this.AreaId == item["Id"].ToString())
                {
                    writer.AddAttribute(HtmlTextWriterAttribute.Selected, "selected");
                }
                writer.AddAttribute(HtmlTextWriterAttribute.Value, item["Id"].ToString());
                writer.RenderBeginTag(HtmlTextWriterTag.Option);
                writer.Write(item["AreaName"]);
                writer.RenderEndTag();
            }

            writer.RenderEndTag();
            //AreaId隐藏域
            writer.AddAttribute(HtmlTextWriterAttribute.Name, "AreaId");
            writer.AddAttribute(HtmlTextWriterAttribute.Id, "AreaId");
            writer.AddAttribute(HtmlTextWriterAttribute.Value, string.IsNullOrEmpty(this.AreaId) ? this.ParentId : this.AreaId);
            writer.AddAttribute(HtmlTextWriterAttribute.Type, "hidden");
            writer.RenderBeginTag(HtmlTextWriterTag.Input);
            writer.RenderEndTag();
            //输出JS【当选择省份时，城市变化效果】
            StringBuilder sb = new StringBuilder();
            sb.Append("\n");
            sb.Append("<script type=\"text/javascript\">\n");
            sb.Append("var area_json = " + JsonConvert.SerializeObject(dt) + ";\n");
            sb.Append("$(\"#SelectProvince\").change(function(){\n");
            sb.Append("     var ParentId = $(this).val();\n");
            sb.Append("     if(ParentId == \"\")return false;//如果父菜单为空，取消联动\n");
            sb.Append("     $(\"#AreaId\").val(ParentId);\n");
            sb.Append("     $(\"#SelectCity option:gt(0)\").remove();\n");
            sb.Append("     $.each(area_json, function(i, o){\n");
            sb.Append("         if(o[\"ParentId\"] == ParentId){\n");
            sb.Append("             $(\"#SelectCity\").append(\"<option value=\\\"\" + o[\"Id\"] + \"\\\">\" + o[\"AreaName\"] + \"</option>\");\n");
            sb.Append("         }\n");
            sb.Append("     });\n");
            sb.Append("});\n");
            sb.Append("$(\"#SelectCity\").change(function(){\n");
            sb.Append("     $(\"#AreaId\").val($(this).val());\n");
            sb.Append("});\n");
            sb.Append("</script>");
            writer.Write(sb.ToString());
        }
        /// <summary>
        /// 初始化父菜单和子菜单
        /// </summary>
        /// <param name="Id"></param>
        /// <returns></returns>
        private void MyInit()
        {
            DataRow[] dr = dt.Select("Id='" + this.AreaId + "'");
            if (dr.Length == 0)
            {
                this.ParentId = "";
                this.AreaId = "";
            }
            else
            {
                if (string.IsNullOrEmpty(dr[0]["ParentId"].ToString()))
                {
                    this.ParentId = this.AreaId;
                    this.AreaId = "";
                }
                else
                {
                    this.ParentId = dr[0]["ParentId"].ToString();
                }
            }
        }
        /// <summary>
        /// 获取省份
        /// </summary>
        /// <returns></returns>
        private DataRow[] GetProvince()
        {
            DataRow[] dr = dt.Select("ParentId=''", "AreaOrd asc");
            return dr;
        }
        /// <summary>
        /// 根据省份获取城市
        /// </summary>
        /// <param name="ParentId"></param>
        /// <returns></returns>
        private DataRow[] GetCityByProvince()
        {
            DataRow[] dr = dt.Select("ParentId='" + (string.IsNullOrEmpty(this.ParentId) ? "xx" : this.ParentId) + "'", "AreaOrd asc");
            return dr;
        }
    }
}

以上是CS文件。你只需要在WEB.CONFIG文件里面添加引用就可以了，如下：

    <pages>
      <controls>
        <add tagPrefix="CC" assembly="DistributionCenter.CustomControl" namespace="DistributionCenter.CustomControl"/>
      </controls>
    </pages>

这样，在工具箱里就会出现自己定义的控件了。

 

 

 

里面的JS使用了JQUERY，所以如果想使用，必须引用JQUERY文件。

我直接把JS用代码输出来了，不知道这样好不好？如果把JS独立出来，包括JSON数据也独立出来，放在JS文件里面，然后再引用，网页打开速度肯定会稍微快点。但是这样就不是有效封装了。