Modifying ClientID of ASP.NET controls
Client-side ID-s of ASP.NET controls have been problem for a long time. They are hard to predict and guess. Fool-proof method that uses JavaScript block that defines client-side ID-s as variable values is not very elegant. Today’s web applications use client-size scripting heavily and now ASP.NET 4.0 provides us with elegant features to handle client-size ID-s of controls to make client-side scripting easier for us. Let’s see quick example.
To prepare the test project follow these steps:
- Create new web application project.
- Create new master page (Site1.Master).
- Create new content page (ContentPage.aspx) that uses previously create master page.
- Create new web user control (UserControl1.ascx).
- Add checkbox to user control and assign values to its ID and Text properties.
My pages are here. If you don’t want to copy-paste these then scroll down, right to the end of this mark-up block.
Site1.Master
<%@ Master Language="C#" AutoEventWireup="true"
CodeBehind="Site1.master.cs"
Inherits="WebApplicationTest.Site1" %>
<%@ Register src="UserControl1.ascx" tagname="UserControl1"
tagprefix="uc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title></title>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form2" runat="server">
<div>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1"
runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
ContentPage.aspx
<%@ Page Title="" Language="C#" MasterPageFile="~/Site1.Master"
AutoEventWireup="true" CodeBehind="ContentForm.aspx.cs"
Inherits="WebApplicationTest.ContentForm" %>
<%@ Register src="UserControl1.ascx" tagname="UserControl1"
tagprefix="uc1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head"
runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1"
runat="server">
<uc1:UserControl1 ID="UserControl11" runat="server" />
</asp:Content>
UserControl1.ascx
<%@ Control Language="C#" AutoEventWireup="true"
CodeBehind="UserControl1.ascx.cs"
Inherits="WebApplicationTest.UserControl1" %>
<asp:CheckBox runat="server" ID="weatherCheckBox"
Text="Is weather nice today?"
/>
Now we have pages and user control created and it is time to run our application. When application opens in browser let’s see the source of page. Our special interest is the checkbox and how it is rendered. We should see something like this:
<input id="ctl00_ContentPlaceHolder1_UserControl11_weatherCheckBox"
type="checkbox"
name="ctl00$ContentPlaceHolder1$UserControl11$weatherCheckBox"
/>
<label
for="ctl00_ContentPlaceHolder1_UserControl11_weatherCheckBox">
Is weather nice today?
</label>
As we can see we have id that is hardly bound to the location of control in control tree. This is not something we want when we want client-side scripts to do something with server-side controls.
Changing ClientID of control using ClientIDMode
ASP.NET 4.0 has new attribute for controls: ClientIDMode. Using ClientIDMode attribute it is possible control how controls get their client-side ID-s. Let’s try out the following definition for checkbox.
<asp:CheckBox runat="server" ID="weatherCheckBox"
ClientIDMode="Static"
Text="Is weather nice today?"
/>
As you can see I set ClientIDMode to value Static. Let’s see the ID of checkbox now.
<input id="weatherCheckBox" type="checkbox"
name="ctl00$ContentPlaceHolder1$UserControl11$weatherCheckBox"
/><label for="weatherCheckBox">Is weather nice today?</label>
As we can see checkbox has now both ID in server and client side, just as we wanted. The name of control is still like before but somehow ASP.NET has to know where control is located in page’s control hierarchy.
To find out more about ClientIDMode you can read ClientIDMode documentation from MSDN Library.
