一个城市自定义控件

抽点时间写了一个自定义空间,功能是这样的,实现省份,城市的级联更新.数据源是数据库,设计思路是这样的,利用prototype1.5 提供的AJAX功能实现控件级联无刷新功能,请求一个Httphandler,读取数据.

控件呈现:

 

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Text;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Ucar.Common;
using System.Data;
using Ucar.Components.Caching;

namespace BitAuto.Ucar.CarSelectSortData
...{
    [DefaultProperty("Text")]
    [ToolboxData("<{0}:CitySelect runat=server></{0}:CitySelect>")]
    public class CitySelect : WebControl, INamingContainer, IPostBackDataHandler
    ...{
        private string _validationExpression = @"^[1-9]d*$";

        /**//// <summary>
        /// 控件集合
        /// </summary>
        private Label lblProvince = new Label();
        private DropDownList dropProvince = new DropDownList();
        private Label lblCity = new Label();
        private DropDownList dropCity = new DropDownList();

        private RegularExpressionValidator valeCityValue = new RegularExpressionValidator();

        //控件属性#region //控件属性
        /**//// <summary>
        /// 城市ID
        /// </summary>
        [Bindable(true)]
        [Category("Value")]
        [DefaultValue("0")]
        [Localizable(true)]
        [Description("Value")]
        public string Value
        ...{
            get
            ...{
                if (this.CityId == 0 || this.CityId == -1)
                ...{
                    return string.Empty;
                }
                return ConvertHelper.GetString(this.CityId);
            }

            set
            ...{
                ViewState["Value"] = value;
            }
        }

        /**//// <summary>
        /// 省份ID
        /// </summary>
        [Bindable(true)]
        [Category("省份ID")]
        [DefaultValue("0")]
        [Localizable(true)]
        [Description("省份ID")]
        public int ProvinceId
        ...{
            get
            ...{
                return ConvertHelper.GetInteger(ViewState["ProvinceId"]);
            }

            set
            ...{
                ViewState["ProvinceId"] = value;
            }
        }

        /**//// <summary>
        /// 城市ID
        /// </summary>
        [Bindable(true)]
        [Category("城市ID")]
        [DefaultValue("0")]
        [Localizable(true)]
        [Description("城市ID")]
        public int CityId
        ...{
            get
            ...{
                return ConvertHelper.GetInteger(ViewState["CityId"]);
            }

            set
            ...{
                ViewState["CityId"] = value;
            }
        }

        /**//// <summary>
        /// 布局方式
        /// </summary>
        [Bindable(true)]
        [Category("布局方式")]
        [DefaultValue("Horizontal")]
        [Localizable(true)]
        [Description("布局方式")]
        public RepeatDriections RepeatDriection
        ...{
            get
            ...{
                if (ViewState["RepeatDriection"] == null)
                ...{
                    return RepeatDriections.Horizontal;
                }
                return (RepeatDriections)ViewState["RepeatDriection"];
            }

            set
            ...{
                ViewState["RepeatDriection"] = value;
            }
        }

        /**//// <summary>
        /// 省份样式
        /// </summary>
        [Bindable(true)]
        [Category("省份样式")]
        [DefaultValue("")]
        [Localizable(true)]
        [Description("省份样式")]
        public string ProvinceCssClass
        ...{
            get
            ...{
                return ConvertHelper.GetString(ViewState["ProvinceCssClass"]);
            }

            set
            ...{
                ViewState["ProvinceCssClass"] = value;
            }
        }

        /**//// <summary>
        /// 城市样式
        /// </summary>
        [Bindable(true)]
        [Category("城市样式")]
        [DefaultValue("")]
        [Localizable(true)]
        [Description("城市样式")]
        public string CityCssClass
        ...{
            get
            ...{
                return ConvertHelper.GetString(ViewState["CityCssClass"]);
            }

            set
            ...{
                ViewState["CityCssClass"] = value;
            }
        }

        /**//// <summary>
        /// 标签是否可见
        /// </summary>
        [Bindable(true)]
        [Category("标签是否可见")]
        [DefaultValue("True")]
        [Localizable(true)]
        [Description("标签是否可见")]
        public bool LableVisible
        ...{
            get
            ...{
                if (ViewState["LableVisible"] == null)
                ...{
                    return true;
                }
                return ConvertHelper.GetBoolean(ViewState["LableVisible"]);
            }

            set
            ...{
                ViewState["LableVisible"] = value;
            }
        }

        [Category("是否启用非空验证")]
        [DefaultValue(false)]
        [Description("是否启用非空验证")]
        public bool EnabledRequiredFieldValidator
        ...{
            get
            ...{
                return ConvertHelper.GetBoolean(ViewState["EnabledRequiredFieldValidator"]);
            }
            set
            ...{
                ViewState["EnabledRequiredFieldValidator"] = value;
            }
        }

        [Category("验证提示信息")]
        [DefaultValue("请选择城市!")]
        [Description("验证提示信息")]
        public string ErrorMessage
        ...{
            get
            ...{
                return ConvertHelper.GetString(ViewState["ErrorMessage"]);
            }
            set
            ...{
                ViewState["ErrorMessage"] = value;
            }
        }
        [Category("验证分组")]
        [DefaultValue("")]
        [Description("验证分组")]
        public string ValidationGroup
        ...{
            get
            ...{
                return ConvertHelper.GetString(ViewState["ValidationGroup"]);
            }
            set
            ...{
                ViewState["ValidationGroup"] = value;
            }
        }
        #endregion

        protected override void RenderContents(HtmlTextWriter output)
        ...{
            if (this.Page != null)
            ...{
                this.Page.VerifyRenderingInServerForm(this);
            }
            output.AddAttribute(HtmlTextWriterAttribute.Type, "hidden");
            output.AddAttribute(HtmlTextWriterAttribute.Name, this.UniqueID + "_hdProvinceId");
            output.AddAttribute(HtmlTextWriterAttribute.Id, this.UniqueID + "_hdProvinceId");
            output.AddAttribute(HtmlTextWriterAttribute.Value, this.ProvinceId.ToString());
            output.RenderBeginTag(HtmlTextWriterTag.Input);
            output.RenderEndTag();

            output.AddAttribute(HtmlTextWriterAttribute.Type, "hidden");
            output.AddAttribute(HtmlTextWriterAttribute.Name, this.UniqueID);
            output.AddAttribute(HtmlTextWriterAttribute.Id, this.UniqueID + "_hdCityId");
            output.AddAttribute(HtmlTextWriterAttribute.Value, this.CityId.ToString());
            output.RenderBeginTag(HtmlTextWriterTag.Input);
            output.RenderEndTag();
            if (RepeatDriection == RepeatDriections.Vertical)
            ...{
                output.RenderBeginTag(HtmlTextWriterTag.Div);
                output.Write("<DIV class='" + this.ProvinceCssClass + "' >");
                lblProvince.RenderControl(output);
                output.Write("&nbsp;&nbsp;");
                dropProvince.RenderControl(output);
                output.Write("</DIV>");
                output.Write("<DIV class='" + this.CityCssClass + "' >");
                lblCity.RenderControl(output);
                output.Write("&nbsp;&nbsp;");
                dropCity.RenderControl(output);
                output.Write("</DIV>");
            }
            else
            ...{
                output.RenderBeginTag(HtmlTextWriterTag.Div);
                lblProvince.RenderControl(output);
                output.Write("&nbsp;&nbsp;");
                dropProvince.RenderControl(output);
                output.Write("&nbsp;&nbsp;");
                lblCity.RenderControl(output);
                output.Write("&nbsp;&nbsp;");
                dropCity.RenderControl(output);
            }
            valeCityValue.RenderControl(output);
        }

        protected override void CreateChildControls()
        ...{
            //省份标签
            lblProvince.Text = "省份";
            lblProvince.ID = "lblCarProducer";
            lblProvince.Visible = LableVisible;
            this.Controls.Add(lblProvince);

            dropProvince.ID = "dropProvince";
            this.Controls.Add(dropProvince);

            //城市
            lblCity.Text = "城市";
            lblCity.ID = "lblCarBrand";
            lblCity.Visible = LableVisible;
            this.Controls.Add(lblCity);

            dropCity.ID = "dropCity";
            this.Controls.Add(dropCity);

            valeCityValue.ID = "_valeCityValue";

            valeCityValue.ControlToValidate = this.dropCity.ID;
            valeCityValue.Display = ValidatorDisplay.None;
            valeCityValue.ErrorMessage = this.ErrorMessage;
            valeCityValue.ValidationExpression = _validationExpression;
            valeCityValue.ValidationGroup = this.ValidationGroup;
            valeCityValue.SetFocusOnError = true;
            valeCityValue.Enabled = this.EnabledRequiredFieldValidator;
            this.Controls.Add(valeCityValue);

            dropProvince.Attributes.Add("onchange", "cityLoad(" + this.dropProvince.ClientID + "," + this.dropCity.ClientID + "," + this.UniqueID + "_hdProvinceId" + "," + this.UniqueID + "_hdCityId" + ");");
            dropCity.Attributes.Add("onchange", "SetCityID(" + this.UniqueID + "_hdCityId" + "," + this.dropCity.ClientID + ");");
        }

        protected override void OnInit(EventArgs e)
        ...{
            Page.RegisterRequiresControlState(this);
            Page.ClientScript.RegisterClientScriptResource(typeof(CitySelect), "BitAuto.Ucar.CarSelectSortData.prototype1.5.1.js");
            Page.ClientScript.RegisterClientScriptResource(typeof(CitySelect), "BitAuto.Ucar.CarSelectSortData.CityChange.js");
            base.OnInit(e);
        }

        protected override void OnPreRender(EventArgs e)
        ...{
            InitProvince();
            if (this.CityId != 0)
            ...{
                this.ProvinceId = City.GetProvinceIdByCityId(this.CityId);
            }
            if (this.ProvinceId != 0)
            ...{
                dropProvince.SelectedValue = ProvinceId.ToString();
            }
            InitCity();
            if (CityId != 0)
            ...{
                ControlHelper.InitDropDownListByValue(dropCity, CityId.ToString());
                //dropCity.SelectedValue = CityId.ToString();
                //dropCity.SelectedIndex = dropCity.Items.IndexOf(dropCity.Items.FindByValue(CityId.ToString()));
            }
            base.OnPreRender(e);
        }

        IPostBackDataHandler 成员#region IPostBackDataHandler 成员
        public bool LoadPostData(string postDataKey, System.Collections.Specialized.NameValueCollection postCollection)
        ...{
            string presentValue = this.ProvinceId.ToString();
            string postedValue = postCollection[this.UniqueID];
            string postedProvinceValue = postCollection[this.UniqueID + "_hdProvinceId"];
            if (presentValue == null || !presentValue.Equals(postedValue))
            ...{
                this.CityId = ConvertHelper.GetInteger(postedValue);
                this.ProvinceId = ConvertHelper.GetInteger(postedProvinceValue);
                return true;
            }

            return false;
        }

        public void RaisePostDataChangedEvent()
        ...{
        }

        #endregion

        //绑定方法#region //绑定方法
        protected void InitProvince()
        ...{
            dropProvince.Items.Clear();
            DataView dv = City.GetProvinceCache();
            dv.RowFilter = "pvc_Id<>0";
            dropProvince.DataTextField = "pvc_Name";
            dropProvince.DataValueField = "pvc_Id";
            dropProvince.DataSource = dv;
            dropProvince.DataBind();
            dropProvince.Items.Insert(0, new ListItem("请选择省份", ""));
        }

        protected void InitCity()
        ...{
            dropCity.Items.Clear();
            DataView dvCity = City.GetCityCache();
            if (this.ProvinceId != 0)
            ...{
                dvCity.RowFilter = "pvc_Id=" + dropProvince.SelectedValue;
                dropCity.DataTextField = "city_Name";
                dropCity.DataValueField = "city_Id";
                dropCity.DataSource = dvCity;
                dropCity.DataBind();
            }
            dropCity.Items.Insert(0, new ListItem("请选择城市", "0"));
        }
        #endregion

        /**//// <summary>
        /// 布局方式
        /// </summary>
        public enum RepeatDriections
        ...{
            Vertical,//垂直
            Horizontal//水平
        }
    }
}

 

Handler实现:

 

using System;
using System.Collections.Generic;
using System.Text;
using System.Data;
using System.Web;
using Ucar.Common;
using Ucar.Components.Caching;

namespace BitAuto.Ucar.CarSelectSortData
...{
    public class CityHandler : IHttpHandler
    ...{
        IHttpHandler 成员#region IHttpHandler 成员

        public bool IsReusable
        ...{
            get ...{ throw new Exception("The method or operation is not implemented."); }
        }

        public void ProcessRequest(HttpContext context)
        ...{
            OutputCity(context);
        }

        #endregion
        /**//// <summary>
        /// 输出
        /// </summary>
        protected void OutputCity(HttpContext context)
        ...{
            string ProvinceIdStr =  context.Request["ProvinceId"];
            if (!string.IsNullOrEmpty(ProvinceIdStr))
            ...{
                DataView dvCity = City.GetCityCacheByProvinceId(ProvinceIdStr);
                StringBuilder sb = new StringBuilder();
                int i = 0;
                for (i = 0; i < dvCity.Table.Rows.Count; i++)
                ...{
                    sb.Append(dvCity.Table.Rows[i]["city_Name"] + "," + dvCity.Table.Rows[i]["city_Id"] + ",");
                }
                 context.Response.Write(sb.ToString().TrimEnd(','));
            }
        }

    }

}

JS:

 

 function cityLoad(dropProvinceid,dropCityid,hdProvinceId,hdCityId)
    ...{
        var father= $F(dropProvinceid);
        $(hdProvinceId).value=father;
        $(hdCityId).value = '';
        if(father!=0)
        ...{
            var url = "~/AjaxCity.aspx";
            var pars = "provinceID=" + father;
            var myAjax = new Ajax.Request(url,...{method: 'get', parameters: pars, onComplete:function(originalRequest)...{showResponse(originalRequest,dropCityid)}});
         }
         else
         ...{
            var sel = $(dropCityid);
            sel.update("");
            CreatOptions(sel,"请选择城市","");
         }
    }
    function SetCityID(hdCityId,dropCity)
    ...{
        $(hdCityId).value=$F(dropCity);
    }
    function showResponse(result,dropCityid)
    ...{
        var sel = $(dropCityid);
        var val = result.responseText.split(',');
        sel.update("");
        CreatOptions(sel,"请选择城市","");
        for(i=0;i<val.length;i++)
        ...{
            text = val[i];
            value = val[++i];
            CreatOptions(sel,text,value);
        }
    }
    function CreatOptions(colls,text,value)
    ...{
        colls.options.add(new Option(text,value));
    }

在使用的时候配下hander和连接字符串.

 

<httpHandlers>
            <remove verb="*" path="*.asmx"/>
            <add verb="*" path="AjaxCity.aspx" validate="false" type="BitAuto.Ucar.CarSelectSortData.CityHandler,BitAuto.Ucar.CarSelectSortData"/>
        </httpHandlers>