• 学习打造自己的AJAX控件!


        开始学习打造属于自己的AJAX控件!本文先打造一个简单的文本框控件,实现当鼠标移上文本框时,文本框高亮显示。
    以后再扩展其他功能,如正则表达式的验证,输入匹配等功能!那就开始吧!
        首先我们建一个类库命名为Ajax.MyControls,然后新建一个类文件,我们命名为MyTextBox,再建立一个MyTextBox.js并将其文件嵌入资源.
        接着开始我们的打造之路。打开MyTextBox类,
    引入下列命名空间。
    using System;
    using System.Collections.Generic;
    using System.Text;
    using System.Web;
    using System.Web.UI;
    using System.Security.Permissions;
    using System.ComponentModel;
    using System.Diagnostics;
    using System.Web.UI.WebControls;
    设置其继承Control,IScriptControl接口。
    不好意思,来到这里我插入不了代码,点那按钮N久没出来,只能这样帖出来了,看起来比较痛苦!没办法!

    [assembly: WebResource("Ajax.MyControls.MyTextBox.js", "text/javascript")]
    namespace Ajax.MyControls
    {
        [AspNetHostingPermission(SecurityAction.Demand, Level = AspNetHostingPermissionLevel.Minimal)]
        [AspNetHostingPermission(SecurityAction.InheritanceDemand, Level = AspNetHostingPermissionLevel.Minimal)]
        [ToolboxData("<{0}:MyTextBox runat=\"server\"></{0}:MyTextBox>")]
        public class MyTextBox:Control,IScriptControl
        {
           
            public MyTextBox()
            {
            }
        }

    }

    Control,IScriptControl

    下面开始定义改控件的属性
      #region 所有属性
            [Category("样式")]
            [DefaultValue("textbox")]
            [Description("控件的样式")]
            public string CssClass
            {
                [DebuggerStepThrough()]
                get
                {
                    object obj = ViewState["cssClass"];
                    return (obj == null) ? "textbox" : (string)obj;
                }
                [DebuggerStepThrough()]
                set
                {
                    ViewState["cssClass"] = value;
                }
            }


            [Category("样式")]
            [DefaultValue("textbox")]
            [Description("控件高亮时的样式")]
            public string HighLightCssClass
            {
                [DebuggerStepThrough()]
                get
                {
                    object obj = ViewState["HighLightCssClass"];
                    return (obj == null) ? "HighLight" : (string)obj;
                }
                [DebuggerStepThrough()]
                set
                {
                    ViewState["HighLightCssClass"] = value;
                }
            }

            [Category("高级")]
            [DefaultValue("")]
            [Description("控件的文本值")]
            public string Text
            {
                [DebuggerStepThrough()]
                get
                {
                    object obj = ViewState["Text"];
                    return (obj == null) ? string.Empty : (string)obj;
                }
                [DebuggerStepThrough()]
                set
                {
                    ViewState["Text"] = value;
                }
            }

          
          
            #endregion

    下面重写方法
      [System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Security", "CA2109:ReviewVisibleEventHandlers")]
            protected override void OnPreRender(EventArgs e)
            {
                base.OnPreRender(e);

                ScriptManager scriptManager = ScriptManager.GetCurrent(this.Page);
                if (scriptManager == null)
                {
                    throw new InvalidOperationException("页面必须存在一个ScriptManager控件.");
                }
                scriptManager.RegisterScriptControl(this);
            }
            

            protected override void Render(HtmlTextWriter writer)
            {
              
                writer.AddAttribute(HtmlTextWriterAttribute.Id, this.ClientID);                    

              
                if (!string.IsNullOrEmpty(this.Text))
                {
                    writer.AddAttribute(HtmlTextWriterAttribute.Value, this.Text);
                }
              
                writer.AddAttribute(HtmlTextWriterAttribute.Type, "text");
          if (!string.IsNullOrEmpty(this.HighLightCssClass))
                {
                     writer.AddAttribute("onfocus", "this.className ='" + this.HighLightCssClass + "'; ");
                } //在这里我们设置获取鼠标事件时显示高亮的样式
             
                if (!string.IsNullOrEmpty(this.CssClass))
                {
                    writer.AddAttribute("onblur", "this.className = '" + this.CssClass + "'; ");
                }//在这里我们设置失去鼠标事件时显示原来的样式
                writer.RenderBeginTag(HtmlTextWriterTag.Input);
                writer.RenderEndTag();               
              

                if (!this.DesignMode)
                {
                    ScriptManager.GetCurrent(this.Page).RegisterScriptDescriptors(this);
                }
            }
                      
            public IEnumerable<ScriptDescriptor> GetScriptDescriptors()
            {
                ScriptControlDescriptor desc = new ScriptControlDescriptor(this.GetType().FullName, this.ClientID);

              

                if (!string.IsNullOrEmpty(Text))
                {
                    desc.AddProperty("Text", Text);
                }
                                            

                yield return desc;
            }

            public IEnumerable<ScriptReference> GetScriptReferences()//这里记得发布脚本资源
            {
                yield return new ScriptReference(this.Page.ClientScript.GetWebResourceUrl(this.GetType(), "Ajax.MyControls.MyTextBox.js"));
            }

    基本上这个类就完成了!
    开始JS的编写。

    Type.registerNamespace('Ajax.MyControls');

    Ajax.MyControls.CuteTextBox = function(element)
    {
        this._cssClass = '';
        this._Text = '';
        this._HighLightCssClass='';
      
        Ajax.MyControls.MyTextBox.initializeBase(this, [element]);
    }

    声明属性

    Ajax.MyControls.prototype=
    {
        get_cssClass : function()
        {
             if (arguments.length !== 0) throw Error.parameterCount();

            return this._cssClass;
        },
       
        set_cssClass : function(value)
        {
            var e = Function._validateParams(arguments, [{name: 'value', type: String}]);
            if (e) throw e;

            if (this._cssClass != value)
            {
                this._cssClass = value;
                this.raisePropertyChanged('cssClass');

                var target = this.get_element();

                if (!Sys.UI.DomElement.containsCssClass(target, value))
                {
                    Sys.UI.DomElement.addCssClass(target, value);
                }
            }
        },

    。。。。。。。。。。。。下面的这些属性就不写了,都是一样的,无非就是get,set
    }
    到了后面别忘了注册咯。

    Ajax.MyControls.MyTextBox.registerClass('Ajax.MyControls.MyTextBox', Sys.UI.Control);

    if (typeof(Sys) != 'undefined')
    {
        Sys.Application.notifyScriptLoaded();
    }

    来到这里基本上就差不多了!一些细节,自己调了!
  • 相关阅读:
    java多线程为什么要用while而不是if
    爆竹声响,新人入场
    java多线程状态转换
    java接口的方法默认都是public abstract类型
    java中的静态static关键字
    我的第一个python爬虫程序
    python爬取某些网站出错的解决办法
    spring
    hibernate中文乱码问题
    eclipse(Version: Neon Release (4.6.0))安装hibernate tools
  • 原文地址:https://www.cnblogs.com/anson/p/935331.html
Copyright © 2020-2023  润新知