ASP.NET：如何解析客户端 ID

• 下载源代码 - 11.6 KB

引言

ASP.NET 框架旨在通过代码隐藏来管理 ASPX 页面中的 Web 控件。如果您需要在客户端验证控件，只需将该控件与验证控件关联即可。所有这些都能正常工作，直到我们需要创建 JavaScript 来管理其中的一些控件。问题在于，当您添加控件时，在设计时为此控件提供的 ID 与页面在运行时呈现的 ID 不同。例如，创建一个新的 Web 项目并添加一个新的 ASPX 页面，然后在设计时按如下方式添加一个 TextBox：

<asp:TextBox ID="mytext" Runat="server"></asp:TextBox>

运行页面并查看其源代码。它看起来像这样：

<Input name="mytext" type="text" id="mytext" />

如您所见，这里没有问题，因为控件包含在页面中。但是，当控件包含在用户控件中，或者当您使用母版页（ASP.NET 2.0）时会发生什么？让我们通过向项目中添加一个用户控件来看看。称其为 mycontrol.ascx。现在将 TextBox 从 ASPX 文件移到 ASCX 文件。在 ASPX 文件中引用此用户控件。将此控件的 ID 设置为 myControl。在浏览器中显示页面并查看其源代码。它看起来像这样：

<Input name="myControl:mytext" type="text" id="myControl_mytext" />

控件 ID 现在以其容器的名称作为前缀。在母版页的情况下，所有与母版页关联的 ASPX 页面都包含在一个容器中，并且可能存在多个嵌套层。因此，如果您使用客户端 JavaScript 读取和操作这些控件，如何在不将此值硬编码到 JavaScript 的情况下解析实际的客户端控件 ID？有不同的方法可以解决此问题。在本文中，我提供了一种可能的解决方案，该解决方案使用了 ASP.NET 框架已有的技术。此解决方案适用于框架的所有版本。

解决方案

此方法关键在于创建一个不被服务器端处理修改的客户端控件。在用户控件上，添加一个隐藏的输入字段。将输入字段的值设置为服务器端控件的文本。它应该看起来像这样：

<input type=hidden id="ctrlPrefix" name="ctrlPrefix" 
   value='<asp:Literal Runat="server" ID=ctrlPrefix></asp:Literal>'>

要记住的一个重要注意事项是，隐藏的输入字段必须放置在容器中。这一点很重要，因为它是用来解析容器名称的。在控件的代码隐藏中，在 Page_Load 事件中添加以下代码：

string []elm =ctrlPrefix.ClientID.Split('_');       
ctrlPrefix.Text = ctrlPrefix.ClientID.Replace(elm[elm.Length - 1],"");

我们首先从控件客户端 ID 获取一个字符串数组。这包含控件名称及其容器，用下划线分隔。您也可以使用控件的 ClientId 属性，但您需要记住添加下划线。第二行只是从数组的最后一个元素中删除控件 ClientId 的字符串。这将返回包含下划线的整个前缀。编译更改并在浏览器中查看页面。它看起来像这样：

<input name="myControl:mytext" type="text" id="myControl_mytext" />
<input type=hidden id="ctrlPrefix" name="ctrlPrefix" value='myControl_'>

现在有一个隐藏的输入字段，其中包含所有服务器端控件的前缀。现在，我们可以继续处理处理控件的 JavaScript。添加一个 JavaScript 文件。称其为 mycontrol.js。将此函数添加到文件中：

//returns the container prefix as all controls have that on their ids
function getCrtlPrefix()
{
   var prefix;
   var objCrtlPrefix = document.getElementById("ctrlPrefix");

   if (objCrtlPrefix)
       prefix = objCrtlPrefix.value;

   return prefix;
}

此函数读取隐藏输入字段中的值并返回它。我们需要添加另一个函数来测试此解决方案。添加以下函数：

function readValue(ctrlName)
{
   var prefix = getCrtlPrefix();
   var objCrtl = document.getElementById(prefix + ctrlName);

   if (objCrtl)
       alert ( "Prefix: " + prefix + " - value: " + objCrtl.value);
   else
       alert("not found!");
}

此函数显示文本框中的值。我们应该注意到对 getCtrlPrefix 函数的调用。控件的名称将附加到此字符串。这解析了整个客户端 ID。转到用户控件文件并在其中添加一个按钮。此按钮用于调用 readValue 函数。在 ASCX 页面中添加以下内容：

<input type=button value="Read Value" onclick="javascript:readValue('mytext')">

此 HTML 按钮会触发该函数。现在，通过在控件中添加以下内容来引用 JavaScript 文件：

<script language="JavaScript" src="mycontrol.js"></script>

重新加载页面，在文本框中输入内容，然后按按钮。消息框应显示前缀值以及在文本框中输入的值。

关注点

我希望本文能帮助您绕过 .NET 框架的工作方式，并允许您继续愉快地进行客户端脚本编写。

历史

• 2007-01-30：初始版本。