javascript - 如何向用户控件添加 expando 属性？

Question

我正在现有的 ASP.NET 用户控件中构建一些自定义 javascript 功能。用户控件需要了解它所嵌套的控件的属性。因此，我最终选择使用 expando 属性而不是像这样的全局 javascript 变量:

Page.ClientScript.RegisterExpandoAttribute(Me.ClientID, "validatorsenabled", Me.ValidatorsEnabled)

然而，虽然expando被正确输出到客户端，但是usercontrol本身在HTML中并没有对应的元素。因此，以下由 ASP.NET 自动生成的 JavaScript 会出现“对象为空”错误:

var ctl00_MainContentHolder_Payment_CreditCardInput1 = document.all ? document.all["ctl00_MainContentHolder_Payment_CreditCardInput1"] : document.getElementById("ctl00_MainContentHolder_Payment_CreditCardInput1");
ctl00_MainContentHolder_Payment_CreditCardInput1.validatorsenabled = "False";

我做了一点调查，发现 this page表明实现 IWebPart 接口(interface)可能会成功，但我试过了，但没有成功。

有没有办法让用户控件像服务器控件一样输出标签？或者是将整个事物转换为服务器控件的唯一选择(在这种情况下这违背了网站设计的原则)？

如果有人有任何其他想法，我愿意接受有关在用户控件中声明共享 JavaScript 属性的其他建议。

Answer 1

我发现在我原来的解决方案之后列出了一个更好的解决方案

我找到了解决方法。

似乎(由于我搜索该术语时缺乏响应和结果)绝大多数人都没有意识到 expando 属性及其用途。您知道当您将验证控件添加到 ASP.NET 页面时，您会在页面底部看到一个看起来相当大的 JavaScript block ，它设置了一堆属性(例如启用和错误消息)？这些就是我所指的。它们可以使用 Page.ClientScript.RegisterExpandoAttribute() 方法输出到页面 - 本质上它们是为了使您的标记有效的 HTML，同时允许您添加其他(有意义的)属性以用于 javascript。它们被添加并可以通过 HTML DOM 访问，但它们实际上并不存在于 HTML 中。

无论如何，回到我的解决方案。我只是向 usercontrol 添加了 2 个文字控件 - 一个在最开始，一个在最后，在代码隐藏中我添加了带有 usercontrol ID 的控制元素的标记(因为 usercontrol 不输出一个) .所以标记看起来像这样:

<%@ Control Language="VB" AutoEventWireup="false" CodeFile="CreditCardInput.ascx.vb" Inherits="BVModules_Controls_CreditCardInput" %>
<asp:Literal ID="litControlBegin" runat="server" />

<!-- User Control Content Here -->

<asp:Literal ID="litControlEnd" runat="server" />

然后在代码隐藏中，我这样做了:

Me.litControlBegin.Text = String.Format("<div id=""{0}"" class=""creditcardinput"">", Me.ClientID)
Me.litControlEnd.Text = "</div>"

现在，HTML 中将存在一个与 UserControl 的 ID (ClientID) 相对应的元素。这实质上为我提供了一个唯一的命名空间来添加 expando 属性 - 以及一种让其他控件轻松识别这些属性并将它们与我的用户控件相关联的方法。然后使用以下代码添加 expando 属性:

Page.ClientScript.RegisterExpandoAttribute(Me.ClientID, "validatorsenabled", Me.ValidatorsEnabled)

由于我手动添加了 HTML 元素，它不再崩溃。如果用户控件中有管道来处理这个细节，就像服务器控件一样，那就太好了，但这个解决方法是一个合适的替代品。

更好的解决方案

与往常一样，当您不得不求助于字符串解析时，您应该仔细看看是否有更好的方法。这次碰巧有一个 - 覆盖 Render 方法(就像服务器控件一样)并使用 HtmlTextWriter 上的内置方法来生成输出。

Protected Overrides Sub Render(ByVal writer As System.Web.UI.HtmlTextWriter)
    writer.AddAttribute(HtmlTextWriterAttribute.Id, Me.ClientID)
    writer.RenderBeginTag(HtmlTextWriterTag.Div)
    MyBase.Render(writer)
    writer.RenderEndTag()
End Sub

这在功能上等同于我的其他解决方案中的代码 - 它生成一个带有我的用户控件 ID 的 DIV 标记。但是，它不需要像原始代码那样在 Page_Load 中添加额外的代码，更好地利用框架，并且不需要任何字符串格式或连接。

现在，这一行将直接向用户控件添加一个 expando 属性(在 javascript 中):

Page.ClientScript.RegisterExpandoAttribute(Me.ClientID, "validatorsenabled", Me.ValidatorsEnabled)