学习扎记 TextBox 组件

今天继续学习老赵视频“ASP.NET AJAX深入浅出系列课程(22)：利用Microsoft AJAX Library开发客户端组件(中)”以下代码是完全按照老赵视频上敲出来的！

依葫芦画瓢我也敲错了啊！所以我觉得虽然是按照别人的代码敲一遍也是很有必要的！以下代码可运行！

下面代码有点小bug, 当第一次进去textbox,在失去焦点,在进入随便输入字符, 点击模式窗口的cancel, 则textbox显示null，应该显示 “” . [坚持每天学习

ajax

]

//注册 namespace Demo
Type.registerNamespace("Demo");

Demo.TextBox = function(element) {
    //每次都要先调用initializeBase这个方法?
    Demo.TextBox.initializeBase(this,[element]);//传到父类
    this._originalText = null;
}
Demo.TextBox.prototype = {
    initialize: function() {
        //覆盖父类的initialize方法;
        Demo.TextBox.callBaseMethod(this, "initialize");
        //为textbox添加了change事件
        $addHandler(this.get_element(), "change", Function.createDelegate(this, this._onTextChange));
    },
    _onTextChange: function(e) {
        //如果正在更新,则退出 [避免循环调用]
        if (this.get_isUpdating()) { return; }
        //获取textChange事件 [即:onTextChange()事件]
        var handler = this.get_events().getHandler("textChange");
        if (handler) {
            var args = new Sys.CancelEventArgs();
            handler(this, args); //调用onTextChange函数
            if (args.get_cancel()) {
                this.beginUpdate();
                this.set_text(this._originalText); //设置textbox的值
                this.endUpdate();
            }
        }
        //修改值
        this._originalText = this.get_element().value;
    },
    add_textChange: function(handler) {
        this.get_events().addHandler("textChange", handler);
    },
    remove_textChange: function(handler) {
        this.get_events().removeHandler("textChange", handler);
    },
    get_text: function() {
        return this.get_element().value;
    },
    set_text: function(value) {
        this.get_element().value = value;
    }
};
//注册为 UI 控件
Demo.TextBox.registerClass("Demo.TextBox",Sys.UI.Control);

-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>AJAX Libray</title>
</head>
<body>
    <form >
    <asp:ScriptManager runat="server" ID="sm">
        <Scripts>
            <asp:ScriptReference Path="~/js/textbox.js" />
        </Scripts>
    </asp:ScriptManager>
    <div >
    </div>
    <input  />
    <input  />
    
    <script type="text/javascript">
        //页面初始化化时
        Sys.Application.add_init(function() {
            //这里注册textChange    事件,
            $create(Demo.TextBox, {}, { "textChange": onTextChange }, null, $get("textBox"));
            $create(Demo.TextBox, {}, { "textChange": onTextChange }, null, $get("textbox2"));
        });
        onTextChange = function(sender, args) {
        //sender:即为触发该事件的 元素[如果textBox调用,则sender=textbox]
        //这里的args 为textbox.js 里面的 var args = new Sys.CancelEventArgs();
            var msg = "are you sure chang?" + sender.get_text();
            if (!confirm(msg)) {
                args.set_cancel(true); //?
            }
        }
    </script>
    </form>
</body>
</html>