浅谈WebControl中的ScriptManager与ClientScriptManager的区别（附上一个弹出多选的控件源代码）

在asp.net中经常要写些特殊的WebControl，并应用到不同的场合，偶然发现将自己写的控件放置到ajax的UpdatePanel中就出错。

经过不断的调试和翻阅msdn，原来是正常使用Page刷新时可以页面向客户端注册脚本块，而在UpdatePanel刷新时不能注册它以外的内容，所以在updatePanel中的控件没有将js资源文件注册到客户端。

于是就产生了ScriptManager与ClientScript的区别

1. System.Web.UI.ScriptManager

          为 Web 和应用程序服务管理 ASP.NET AJAX 脚本库和脚本文件、部分页面呈现以及客户端代理类生成。

         

          向客户端注册资源文件的方法：RegisterClientScriptResource

          每次发生回发时都向 System.Web.UI.ScriptManager 控件注册嵌入程序集中的客户端脚本文件。

          

          向客户端注册启动脚本块的方法：RegisterStartupScript

          为每个异步回发向 System.Web.UI.ScriptManager 控件注册一个启动脚本块，并将该脚本块添加到页面中。

          

 

   2.   System.Web.UI.Control.Page.ClientScript （返回一个System.Web.UI.ClientScriptManager）

     

          获取用于管理脚本、注册脚本和向页添加脚本的 System.Web.UI.ClientScriptManager 对象

 

          向客户端注册资源文件的方法：RegisterClientScriptInclude

          使用类型、键和 URL 向 System.Web.UI.Page 对象注册客户端脚本包含。

 

          向客户端注册启动脚本块的方法：RegisterStartupScript

          使用类型、键、脚本文本和指示是否添加脚本标记的布尔值向 System.Web.UI.Page 对象注册启动脚本。          

 

 

通过以上的定义，就会发现ScriptManager适用在特殊的场合，那么我们在控件中如何来进行区分应该使用哪一个呢？其实可以通过寻找控件的parent，判断是否有updatepanel，如果有就用ScriptManager；没有的话当然用ClientScript，避免每次postback操作时控件都要进行资源文件的注册。

 

贴出代码如下：（弹出多选的CheckBox功能控件）

 

1.CS文件

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Drawing;

namespace WebUI
{
    [DefaultProperty("Text")]
    [ToolboxData("<{0}:DropdownCheckBoxListControl runat=server></{0}:DropdownCheckBoxListControl>")]
    public class DropdownCheckBoxListControl : WebControl
    {
        private TextBox InputTextBox;
        private CheckBoxListAssistant InputChechBoxList;
        private AjaxControlToolkit.PopupControlExtender PopupControl;
        private string _inputText;
        private Unit _displayHeight;
        private Unit _displayWidth;
        private Unit _dropHeight;
        private Unit _dropWidth;

        public virtual string DisplayInputText
        {
            get { return _inputText; }
            set { 
                _inputText = value;
                if (InputTextBox != null){
                    InputTextBox.Text = _inputText;
                }
            }
        }

        public virtual ListItemCollection Items
        {
            get { return InputChechBoxList.Items; }
        }

        public virtual ListItemCollection CheckedItems
        {
            get { 
                ListItemCollection lists = new ListItemCollection();
                foreach(ListItem li in InputChechBoxList.Items)
                {
                    lists.Add(li);
                }
                return lists;
            }
        }

        public Unit DisplayHeight
        {
            get { return _displayHeight == Unit.Empty ? new Unit("17px") : _displayHeight; }
            set { _displayHeight = value; }
        }
        public Unit DisplayWidth
        {
            get { return _displayWidth == Unit.Empty ? new Unit("100px") : _displayWidth; }
            set { _displayWidth = value; }
        }
        public Unit DropHeight
        {
            get { return _dropHeight == Unit.Empty ? new Unit("150px") : _dropHeight; }
            set { _dropHeight = value; }
        }
        public Unit DropWidth
        {
            get { return _dropWidth == Unit.Empty ? new Unit("100px") : _dropWidth; }
            set { _dropWidth = value; }
        }

        public virtual string DataValueField
        {
            get { return InputChechBoxList.DataValueField; }
            set { InputChechBoxList.DataValueField = value; }
        }

        public virtual string DataTextField
        {
            get { return InputChechBoxList.DataTextField; }
            set { InputChechBoxList.DataTextField = value; }
        }

        public virtual object DataSource
        {
            get { return InputChechBoxList.DataSource; }
            set { InputChechBoxList.DataSource = value; }
        }

        public override void DataBind()
        {
            InputChechBoxList.DataBind();
        }

        public DropdownCheckBoxListControl()
        {
            
        }

        protected override void OnInit(EventArgs e)
        {
            base.OnInit(e);
            InputTextBox = new TextBox();
            InputChechBoxList = new CheckBoxListAssistant();
            PopupControl = new AjaxControlToolkit.PopupControlExtender();
            InputChechBoxList.Style.Add(HtmlTextWriterStyle.BackgroundColor, "#cccccc");
            InputTextBox.Style.Add(HtmlTextWriterStyle.VerticalAlign, "top");
            InputChechBoxList.Style.Add(HtmlTextWriterStyle.TextOverflow, "scroll");
            InputTextBox.ID = this.ClientID + "_InputTextBox";
            InputChechBoxList.ID = this.ClientID + "_InputChechBoxList";
            PopupControl.ID = this.ClientID + "_PopupControl";
            
            InputTextBox.Width = this.DisplayWidth;
            InputTextBox.Height = this.DisplayHeight;
            InputChechBoxList.Width = this.DropWidth;
            InputChechBoxList.DivHeight = this.DropHeight;
            if (!String.IsNullOrEmpty(_inputText))
            {
                InputTextBox.Text = _inputText;
            }

            PopupControl.OffsetY = Convert.ToInt32(InputTextBox.Height.Value);
            PopupControl.TargetControlID = InputTextBox.ID;
            PopupControl.PopupControlID = InputChechBoxList.ID + "_div";

            this.PreRender += new EventHandler(DropdownTreeViewControl_PreRender);

            this.Controls.Add(InputTextBox);
            this.Controls.Add(InputChechBoxList);
            this.Controls.Add(PopupControl);
        }

        public static string GetChildControlPrefix(Control control)
        {
            if (control.NamingContainer.Parent == null)
            {
                return control.ID;
            }
            else
            {
                return String.Format("{0}_{1}", control.NamingContainer.ClientID, control.ID);
            }
        }

        void DropdownTreeViewControl_PreRender(object sender, EventArgs e)
        {
            bool isPage = true;
            Control c = this.Parent;
            while(c != null)
            {
                if (c is Page)
                {
                    isPage = true;
                    break;
                }
                else if (c is UpdatePanel)
                {
                    isPage = false;
                    break;
                }
                else
                {
                    c = c.Parent;
                }
            }

            if (!isPage)
            {
                ScriptManager.RegisterClientScriptResource(
                        this.Page,
                        this.GetType(),
                        "WebUI.Resources.DropdownCheckBoxListControl.js"
                    );

                ScriptManager.RegisterStartupScript(
                this.Page,
                this.GetType(),
                String.Format("ChechHelper_{0}", this.ID),
                String.Format("ChechHelper.register(\"{0}\",\"{1}\");", this.InputTextBox.ClientID, this.InputChechBoxList.ClientID),
                true
                );
            }
            else
            {
                if (!this.Page.ClientScript.IsClientScriptIncludeRegistered(this.GetType(), "_ChechHelper"))
                {
                    this.Page.ClientScript.RegisterClientScriptInclude(
                    this.GetType(),
                    "_ChechHelper",
                    this.Page.ClientScript.GetWebResourceUrl(
                        this.GetType(), "WebUI.Resources.DropdownCheckBoxListControl.js"
                        )
                    );
                }

                this.Page.ClientScript.RegisterStartupScript(
                    this.GetType(),
                    String.Format("ChechHelper_{0}", this.ID),
                    String.Format("ChechHelper.register(\"{0}\",\"{1}\");", this.InputTextBox.ClientID, this.InputChechBoxList.ClientID),
                    true
                    );
            }
        }
        
        protected override void RenderContents(HtmlTextWriter output)
        {
            base.RenderContents(output);
        }

        protected override void CreateChildControls()
        {
            base.CreateChildControls();
        }

        protected override void RenderChildren(HtmlTextWriter writer)
        {
            base.RenderChildren(writer);
        }
    }
}

 

 

2.资源文件

 

if(!this.ChechHelper){
    ChechHelper = function(){
        var helpers = new Array();
        function _chechHelper(){
            var me = this;
            this._inputTextID = null;
            this._checkBoxListID = null;
            this._separator = ",";
            this.setInputTextID = function(e) { me._inputTextID = e; }
            this.setcheckBoxListID = function(e) { me._checkBoxListID = e; }
            this.setSeparator = function(e) { me._separator = e; }
            
            this.oncheckClick = function(e){
                var evt = e || window.event; // FF || IE
                var obj = evt.target || evt.srcElement  // FF || IE
                me.getChechedText();
            }
           
            this.getChechedText = function(){
                var text = document.getElementById(me._inputTextID);
                text.value = "";
                var check = document.getElementById(me._checkBoxListID);
                if(check == null){
                    return;
                }
                var es = check.getElementsByTagName("INPUT");
                for (i=0; i< es.length; i++){       
                    if (es[i].type == "checkbox") {
                        if(es[i].checked){
                            if(text.value.length > 0){
                                text.value += me._separator;
                            }
                            var td = es[i].parentElement;
                            var las = td.getElementsByTagName("LABEL");
                            if(las != null && las.length > 0) {
                                text.value += las[0].innerHTML;
                            }
                        }
                    }
                }
            }
            
            this.init = function(){ 
                var check = document.getElementById(me._checkBoxListID);
                if(check == null){
                    return;
                }
                var es = check.getElementsByTagName("INPUT");
                for (i=0; i< es.length; i++){       
                    if (es[i].type == "checkbox") {
                        es[i].attachEvent("onclick",me.oncheckClick);
                    }
                }
            }
        }
        
        return {
            register: function(inputID,checkBoxListID) {
                var th = new _chechHelper();
                th.setInputTextID(inputID);
                th.setcheckBoxListID(checkBoxListID);
                th.init();
                helpers.push(th);
            }
        }
    }();
}