What is difference between UniqueID and ClientID in ASP.Net Controls ?

Control.ClientID

ClientID will be a unique ID string that is rendered to the client to identify the control in the output HTML.

It uses _ to include parent controls (container) ID to make it unique.

For example, ct100_ContentPlaceHolder1_txtLogin. The client id for control will be generated by appending the parent container's(parent control) ID with the original control id with "_" as delimeter.

In our example, ContentPlaceHolder1 is the ContentPlaceHolder ID of the master page which is the parent container for txtLogin.

To get the ClientID of a control,
txtLogin.ClientID

The client id can be used to identify the control in client side scripting like javascript.
 
Control.UniqueID
UniqueID
is also a uniquely identifiable ID for a control but only used by
ASP.Net page framework to identify the control.

It uses $ to include
parent controls (container) ID to make it unique.

For example,
ct100$ContentPlaceHolder1$txtLogin. Similar to ClientID, UniqueID is
also generated by appending the parent container's(parent control) ID
with the original control id but with $ delimeter.

To get the UniqueID of a control,
txtLogin.UniqueID

The unique id is used by the Asp.Net framework to identify the control when the page is posted back to the server.

Why ClientID and UniqueID

Well, as you probably know UniqueID is used with name attribute and ClientId with id attribute of rendered HTML tag.

UniqueID uses colon as separator. On the other hand ClientId uses underscore as separator, because colon is not allowed in JavaScript variable names.

ClientID is indeed also unique on the Page as UniqueID is, but ClientID is targeted at client-side processing and UniqueID for server-side (pretty obvious),the latter especially to route for postback data and events with composite controls

However I think some reasoning might be that using underscore as separator in normal Control IDs is pretty common behavior and therefore underscore cannot be used in UniqueID as control separator (if we'd theoretically think managing with one property),because you couldn't make distinction between controls.

On the other hand for the same reasoning, you can't use colon in Control IDs, Page Framework does not allow it, so that it makes sure colons can't get to the ClientIDs (this was because of JavaScript does not like it).

And for these reasons, colon is pretty good choice to be used in UniqueID, because FindControl method can use it to navigate Control tree and locate controls (it can easily split the UniqueID).

Difference between ID and control.ClientID OR why use control.ClientID if I can access control through ID

问题

This is the code from .aspx file

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title>Login Again</title>

    <script type="text/javascript">

        function Validate() {

            if (document.getElementById("txtLogin").value == "") {

                alert("Enter login name.");

            }

            if (document.getElementById("<%=txtLogin.ClientID%>").value == "") {

                alert("Enter login name.");

            }

        }

    </script>

</head>

<body>

    <form id="form1" runat="server">

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

    <asp:Button ID="btnSubmit" runat="server" Text="Login" OnClientClick="Validate()" />

    </form>

</body>

</html>

  • In function Validate() I can access textbox using Id of control i.e.; getElementById("txtLogin") so should I use the second approach which is accessing control through control.ClientID and why?

  • My first understanding was that to access server control I have to use this syntax <%= %> but now I come to know from this example that I can access server side control simply through getElementById("ID-of-control").

答案

The ID generated in the final HTML is not guaranteed to remain the same as the one in your aspx source.

When you'll put the controls inside naming containers the ID will have prepended one or several parent ids to ensure its uniqueness.

The ClientId property will always give you the final form of the ID attribute as it ends up in the HTML so it's always recommended to use that in your javascript.

ID vs UniqueID vs ClientID vs UniqueClientID vs StaticClientID?

  • The ID is the serverside ID that you use in your code.
  • The UniqueId corresponds to the "name" attribute of the generated HTML element.
  • The ClientID corresponds to the "id" attribute of the generated html element. So it depends which attribute you need (name is sent with form post, id is used for DOM manipulation).
  • Not sure what the uniqueclientid is :)

ASP.Net 4 adds clientIdMode which allows you to force the id attribute to match the serverside id (and thus be more predictable) if you set it to "static".

ASP.Net: ClientID not correct in code-behind of a user control

答案1

You should try moving the code that adds the onclick attribute to the button in the PreRender event (or OnPreRender override) in your page or user-control.

That should probably get the ClientID right.

答案2

I don't know which asp.net version you are using but in 4.0 you can declare inside any server control ClientIDMode="static" and it will give you the exact id in browser.

Example:

<asp:Textbox id="txtName" runat="server" ClientIdMode="static"/>

Others are predictable, inherit and it can be used with ClientIdRowsuffix.Can be used at page level and even on master pages and even in web.config file.

Example on web.config file:

<system.web>

<Pages clientIDMode="predictable"/>

other system web properties

</system.web>

Watched Craig shoemaker's Video at tekpub, you can also read more about it at Rick's bloglink text. It's pretty cool tho.

Difference between ID and control.ClientID OR why use control.ClientID if I can access control through ID的更多相关文章

  1. Method and system for implementing mandatory file access control in native discretionary access control environments

    A method is provided for implementing a mandatory access control model in operating systems which na ...

  2. Oracle Applications Multiple Organizations Access Control for Custom Code

    档 ID 420787.1 White Paper Oracle Applications Multiple Organizations Access Control for Custom Code ...

  3. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' heade

    XMLHttpRequest cannot load http://10.164.153.37:8050/WebService/WebService.asmx/wsGetStreetData. Res ...

  4. SELINUX、Security Access Control Strategy && Method And Technology Research - 安全访问控制策略及其方法技术研究

    catalog . 引言 . 访问控制策略 . 访问控制方法.实现技术 . SELINUX 0. 引言 访问控制是网络安全防范和客户端安全防御的主要策略,它的主要任务是保证资源不被非法使用.保证网络/ ...

  5. Linux VFS Extended Attribute And Access Control Table

    catalog . 简介 . 扩展属性 . 访问控制表 . 小结 0. 简介 许多文件系统都提供了一些特性,扩展了VFS层提供的标准功能,虚拟文件系统不可能为所有特性都提供具体的数据结构.超出标准的U ...

  6. RBAC（Role-Based Access Control，基于角色的访问控制）

    RBAC(Role-Based Access Control,基于角色的访问控制),就是用户通过角色与权限进行关联.简单地说,一个用户拥有若干角色,每一个角色拥有若干权限.这样,就构造成“用户-角色- ...

  7. 转:Oracle R12 多组织访问的控制 - MOAC(Multi-Org Access Control)

    什么是MOAC MOAC(Multi-Org Access Control)为多组织访问控制,是Oracle EBS R12的重要新功能,它可以实现在一个Responsibility下对多个Opera ...

  8. RBAC（Role-Based Access Control)基于角色的访问控制

    RBAC(Role-Based Access Control,基于角色的访问控制),就是用户通过角色与权限进行关联.简单地说,一个用户拥有若干角色,每一个角色拥有若干权限.这样,就构造成"用 ...

  9. [认证授权] 6.Permission Based Access Control

    在前面5篇博客中介绍了OAuth2和OIDC(OpenId Connect),其作用是授权和认证.那么当我们得到OAuth2的Access Token或者OIDC的Id Token之后,我们的资源服务 ...

随机推荐

  1. Java操作队列

    Java操作队列 常见的几种模式:   1 简单队列simple 模型:(p + 队列 + c) P:生产者producer,将消息发送到队列 红色:消息队列 C:消费者consumer,从队列消费消 ...

  2. 回声状态网络（ESN）基础教程

    http://jlearning.cn/2017/05/29/ESN-basic-tutorial/ 最近在看回声状态网络(Echo State Network)的内容,注意到中文搜索引擎搜不到关于有 ...

  3. Necklace (全排列 + 匈牙利)

    #include<bits/stdc++.h> using namespace std; ][], Gra[][]; ]; ]; ]; bool dfs(int u, int vN) { ...

  4. springboot报错Whitelabel Error Page

    第一次使用springboot没有问题.隔了两天继续看.一直报错Whitelabel Error Page. 重新搭建试了任何方法都错了. 报的就是一个404错误,犯了一个习惯性错误,一般都是loca ...

  5. Linux基础命令---文本过滤colrm

    colrm 从标准输入读取数据,删除指定的列,然后送到标准输出.如果用一个参数调用,则将从指定的列开始删除每一行的列.如果使用两个参数调用,则将删除从第一列到最后一列的列.列编号以第1列开始. 此命令 ...

  6. system call filters failed to install; check the logs and fix your configuration or disable system call filters at your own risk

    elasticsearch启动时遇到的错误 这个是elasticsearch配置文件的问题. 解决办法: 在elasticsearch.yml配置文件中 添加     bootstrap.system ...

  7. highchart 柱状图，列宽自适应（x轴是时间的特殊情况）

    1.柱子列宽自适属性: pointWidth:25, //柱子宽度,如果设定该值,则下面2个属性无效 pointPadding: 0.4,//每列之间的距离值,默认此值为0.1 groupPaddin ...

  8. bzoj1606

    题目链接 反着循环就是每个东西只能选一次 #include<iostream> #include<cstdio> #include<cstdlib> #includ ...

  9. poj1185 [NOI2001炮兵阵地]

    题目链接 状压DP 本来如果考虑所有情况应该开hh[n][2^10][2^10]表示i行在i-1的状态为j,i-2的状态为k的最大个数 但是由于每行中的人互相限制所以在m=10时只有60种情况 空间就 ...

  10. python shutil模块简单介绍

    python shutil模块简单介绍 简介 shutil模块提供了大量的文件的高级操作.特别针对文件拷贝和删除,主要功能为目录和文件操作以及压缩操作. shutil 模块方法: copy(src, ...