帮助调试 Ajax 服务器控制客户端脚本

Question

我正在 VS 2010 中的 ASP.NET C# 4.0 中编写一个 Ajax 服务器控件。

手工编写 javascript 原型类后，我不知道如何编译和调试文件。看看为什么我的“onclick”事件不起作用。

我正在通过继承 Control & 来创建 Ajax 服务器控件。 IScriptControl，并尝试让 onclick 事件处理程序正常工作。写的控件实际上是一个“DIV”。有人能告诉我为什么它不起作用吗？

谢谢

public class FrebbleSquare : Control, IScriptControl 
    {
.
.
.
IEnumerable<ScriptReference> IScriptControl.GetScriptReferences()
        {
            ScriptReference oRef1 = new ScriptReference("FrebbleAjaxControls.FrebbleSquare.js", this.GetType().Assembly.ToString());
            ScriptReference oRef2 = new ScriptReference("FrebbleAjaxControls.prototype.js", this.GetType().Assembly.ToString());
            ScriptReference oRef3 = new ScriptReference("FrebbleAjaxControls.scriptaculous.js", this.GetType().Assembly.ToString());
            ScriptReference oRef4 = new ScriptReference("FrebbleAjaxControls.effects.js", this.GetType().Assembly.ToString());

            return new ScriptReference[] { oRef1, oRef2, oRef3, oRef4 };
        }


        IEnumerable<ScriptDescriptor> IScriptControl.GetScriptDescriptors()
        {
            ScriptControlDescriptor descriptor = new ScriptControlDescriptor("FrebblesAjax.FrebbleSquare", this.ClientID);

            return new ScriptDescriptor[] { descriptor };
        }

}


JAVASCRIPT CLIENT FILE :


Type.registerNamespace('FrebblesAjax');

FrebblesAjax.FrebbleSquare = function (element) {

    FrebblesAjax.FrebbleSquare.initializeBase(this, [element]);


}


FrebblesAjax.FrebbleSquare.prototype =
{
    initialize: function () {

        FrebblesAjax.FrebbleSquare.callBaseMethod(this, 'initialize');

        this._onclickHandler = Function.createDelegate(this, this._onClick);

        $addHandlers(this.get_element(),
                     { 'click': this._onClick,
                     },
                     this);

    },

    dispose: function () {

        $clearHandlers(this.get_element());

        FrebblesAjax.FrebbleSquare.callBaseMethod(this, 'dispose');
    },

    _onClick: function (e) {

        alert('it worked!');

    }

}


FrebblesAjax.FrebbleSquare.registerClass('FrebblesAjax.FrebbleSquare', Sys.UI.Control);

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

Answer 1

如果您可以使用 Firefox，请下载 Firebug 扩展。页面加载后，右键单击您创建的元素并选择“检查元素”。这样您就可以看到 DOM 当前存在的所有结构、属性和功能。当您使用 JavaScript 时，这通常比“查看源代码”更好。您应该能够查看绑定了哪些事件处理程序并在 JavaScript 调试器中设置断点。