zoukankan      html  css  js  c++  java
  • ASP.NET4.0对服务器控件的ID的控制(节选自周公的博客)

    我们知道一个ASP.NET服务器控件有三个ID,即:ID,ClientID和UniqueID。

    ID为服务器控件的服务器标示,在服务器代码中通过ID来唯一区分服务器控件(因此在同一个页面中ID必须唯一);

    ClientID是服务器控件在转化成HTML元素之后在客户端的ID,为了防止出现命名冲突,ASP.NET 为页上的各个服务器控件自动生成一个唯一的 ClientID 值。ClientID 值是通过连接控件的 ID 值和它的父控件的UniqueID 值生成的。生成的 ID 的各个部分以下划线字符 (_) 分隔;

    UniqueID是服务器控件的唯一的、以分层形式限定的标识符,它也是服务器控件转化成HTML元素之后在客户端的name标识。


    有时候我们要在客户端使用Javascript通过HTML元素的id来操作HTML元素,如果服务器控件在数据绑定控件中,那么它最终对应的HTML元素的id和我们平常使用的大不一样,这使我们操作起来很不方便,特别是我们在用javascript实现数据的全选反选时不方便,因为在操作单个控件时我们还可以按如下方式编写javascript代码:

     

    <script type="text/javascript"><!--
        function DoSomething(){
            alert('<%= Control.ClientID %>');
        }
    --></script>

     

    而在ASP.NET中提供了对服务器控件的对应的HTML元素的id的控制更强了,增加了ClientIDMode属性来控制。下面是一个展示ClientIDMode属性用法的例子,在服务端编码如下:

    <asp:GridView ID="gvUserList" runat="server" >
            <Columns>
                <asp:TemplateField HeaderText="UserId_AutoId">
                <ItemTemplate>
               <asp:Label runat="server" ID="lb1" ClientIDMode="AutoID" Text='<%#eval_r("UserId") %>' />
                </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="UserId_Static">
                <ItemTemplate>
               <asp:Label runat="server" ID="lb1" ClientIDMode="Static" Text='<%#eval_r("UserId") %>' />
                </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="UserId_Predictable">
                <ItemTemplate>
          <asp:Label runat="server" ID="lb1" ClientIDMode="Predictable" Text='<%#eval_r("UserId") %>' />
                </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>

     

    如果我们进行数据绑定之后再查看生成的HTML源代码,会看到类似的部分:

    <table cellspacing="0" rules="all" border="1" id="MainContent_gvUserList" style="border-collapse:collapse;" mce_style="border-collapse:collapse;">
    <tr>
    <th scope="col">UserId_AutoId</th><th scope="col">UserId_Static</th><th scope="col">UserId_Predictable</th>
    </tr>
    <tr>
    <td><span id="ctl00_MainContent_gvUserList_ctl02_lb1">136</span></td>
    <td><span id="lb1">136</span></td>
    <td><span id="MainContent_gvUserList_lb1_0">136</span></td>
    </tr>
    ....
    </table>

    ClientIDMode="AutoID" 时控件的客户端ID和我们在早期的ASP.NET没有什么区别;

    ClientIDMode="Static"时控件的客户端ID不会发生变化;

    ClientIDMode="Predictable"时控件的客户端ID中还带有数据行标识(如:id="MainContent_gvUserList_lb1_0"中的“0”即标识在数据源中的位置为0,即第一条记录)。

    通过指定ClientIDMode属性可以让我们很方便控制服务器端控件最终生成的HTML元素的ID,这一点也是相当方便的。

     

    源地址:http://blog.csdn.net/zhoufoxcn/archive/2010/05/17/5599115.aspx#

  • 相关阅读:
    如何结合后台数据库 启动vue项目
    nodejs卸载安装
    mysql安装过程
    VUE-cli脚手架
    css伪类
    element中遇到的表格问题总结
    小程序折叠面板的功能
    vue学习中遇到的onchange、push、splice、forEach方法使用
    vscode好用的扩展及常用的快捷键
    Flutter之SliverAppBar
  • 原文地址:https://www.cnblogs.com/zxjyuan/p/2125926.html
Copyright © 2011-2022 走看看