javascript - ASP.NET WebForms : How to access Javascript in invisible, 在通过 UpdatePanel 可见后未呈现？

Question

我知道这似乎不切实际，但我真的更喜欢这样做，因为我正在重新构建此 WebForms 页面以满足紧急的、最后一刻的业务需求。

我有一个自定义用户控件。在此用户控件中是一个 Javascript block ，其中包含连接到各种控件的函数'onclick和 onchange事件。之前，控件的 .Visible属性(property)已True ，因此它的 HTML 和 Javascript 将呈现在页面上。

现在我需要设置我的控件的 .Visible属性(property)false并在其周围包裹一个 UpdatePanel。这样做可以防止控件的 HTML 在初始页面加载期间呈现。要显示控件的内容，用户必须单击一个按钮，该按钮会触发设置控件的 .Visible 的服务器端方法。属性(property)true .由于它现在位于 UpdatePanel 中，因此该控件以一种 Ajaxy 方式出现在页面上。但是，位于控件中的 Javascript 似乎不可访问，因此没有子控件的 onclick和 onchange事件正在运行，因为它们的关联 Javascript 函数是 undefined .

由于过于复杂而无法为简洁起见，我不想使用的解决方案:

• JSON/AJAX(在这么短的时间内涉及太多的重构)
• CSS display:none/visibility:visible(我需要尽可能多地保留服务器端功能，以尽量减少重构)
• 将 Javascript 放在父页面或 .js 文件中(我会认为这是最后的手段，但我使用 <#%=ControlId.ClientID %> 引用服务器控件。如果 Javascript 不包含在 UserControl 和我不想将控件的 ClientIdMode 设置为 static。)

我真的很想找到一种方法将 Javascript 保留在我的 UserControl 中，以便在 UpdatePanel 设置控件的 .Visible 时客户端可以访问它。属性(property)true通过使用 UpdatePanel。

Answer 1

最简单的方法是将 javascript 作为大字符串包含在代码后面并在加载时注册:

        protected void Page_Load(object sender, EventArgs e)
        {
            string javasriptToRegister = @"
  function MyAwesomeJavaScriptFunction() {
     alert( document.getElementById('" + this.txtCatName.ClientID + @"').value );
  }";
            ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "MyControlsJavaScript", javasriptToRegister, true);
        }

这绝不是完成它的最干净的方法，但它会起作用。

如果您想做得更干净一些，您可能需要包含一个外部 javascript 文件，其中包含一个表示您的控件的单例或原型(prototype)对象(取决于您的用例)。然后，您可以在一个较小的脚本中将对象/单例的属性设置为您的客户端 ID，就像我们上面所做的那样。例如:

Javascript:

function MyControlScriptModel() {
  this.txtCatNameClientId = '';
  this.othercontainedValue = 0;
  this.anothercontainedValue = 0;
}

MyControlScriptModel.prototype.DoSomethingWithCatName = function () {
  alert( document.getElementById( this.txtCatNameClientId ).value );
}

代码隐藏:

        protected void Page_Load(object sender, EventArgs e)
        {
            string javasriptToRegister = string.Format(@"var obj = new MyControlScriptModel();
                                                         obj.txtCatNameClientId = '{0}';", this.txtCatNameClientId);
            ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "MyControlsJavaScript", javasriptToRegister, true);
        }