ClientDOM

• 下载源代码 - 25.2 KB

引言

此控件用于在客户端获取 ASP.NET 服务器控件的 DHTML 对象，即使 ASP.NET 框架会干扰控件的 ID 以保持页面中 ID 的唯一性。

使用代码

• 控件: ClientDOM
• 命名空间: IBM.DOTNET.Web.Controls
• 程序集: IBM.DOTNET.Web
• 描述

此控件用于在客户端获取 ASP.NET 服务器控件。当我们使用 ASP.NET 中的服务器控件或任何带有 "runat=server" 标签的 HTML 控件时，ASP.NET 框架会干扰控件的 ID 以保持页面中 ID 的唯一性。这通常在使用用户控件和自定义控件时发生。开发人员无法使用客户端脚本进行客户端验证，因为无法通过 Document 对象的 getElementById 或 getElementsByName 方法获取对象。这是因为 ASP.NET 框架更改了控件的 ID。在我从事 ASP.NET 开发的四年职业生涯中，我观察到人们以各种方式处理这个问题。其中一些方法如下。它们容易出错或不易使用。请注意，此解决方案是在 .NET Framework 2.0 和 Visual Studio 2005 中开发的。然而，实际对象封装在 "IBM.DOTNET.Web.dll" 程序集中。另一个名为 "WebSample" 的 Web 项目仅用于演示其在 ASP.NET 2.0 中的工作原理。如果 .NET Framework 3.0 支持向后兼容性，那么它也应该与该框架一起工作。然而，它并未在 .NET Framework 3.0 上进行测试，所以目前我们可以说此解决方案仅适用于 .NET Framework 2.0。

1. 当用户控件/自定义控件放置在页面上时，附加到实际 ID 前缀的文本将被检索并分配给某个 JavaScript 变量。并且此变量将在我们需要对用户控件/自定义控件执行验证时使用。这会起作用，但我们必须确保客户端文件不会有另一个具有相同名称的变量，并且该变量不应用于保存同一页面上放置的其他用户控件/自定义控件的客户端 ID。还有一点，无论何时我们需要在客户端检索对象，我们都必须在 getElementById 方法中追加此变量，如下所示。
UserControl 上的 ASP.NET 控件

<asp:TextBox ID="Age" runat="server"></asp:TextBox>

服务器端代码

protected void Page_Load(object sender, EventArgs e) 
{ 
    Response.write( "<script language='Javascript'>var ClientID = '" + 
      this.Controls[0].ClientID.Replace(this.Controls[0].ID, "" ) + "';"); 
}

客户端代码

function checkNum() 
{ 
    return (! isNaN(document.getElementById( ClientID + "Age" ))); 
}

2. 当用户控件/自定义控件放置在页面上时，会在其上放置一个隐藏控件，并使用内联代码设置其值。这会起作用，但尽管有单独的代码隐藏文件，它们仍需要进行内联编码。第二点是，无论何时我们需要在客户端检索控件，我们都必须首先检索隐藏控件的值，然后才能获取我们感兴趣的控件。这里也一样，我们必须确保隐藏控件的 ID 在页面中是唯一的。
UserControl 上的 ASP.NET 控件

<asp:TextBox ID="Age" runat="server"></asp:TextBox>
<input type="hidden" id="hidClient" value="<%= Age .ClientID.Replace(Age.ID, "" ) %> />

客户端代码

function checkNum() 
{ 
  //This hidden control is not a server control, so we can get this
  //control by passing it's id to the getElementById method 
  var ClientID = document.getElementById("hidClient").value; 
  return (! isNaN(document.getElementById( ClientID + "Age" ));
}

3. 另一种方法是在我们需要在客户端检索对象的地方进行内联编码。这根本不是一个好方法，因为它涉及繁琐的工作，如果用户控件的 ID 在将来被更改，需要在代码的许多地方进行更改，而且不易维护。
UserControl 上的 ASP.NET 控件

<asp:TextBox ID="Age" runat="server"></asp:TextBox>
<input type="hidden" id="hidClient" value="<%= Age .ClientID.Replace(Age.ID, "" ) %>" />

客户端代码

function checkNum() 
{ 
    return (! isNaN(document.getElementById("<%=UID.Age %>")); 
}

其中 UID 是插入此控件的用户控件的 ID。

我在这里扩展了第一种方法，我们确保一切都就位，并且开发人员可以轻松地在客户端检索对象，而无需做任何额外的工作。

在客户端获取对象需要两个步骤，而且非常容易。

在服务器端，我们需要实例化一个 IBM.DOTNET.Web.Controls.ClientDOM 类型的对象，并将 ID 作为参数传递给构造函数。如果您为 ID 提供了某个值，例如 "TEST"，并且客户端上已存在同名的变量，则会显示一条消息：“此 ID 已存在，请提供唯一 ID”。

using IBM.DOTNET.Web.Controls;
Controls.Add(new ClientDOM("UIID"));

现在，无论何时我们需要在客户端检索对象，都可以简单地通过调用 UIID 对象而不是 Document 对象的 getElementById 方法来获取，如下所示。

UIID.getElementById("Age");

同样，如果您正在使用 ASP:RadioButton 控件并设置了 GroupName 属性，那么您可以通过调用 UIID 对象的 getElementsByName 方法在客户端检索此对象，如下所示。

<asp:RadioButton GroupName="gender" ID="male" Text="Male" runat="server" />
<asp:RadioButton GroupName="gender" ID="female" Text="Female" runat="server" />

UIID.getElementsByName("gender");

如果您想联系我，请写信至 paresh.moradiya@gmail.com。