内容页中的控件 ID 命名 (C#) | Microsoft Learn

link之家
链接快照平台
输入网页链接，自动生成快照
标签化管理网页链接
步骤 1：添加新 ASP.NET 页

为了演示本教程中讨论的概念，让我们向网站添加新 ASP.NET 页面。在根文件夹中创建一 IDIssues.aspx 个名为的新内容页，将其绑定到 Site.master 母版页。
图 01 ：将内容页 IDIssues.aspx 添加到根文件夹
Visual Studio 会自动为每个母版页的四个 ContentPlaceHolder 创建内容控件。如 多个 ContentPlaceHolders 和默认内容 教程中所述，如果内容控件不存在，则改为发出母版页的默认 ContentPlaceHolder 内容。 QuickLoginUI 由于 ContentPlaceHolders LeftColumnContent 包含此页面的适当默认标记，因此请继续操作，并从中删除相应的内容控件 IDIssues.aspx 。此时，内容页的声明性标记应如下所示：
<%@ Page Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="IDIssues.aspx.cs" Inherits="IDIssues" Title="Untitled Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">
</asp:Content>
在 母版页教程中指定标题、元标记和其他 HTML 标头 时，我们创建了一个自定义基页类 () BasePage ，如果未显式设置，则会自动配置页面的标题。 IDIssues.aspx若要使页面使用此功能，页面的代码隐藏类必须派生自BasePage类 (而不是System.Web.UI.Page) 。 修改代码隐藏类的定义，使其如下所示：
public partial class IDIssues : BasePage
最后，更新 Web.sitemap 文件以包含此新课程的条目。 添加元素<siteMapNode>并将其和url属性分别title设置为“控制 ID 命名问题”和~/IDIssues.aspx。 添加后， Web.sitemap 文件的标记应如下所示：
<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
 <siteMapNode url="~/Default.aspx" title="Home">
 <siteMapNode url="~/About.aspx" title="About the Author" />
 <siteMapNode url="~/MultipleContentPlaceHolders.aspx" title="Using Multiple ContentPlaceHolder Controls" />
 <siteMapNode url="~/Admin/Default.aspx" title="Rebasing URLs" />
 <siteMapNode url="~/IDIssues.aspx" title="Control ID Naming Issues" />
 </siteMapNode>
</siteMap>
如图 2 所示，左侧列中的“课程”部分会立即反映新网站地图条目 Web.sitemap 。
图 02：“课程”部分现在包含指向“控制 ID 命名问题”的链接
步骤 2：检查呈现的ID更改
为了更好地了解 ASP.NET 引擎对服务器控件的 id 呈现值所做的修改，让我们向页面添加一些 Web 控件 IDIssues.aspx ，然后查看发送到浏览器的呈现标记。 具体而言，键入文本“请输入你的年龄：”后跟 TextBox Web 控件。 在页面上的下一步，添加按钮 Web 控件和标签 Web 控件。 将 TextBox ID 的属性 Columns 分别设置为 Age 3 和 3。 将按钮 Text 的属性 ID 设置为“提交”和 SubmitButton。 清除 Label Text 的属性并将其设置为 IDResults。
此时，内容控件的声明性标记应如下所示：
 Please enter your age:
 <asp:TextBox ID="Age" Columns="3" runat="server"></asp:TextBox>
 <asp:Button ID="SubmitButton" runat="server" Text="Submit" />
 <asp:Label ID="Results" runat="server"></asp:Label>
图 3 显示了通过 Visual Studio 设计器查看的页面。
图 03：页面包含三个 Web 控件：文本框、按钮和标签 (单击以查看全尺寸图像) 
通过浏览器访问页面，然后查看 HTML 源。 如下面的标记所示，idTextBox、Button 和 Label Web 控件的 HTML 元素的值是 Web 控件的值和ID页面中命名容器的值的组合ID。
 Please enter your age:
 <input name="ctl00$MainContent$Age" type="text" size="3" id="ctl00_MainContent_Age" />
 <input type="submit" name="ctl00$MainContent$SubmitButton" value="Submit" id="ctl00_MainContent_SubmitButton" />
 <span id="ctl00_MainContent_Results"></span>
如本教程前面所述，母版页及其 ContentPlaceHolders 都充当命名容器。 因此，两者都贡献其嵌套控件的呈现 ID 值。 获取 TextBox 的属性id，例如： ctl00_MainContent_Age 回想一下，TextBox 控件的值 ID 是 Age。 此前缀为 ContentPlaceHolder 控件ID的值。 MainContent 此外，此值以母版页 ID 的值 ctl00为前缀。 净效果是一个 id 属性值，由 ID 母版页的值、ContentPlaceHolder 控件和 TextBox 本身组成。
图 4 说明了此行为。 若要确定 TextBox 的idAge呈现，请从 ID TextBox 控件Age的值开始。 接下来，按照控制层次结构进行操作。 在每个命名容器 (具有桃色) 的节点，前缀为 id 当前呈现的命名容器的 id前缀。
图 04：呈现 id 的属性基于 ID 命名容器的值
如前所述， ctl00 呈现 id 的属性部分构成了 ID 母版页的值，但你可能想知道此值 ID 是如何实现的。 我们没有在母版页或内容页中的任何位置指定它。 ASP.NET 页中的大多数服务器控件通过页面的声明性标记显式添加。 MainContent ContentPlaceHolder 控件在标记Site.master中显式指定;AgeTextBox 已定义的IDIssues.aspx标记。 我们可以通过okno Vlastnosti或声明性语法指定ID这些类型的控件的值。 声明性标记中未定义其他控件（如母版页本身）。 因此，必须为我们自动生成其 ID 值。 ASP.NET 引擎为尚未显式设置 ID 的控件在运行时设置 ID 值。 它使用命名模式 ctlXX，其中 XX 是一个按顺序递增的整数值。
由于母版页本身充当命名容器，因此母版页中定义的 Web 控件也更改了呈现的 id 属性值。 例如， DisplayDate 我们在 “使用母版页创建Site-Wide布局 ”教程中添加到母版页的标签具有以下呈现标记：
<span id="ctl00_DateDisplay">current date</span>
请注意，该 id 属性包括母版页 ID 的值 (ctl00) 和 ID 标签 Web 控件的值 (DateDisplay) 。
步骤 3：通过编程方式引用 Web 控件FindControl
每个 ASP.NET 服务器控件都包含一个 FindControl("controlID") 方法，该方法在控件的后代中搜索名为 controlID 的控件。 如果找到此类控件，则返回该控件;如果未找到匹配控件， FindControl 则返回 null。
FindControl 在需要访问控件但没有直接引用控件的情况下，非常有用。 例如，使用 Data Web 控件（例如，在声明性语法中定义 GridView 字段中的控件一次）时，会在运行时为每个 GridView 行创建控件实例。 因此，运行时生成的控件存在，但我们没有代码隐藏类提供的直接引用。 因此，我们需要用于 FindControl 以编程方式处理 GridView 字段中的特定控件。  (有关用于 FindControl 访问数据 Web 控件模板中的控件的详细信息，请参阅 基于 Data 的自定义格式设置。) 在向 Web 窗体动态添加 Web 控件时会发生此相同的方案，本主题在 “创建动态数据输入用户界面”中讨论。
若要说明如何使用 FindControl 该方法在内容页中搜索控件，请为 SubmitButton's Click 事件创建事件处理程序。 在事件处理程序中，添加以下代码，该代码使用FindControl该方法以编程方式引用 Age TextBox 和 Results Label，然后根据用户的输入显示消息Results。
当然，我们不需要用于 FindControl 引用此示例的 Label 和 TextBox 控件。 我们可以直接通过属性值 ID 引用它们。 我在此处用来 FindControl 说明从内容页使用 FindControl 时会发生什么情况。
protected void SubmitButton_Click(object sender, EventArgs e)
    Label ResultsLabel = FindControl("Results") as Label;
    TextBox AgeTextBox = Page.FindControl("Age") as TextBox;
    ResultsLabel.Text = string.Format("You are {0} years old!", AgeTextBox.Text);
虽然用于调用 FindControl 该方法的语法在前两行略有不同，但它们在语义上是等效的 SubmitButton_Click。 回想一下，所有 ASP.NET 服务器控件都包含一种方法 FindControl 。 这包括类 Page ，所有 ASP.NET 代码隐藏类都必须派生自该类。 因此，调用 FindControl("controlID") 等效于调用 Page.FindControl("controlID")，前提是你尚未在代码隐藏类或自定义基类中重写 FindControl 该方法。
输入此代码后，通过浏览器访问 IDIssues.aspx 页面，输入年龄，然后单击“提交”按钮。 单击“提交”按钮时， NullReferenceException (看到图 5) 。
图 05： (NullReferenceException单击以查看全尺寸图像) 
如果在事件处理程序中 SubmitButton_Click 设置断点，将看到两个调用 FindControl 都返回值 null 。 NullReferenceException当我们尝试访问 Age TextBox Text 的属性时，将引发此事件。
问题是Control.FindControl，仅搜索位于同一命名容器中的Control 后代。 由于母版页构成新的命名容器，因此调用 Page.FindControl("controlID") 永远不会渗透母版页对象 ctl00。  (请参阅图 4 以查看控件层次结构，该层次结构将对象显示为 Page 母版页对象的父级 ctl00.) 因此， Results 找不到 Label 和 Age TextBox， ResultsLabel 并且 AgeTextBox 分配了值 null。
此挑战有两种解决方法：我们可以向下钻取一个命名容器，一次一个命名容器，以适当的控制：或者，我们可以创建渗透到命名容器中的自己的 FindControl 方法。 让我们检查其中每个选项。
钻取到适当的命名容器
若要用于FindControl引用 Label 或 Age TextBox，我们需要从同一命名容器中的上级控件调用FindControlResults。 如图 4 所示， MainContent ContentPlaceHolder 控件是唯一的上 Results 级或 Age 位于同一命名容器中。 换句话说，从控件调用FindControl方法，如下面的代码片段所示，正确返回对或Age控件的ResultsMainContent引用。
Label ResultsLabel = MainContent.FindControl("Results") as Label;
TextBox AgeTextBox = MainContent.FindControl("Age") as TextBox;
但是，由于 ContentPlaceHolder 在母版页中定义了 ContentPlaceHolder，因此无法使用 MainContent 上述语法从内容页的代码隐藏类中使用 ContentPlaceHolder。 相反，我们必须用来 FindControl 获取对 MainContent. 的引用。 将事件处理程序中的 SubmitButton_Click 代码替换为以下修改：
protected void SubmitButton_Click(object sender, EventArgs e)
    ContentPlaceHolder MainContent = FindControl("MainContent") as ContentPlaceHolder;
    Label ResultsLabel = MainContent.FindControl("Results") as Label;
    TextBox AgeTextBox = MainContent.FindControl("Age") as TextBox;
    ResultsLabel.Text = string.Format("You are {0} years old!", AgeTextBox.Text);
如果通过浏览器访问页面，请输入年龄，然后单击“提交”按钮，则会引发 a NullReferenceException 。 如果在事件处理程序中 SubmitButton_Click 设置断点，则会在尝试调用 MainContent 对象的 FindControl 方法时看到发生此异常。 该 MainContent 对象是因为 null 该方法 FindControl 找不到名为“MainContent”的对象。 根本原因与 Label 和 Age TextBox 控件相同Results：FindControl从控件层次结构顶部开始搜索，不渗透命名容器，但 MainContent ContentPlaceHolder 位于母版页中，这是命名容器。
在可用于 FindControl 获取对母版页控件的引用 MainContent之前，首先需要对母版页控件的引用。 有了对母版页的引用后，可以通过使用) 再次引用 Label 和 Age TextBox (，从中获取FindControl对 MainContent ContentPlaceHolder FindControl 的引用Results。 但是，如何获取对母版页的引用？ 通过检查 id 呈现标记中的属性，很明显母版页 ID 的值是 ctl00。 因此，我们可以用来 Page.FindControl("ctl00") 获取对母版页的引用，然后使用该对象获取对 MainContent母版页的引用等。 以下代码片段演示了此逻辑：
// Get a reference to the master page
MasterPage ctl00 = FindControl("ctl00") as MasterPage;
// Get a reference to the ContentPlaceHolder
ContentPlaceHolder MainContent = ctl00.FindControl("MainContent") as ContentPlaceHolder;
// Reference the Label and TextBox controls
Label ResultsLabel = MainContent.FindControl("Results") as Label;
TextBox AgeTextBox = MainContent.FindControl("Age") as TextBox;
虽然此代码肯定会正常工作，但它假定母版页的自动生成 ID 始终是 ctl00。 对自动生成的值做出假设从来不是个好主意。
幸运的是，可通过 Page 类的属性访问对母版页的 Master 引用。 因此，为了访问 MainContent ContentPlaceHolder，我们不必用来FindControl("ctl00")获取母版页的引用，而是可以使用Page.Master.FindControl("MainContent")。 SubmitButton_Click使用以下代码更新事件处理程序：
protected void SubmitButton_Click(object sender, EventArgs e)
    ContentPlaceHolder MainContent = Page.Master.FindControl("MainContent") as ContentPlaceHolder;
    Label ResultsLabel = MainContent.FindControl("Results") as Label;
    TextBox AgeTextBox = MainContent.FindControl("Age") as TextBox;
    ResultsLabel.Text = string.Format("You are {0} years old!", AgeTextBox.Text);
这一次，通过浏览器访问页面，输入年龄，然后单击“提交”按钮会显示标签中的 Results 消息，如预期。
图 06：用户年龄显示在标签 (单击以查看全尺寸图像) 
以递归方式搜索命名容器
前面的代码示例从母版页引用 MainContent ContentPlaceHolder 控件，然后Results引用MainContent了 Label 和 Age TextBox 控件的原因是该方法Control.FindControl仅在控件的命名容器中搜索。 FindControl在大多数情况下，在命名容器中保持命名容器是有意义的，因为两个不同的命名容器中的两个控件可能具有相同ID的值。 请考虑 GridView 的情况，该视图定义一个名为 TemplateFields 中的标签 Web 控件 ProductName 。 当数据在运行时绑定到 GridView 时，会为每个 GridView 行创建一个 ProductName 标签。 如果 FindControl 搜索所有命名容器并调用 Page.FindControl("ProductName")，应 FindControl 返回哪些 Label 实例？ ProductName第一个 GridView 行中的标签？ 最后一行中的哪一行？
因此， Control.FindControl 在大多数情况下，只需搜索 Control 的命名容器即可。 但是，还有其他情况，例如，我们面临的情况是，在所有命名容器中都有唯 ID 一的，并希望避免必须仔细引用控件层次结构中的每个命名容器才能访问控件。 具有 FindControl 递归搜索所有命名容器的变体也有意义。 遗憾的是，.NET Framework不包括此类方法。
好消息是，我们可以创建自己的 FindControl 方法，以递归方式搜索所有命名容器。 事实上，使用扩展方法，我们可以将方法Control附加到FindControlRecursive类，以随附其现有FindControl方法。
扩展方法是 C# 3.0 和 Visual Basic 9 的新增功能，它是随 .NET Framework 版本 3.5 和 Visual Studio 2008 附带的语言。 简言之，扩展方法允许开发人员通过特殊语法为现有类类型创建新的方法。 有关此有用功能的详细信息，请参阅我的文章： 使用扩展方法扩展基类型功能。
To create the extension method, add a new file to the App_Code folder named PageExtensionMethods.cs. Add an extension method named FindControlRecursive that takes as an input a string parameter named controlID. 若要使扩展方法正常工作，必须标记 static类本身及其扩展方法。 此外，所有扩展方法必须接受其第一个参数作为扩展方法所应用到的类型的对象，并且此输入参数必须前面加上关键字 this。
将以下代码添加到 PageExtensionMethods.cs 类文件中以定义此类和 FindControlRecursive 扩展方法：
using System;
using System.Web;
using System.Web.UI;
public static class PageExtensionMethods
    public static Control FindControlRecursive(this Control ctrl, string controlID)
        if (string.Compare(ctrl.ID, controlID, true) == 0)
            // We found the control!
            return ctrl;
            // Recurse through ctrl's Controls collections
            foreach (Control child in ctrl.Controls)
                Control lookFor = FindControlRecursive(child, controlID);
                if (lookFor != null)
                    return lookFor;  // We found the control
            // If we reach here, control was not found
            return null;
完成此代码后，返回到 IDIssues.aspx 页面的代码隐藏类并注释掉当前 FindControl 方法调用。 将它们替换为对 Page.FindControlRecursive("controlID").. 扩展方法的整洁性在于它们直接显示在 IntelliSense 下拉列表中。 如图 7 所示，键入 Page 和命中句点时， FindControlRecursive 该方法将随其他 Control 类方法一起包含在 IntelliSense 下拉列表中。
图 07：IntelliSense 中包括扩展方法Drop-Downs (单击以查看全尺寸图像) 
在事件处理程序中 SubmitButton_Click 输入以下代码，然后通过访问页面、输入年龄并单击“提交”按钮对其进行测试。 如图 6 所示，生成的输出将是消息“你年龄已长！
protected void SubmitButton_Click(object sender, EventArgs e)
    Label ResultsLabel = Page.FindControlRecursive("Results") as Label;
    TextBox AgeTextBox = Page.FindControlRecursive("Age") as TextBox;
    ResultsLabel.Text = string.Format("You are {0} years old!", AgeTextBox.Text);
由于扩展方法不熟悉 C# 3.0 和 Visual Basic 9，因此如果使用 Visual Studio 2005，则无法使用扩展方法。 相反，你需要在帮助程序类中实现 FindControlRecursive 该方法。 里克·斯特拉尔 在他的博客文章 ASP.NET 马瑟·页面和 FindControl。
步骤 4：在 Client-Side 脚本中使用正确的id属性值
如本教程简介中所述，Web 控件的 id 呈现属性通常用于客户端脚本以编程方式引用特定 HTML 元素。 例如，以下 JavaScript 按 HTML 元素引用 HTML id 元素，然后在模式消息框中显示其值：
var elem = document.getElementById("Age");
if (elem != null)
    alert("You entered " + elem.value + " into the Age text box.");
回想一下，在不包含命名容器的 ASP.NET 页中，呈现的 HTML 元素的属性与 Web 控件的idID属性值相同。 因此，很难将属性值中的 id 硬代码转换为 JavaScript 代码。 也就是说，如果知道要通过客户端脚本访问 Age TextBox Web 控件，请通过调用来执行此操作 document.getElementById("Age")。
此方法的问题是，在使用母版页 (或其他命名容器控件) 时，呈现的 ID HTML id 与 Web 控件的属性不是同义词。 你的第一个倾向可能是通过浏览器访问页面并查看源以确定实际 id 属性。 了解呈现 id 的值后，可以将其粘贴到调用中，以 getElementById 访问需要通过客户端脚本处理的 HTML 元素。 此方法不太理想，因为对页面控件层次结构的某些更改 ID 或更改命名控件的属性将改变生成的 id 属性，从而破坏 JavaScript 代码。
好消息是，id呈现的属性值可通过 Web 控件的属性ClientID在服务器端代码中访问。 应使用此属性来确定 id 客户端脚本中使用的属性值。 例如，若要将 JavaScript 函数添加到调用时在模式消息框中显示 TextBox 的值 Age ，请将以下代码添加到 Page_Load 事件处理程序：
ClientScript.RegisterClientScriptBlock(this.GetType(), "ShowAgeTextBoxScript",
 string.Format(@"function ShowAge()
 var elem = document.getElementById('{0}');
 if (elem != null)
 alert('You entered ' + elem.value + ' into the Age text box.');
 }}", AgeTextBox.ClientID), true);
上述代码将 TextBox 的 ClientID 属性的值 Age 注入到 JavaScript 调用中 getElementById。 如果通过浏览器访问此页面并查看 HTML 源，你将找到以下 JavaScript 代码：
<script type="text/javascript">
//<![CDATA[
function ShowAge()
 var elem = document.getElementById('ctl00_MainContent_Age');
 if (elem != null)
 alert('You entered ' + elem.value + ' into the Age text box.');
}//]]>
</script>
请注意，正确的 id 属性值 ctl00_MainContent_Age在调用 getElementById中如何显示。 由于此值是在运行时计算的，因此无论以后对页面控件层次结构的更改如何，它都有效。
此 JavaScript 示例仅演示如何添加一个 JavaScript 函数，该函数正确引用服务器控件呈现的 HTML 元素。 若要使用此函数，需要在文档加载或某些特定用户操作发生时创作其他 JavaScript 来调用该函数。 有关这些和相关主题的详细信息，请阅读 “使用Client-Side脚本”。
某些 ASP.NET 服务器控件充当命名容器，这会影响其后代控件的 id 呈现属性值以及方法画布的 FindControl 控件的范围。 对于母版页，母版页本身及其 ContentPlaceHolder 控件都是命名容器。 因此，我们需要再提出一些工作，以编程方式引用内容页 FindControl中的控件。 在本教程中，我们研究了两种技术：钻取 ContentPlaceHolder 控件并调用其 FindControl 方法;并滚动我们自己的 FindControl 实现，以递归方式搜索所有命名容器。
除了在引用 Web 控件方面引入的服务器端问题之外，还有客户端问题。 在没有命名容器的情况下，Web 控件的 ID 属性值和呈现 id 的属性值相同。 但是，随着命名容器的添加，呈现 id 的属性包括 ID Web 控件的值和命名容器 (控件层次结构的祖先中的) 。 只要使用 Web 控件的属性来确定客户端脚本中呈现id的ClientID属性值，这些命名问题就不是问题。
快乐编程！
有关本教程中讨论的主题的详细信息，请参阅以下资源：
ASP.NET 母版页和 FindControl
创建动态数据输入用户界面
使用扩展方法扩展基类型功能
如何：引用母版页内容 ASP.NET
Mater Pages：提示、技巧和陷阱
使用 Client-Side 脚本
斯科特·米切尔，多个 ASP/ASP.NET 书籍的作者和 4GuysFromRolla.com 的创始人，自1998年以来一直在与 Microsoft Web 技术合作。 斯科特担任独立顾问、教练和作家。 他的最新书是 山姆斯教自己在24小时内 ASP.NET 3.5。 斯科特可以在博客上mitchell@4GuysFromRolla.comhttp://ScottOnWriting.NET或通过他的博客访问。
本教程系列由许多有用的审阅者审阅。 本教程的主要审阅者是扎克·琼斯和苏迪·巴纳吉。 有兴趣查看即将发布的 MSDN 文章？ 如果是这样，请把我扔一条线 mitchell@4GuysFromRolla.com。
上一页下一页
步骤 1：添加新 ASP.NET 页

步骤 2：检查呈现的`ID`更改

步骤 3：通过编程方式引用 Web 控件`FindControl`

钻取到适当的命名容器

以递归方式搜索命名容器

步骤 4：在 Client-Side 脚本中使用正确的`id`属性值
