/
aspnet-4-webforms-new-feature-clientidmode.html
220 lines (185 loc) · 17.5 KB
/
aspnet-4-webforms-new-feature-clientidmode.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
<!DOCTYPE html>
<html lang="en">
<head>
<link href='//fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,400italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="http://www.emadmokhtar.com/theme/stylesheet/style.min.css">
<link rel="stylesheet" type="text/css" href="http://www.emadmokhtar.com/theme/stylesheet/pygments.min.css">
<link rel="stylesheet" type="text/css" href="http://www.emadmokhtar.com/theme/stylesheet/font-awesome.min.css">
<link href="http://www.emadmokhtar.com/feeds/all.atom.xml" type="application/atom+xml" rel="alternate" title="Emad Mokhtar's Framework Atom">
<link href="http://www.emadmokhtar.com/feeds/all.rss.xml" type="application/rss+xml" rel="alternate" title="Emad Mokhtar's Framework RSS">
<link rel="shortcut icon" href="http://www.emadmokhtar.com/images/favicon.ico" type="image/x-icon">
<link rel="icon" href="http://www.emadmokhtar.com/images/favicon.ico" type="image/x-icon">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="robots" content="" />
<meta name="author" content="EmadMokhtar" />
<meta name="description" content="Today we'll examine ClientIDMode the new feature of ASP.NET 4 which makes life easier on developers when writing client-side scripting/code like javascript or jQuery. ClientIDMode control property: You can assign ClientIDMode property for ASP.NET controls which is take 4 values AutoID Inherit Predictable Static And I'll demonstrate what the different between those 4 values. Demo: We've simple ASP.NET 4 page with Master page, with one button on it, and We'll set the ClientIDMode for the button control and examine what's happen when ASP.NET render it to HTML. AutoID: <asp:Button ID=”btnSubmit” runat=”server” Text=”Button” ClientIDMode=”AutoID”/> The Rendered HTML: <input type="submit" name="ctl00$ContentPlaceHolder1$btnSubmit" value="Button" id=”ctl00_ContentPlaceHolder1_btnSubmit” /> It's rendered like what ASP.NET 3.5 do, so if you want to renter control's ID like ASP.NET 3.5 set ClientIDMode to AutoID. Inherit: <asp:Button ID=”btnSubmit” runat=”server” Text=”Button” ClientIDMode=”Inherit” /> The Rendered HTML: <input type="submit" name="ctl00$ContentPlaceHolder1$btnSubmit" value="Button" id=”btnSubmit” /> Actually it tells the control to defer to the naming behavior mode of the parent container control. Predictable (default): <asp:Button ID=”btnSubmit” runat=”server” Text=”Button” ClientIDMode=”Predictable” /> The Rendered HTML …" />
<meta name="keywords" content="">
<meta property="og:site_name" content="Emad Mokhtar's Framework"/>
<meta property="og:title" content="ASP.NET 4 webforms new feature: ClientIDMode"/>
<meta property="og:description" content="Today we'll examine ClientIDMode the new feature of ASP.NET 4 which makes life easier on developers when writing client-side scripting/code like javascript or jQuery. ClientIDMode control property: You can assign ClientIDMode property for ASP.NET controls which is take 4 values AutoID Inherit Predictable Static And I'll demonstrate what the different between those 4 values. Demo: We've simple ASP.NET 4 page with Master page, with one button on it, and We'll set the ClientIDMode for the button control and examine what's happen when ASP.NET render it to HTML. AutoID: <asp:Button ID=”btnSubmit” runat=”server” Text=”Button” ClientIDMode=”AutoID”/> The Rendered HTML: <input type="submit" name="ctl00$ContentPlaceHolder1$btnSubmit" value="Button" id=”ctl00_ContentPlaceHolder1_btnSubmit” /> It's rendered like what ASP.NET 3.5 do, so if you want to renter control's ID like ASP.NET 3.5 set ClientIDMode to AutoID. Inherit: <asp:Button ID=”btnSubmit” runat=”server” Text=”Button” ClientIDMode=”Inherit” /> The Rendered HTML: <input type="submit" name="ctl00$ContentPlaceHolder1$btnSubmit" value="Button" id=”btnSubmit” /> Actually it tells the control to defer to the naming behavior mode of the parent container control. Predictable (default): <asp:Button ID=”btnSubmit” runat=”server” Text=”Button” ClientIDMode=”Predictable” /> The Rendered HTML …"/>
<meta property="og:locale" content="en_US"/>
<meta property="og:url" content="http://www.emadmokhtar.com/aspnet-4-webforms-new-feature-clientidmode.html"/>
<meta property="og:type" content="article"/>
<meta property="article:published_time" content="2010-05-04 18:17:00+03:00"/>
<meta property="article:modified_time" content=""/>
<meta property="article:author" content="http://www.emadmokhtar.com/author/emadmokhtar.html">
<meta property="article:section" content="ASP.NET"/>
<meta property="og:image" content="http://www.emadmokhtar.com/images/profile.jpg">
<title>Emad Mokhtar's Framework – ASP.NET 4 webforms new feature: ClientIDMode</title>
</head>
<body>
<aside>
<div>
<a href="http://www.emadmokhtar.com">
<img src="http://www.emadmokhtar.com/images/profile.jpg" alt="" title="">
</a>
<h1><a href="http://www.emadmokhtar.com"></a></h1>
<p>Geek developer who's in search of code perfection.</p>
<nav>
<ul class="list">
<li><a href="http://www.emadmokhtar.com">Blog</a></li>
<li><a href="http://www.emadmokhtar.com/pages/podcasts.html#podcasts">Podcasts</a></li>
<li><a href="http://www.emadmokhtar.com/pages/projects.html#projects">Projects</a></li>
<li><a href="https://emadmokhtar.github.io/resume" target="_blank">Resume</a></li>
</ul>
</nav>
<ul class="social">
<li><a class="sc-envelope-o" href="mailto:emad@emadmokhtar.com" target="_blank"><i class="fa fa-envelope-o"></i></a></li>
<li><a class="sc-github" href="https://www.github.com/EmadMokhtar" target="_blank"><i class="fa fa-github"></i></a></li>
<li><a class="sc-linkedin" href="https://www.linkedin.com/in/emadmokhtar/" target="_blank"><i class="fa fa-linkedin"></i></a></li>
<li><a class="sc-stack-overflow" href="http://stackoverflow.com/users/373051/emad-mokhtar" target="_blank"><i class="fa fa-stack-overflow"></i></a></li>
<li><a class="sc-facebook" href="https://www.facebook.com/emadmokhtarframework/" target="_blank"><i class="fa fa-facebook"></i></a></li>
<li><a class="sc-twitter" href="https://twitter.com/emadmokhtar" target="_blank"><i class="fa fa-twitter"></i></a></li>
</ul>
</div>
</aside>
<main>
<nav>
<a href="http://www.emadmokhtar.com">Home</a>
<a href="https://emadmokhtar.github.io/resume">Resume</a>
<a href="http://www.emadmokhtar.com/feeds/all.atom.xml">Atom</a>
<a href="http://www.emadmokhtar.com/feeds/all.rss.xml">RSS</a>
</nav>
<article>
<header>
<h1 id="aspnet-4-webforms-new-feature-clientidmode">ASP.NET 4 webforms new feature: ClientIDMode</h1>
<p>Posted on Tue 04 May 2010 in <a href="http://www.emadmokhtar.com/category/aspnet.html">ASP.NET</a> <b>Read in 2 min.</b></p>
</header>
<div>
<p>Today we'll examine ClientIDMode the new feature of ASP.NET 4 which makes life easier on developers when writing client-side scripting/code like javascript or jQuery.</p>
<h1>ClientIDMode control property:</h1>
<p>You can assign ClientIDMode property for ASP.NET controls which is take 4 values</p>
<ul>
<li>AutoID</li>
<li>Inherit</li>
<li>Predictable</li>
<li>
<p>Static</p>
<p><img alt="ClientIDMode Autocomplete" src="http://www.emadmokhtar.com/wp-content/uploads/2011/11/050410_1817_ASPNET4webf1.jpg"></p>
</li>
</ul>
<p>And I'll demonstrate what the different between those 4 values.</p>
<h1>Demo:</h1>
<p>We've simple ASP.NET 4 page with Master page, with one button on it, and We'll set the ClientIDMode for the button control and examine what's happen when ASP.NET render it to HTML.</p>
<h2>AutoID:</h2>
<div class="highlight"><pre><span></span><span class="nt"><asp:Button</span> <span class="na">ID=</span><span class="s">”btnSubmit”</span> <span class="na">runat=</span><span class="s">”server”</span> <span class="na">Text=</span><span class="s">”Button”</span> <span class="na">ClientIDMode=</span><span class="s">”AutoID”/</span><span class="nt">></span>
</pre></div>
<h3>The Rendered HTML:</h3>
<div class="highlight"><pre><span></span><span class="p"><</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">"submit"</span> <span class="na">name</span><span class="o">=</span><span class="s">"ctl00$ContentPlaceHolder1$btnSubmit"</span>
<span class="na">value</span><span class="o">=</span><span class="s">"Button"</span> <span class="na">id</span><span class="o">=</span><span class="s">”ctl00_ContentPlaceHolder1_btnSubmit”</span> <span class="p">/></span>
</pre></div>
<p>It's rendered like what ASP.NET 3.5 do, so if you want to renter control's ID like ASP.NET 3.5 set ClientIDMode to AutoID.</p>
<h2>Inherit:</h2>
<div class="highlight"><pre><span></span><span class="nt"><asp:Button</span> <span class="na">ID=</span><span class="s">”btnSubmit”</span> <span class="na">runat=</span><span class="s">”server”</span> <span class="na">Text=</span><span class="s">”Button”</span> <span class="na">ClientIDMode=</span><span class="s">”Inherit”</span> <span class="nt">/></span>
</pre></div>
<h3>The Rendered HTML:</h3>
<div class="highlight"><pre><span></span><span class="p"><</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">"submit"</span> <span class="na">name</span><span class="o">=</span><span class="s">"ctl00$ContentPlaceHolder1$btnSubmit"</span>
<span class="na">value</span><span class="o">=</span><span class="s">"Button"</span> <span class="na">id</span><span class="o">=</span><span class="s">”btnSubmit”</span> <span class="p">/></span>
</pre></div>
<p>Actually it tells the control to defer to the naming behavior mode of the parent container control.</p>
<h2>Predictable (default):</h2>
<div class="highlight"><pre><span></span><span class="nt"><asp:Button</span> <span class="na">ID=</span><span class="s">”btnSubmit”</span> <span class="na">runat=</span><span class="s">”server”</span> <span class="na">Text=</span><span class="s">”Button”</span> <span class="na">ClientIDMode=</span><span class="s">”Predictable”</span> <span class="nt">/></span>
</pre></div>
<h3>The Rendered HTML:</h3>
<div class="highlight"><pre><span></span><span class="p"><</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">"submit"</span> <span class="na">name</span><span class="o">=</span><span class="s">"ContentPlaceHolder1$btnSubmit"</span>
<span class="na">value</span><span class="o">=</span><span class="s">"Button"</span> <span class="na">id</span><span class="o">=</span><span class="s">”ContentPlaceHolder1_btnSubmit”</span> <span class="p">/></span>
</pre></div>
<p>Remove the ugly default auto generated ID prefix "ctl00"</p>
<h2>Static:</h2>
<div class="highlight"><pre><span></span><span class="nt"><asp:Button</span> <span class="na">ID=</span><span class="s">”btnSubmit”</span> <span class="na">runat=</span><span class="s">”server”</span> <span class="na">Text=</span><span class="s">”Button”</span> <span class="na">ClientIDMode=</span><span class="s">”Static”</span> <span class="nt">/></span>
</pre></div>
<h3>The Rendered HTML:</h3>
<div class="highlight"><pre><span></span><span class="p"><</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">"submit"</span> <span class="na">name</span><span class="o">=</span><span class="s">"ctl00$ContentPlaceHolder1$btnSubmit"</span>
<span class="na">value</span><span class="o">=</span><span class="s">"Button"</span> <span class="na">id</span><span class="o">=</span><span class="s">”btnSubmit”</span> <span class="p">/></span>
</pre></div>
<p>It'll rendered the ID like what you set for ID attribute</p>
<h1>Where you can set the ClientIDMode:</h1>
<h2>Web.config:</h2>
<p>You can set the ClientIDMode in web.config file inside page tag</p>
<div class="highlight"><pre><span></span><span class="nt"><configuration></span>
<span class="nt"><system.web></span>
...
<span class="nt"><pages</span> <span class="na">ClientIDMode=</span><span class="s">“Static“</span> <span class="nt">/></span>
...
<span class="nt"></system.web></span>
<span class="nt"></configuration></span>
</pre></div>
<h2>Page:</h2>
<p>You can set the ClientIDMode on the page tag in the upper of ASPX file.</p>
<div class="highlight"><pre><span></span><span class="cp"><%</span><span class="err">@</span> <span class="no">Page</span> <span class="no">Title</span><span class="o">=</span><span class="err">””</span> <span class="no">Language</span><span class="o">=</span><span class="err">”</span><span class="n">C</span><span class="c1">#” MasterPageFile=”~/Site.Master” AutoEventWireup=”true”</span>
<span class="no">CodeBehind</span><span class="o">=</span><span class="err">”</span><span class="no">Demo</span><span class="o">.</span><span class="n">aspx</span><span class="o">.</span><span class="n">cs</span><span class="err">”</span> <span class="no">Inherits</span><span class="o">=</span><span class="err">”</span><span class="no">ClientIDModeDemo</span><span class="o">.</span><span class="n">Demo</span><span class="err">”</span> <span class="no">ClientIDMode</span><span class="o">=</span><span class="err">”</span><span class="no">Static</span><span class="err">“</span> <span class="cp">%></span><span class="x"></span>
</pre></div>
<h2>Control:</h2>
<p>You can set it for specific control, but remember the main control is inherit this property, and this what we do in the demo.</p>
<div class="highlight"><pre><span></span><span class="nt"><asp:Button</span> <span class="na">ID=</span><span class="s">”btnSubmit”</span> <span class="na">runat=</span><span class="s">”server”</span> <span class="na">Text=</span><span class="s">”Button”</span> <span class="na">ClientIDMode=</span><span class="s">”Static”</span> <span class="nt">/></span>
</pre></div>
</div>
<div class="tag-cloud">
<p>
</p>
</div>
<div id="disqus_thread"></div>
<script type="text/javascript">
var disqus_shortname = 'emadmokhtarsframework';
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript" rel="nofollow">comments powered by Disqus.</a></noscript>
</article>
<footer>
<p>© Emad Mokhtar </p>
<p>Built using <a href="http://getpelican.com" target="_blank">Pelican</a> - <a href="https://github.com/alexandrevicenzi/flex" target="_blank">Flex</a> theme by <a href="http://alexandrevicenzi.com" target="_blank">Alexandre Vicenzi</a></p> </footer>
</main>
<!-- Google Analytics -->
<script type="text/javascript">
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-11401860-2', 'auto');
ga('send', 'pageview');
</script>
<!-- End Google Analytics -->
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "BlogPosting",
"name": "ASP.NET 4 webforms new feature: ClientIDMode",
"headline": "ASP.NET 4 webforms new feature: ClientIDMode",
"datePublished": "2010-05-04 18:17:00+03:00",
"dateModified": "",
"author": {
"@type": "Person",
"name": "EmadMokhtar",
"url": "http://www.emadmokhtar.com/author/emadmokhtar.html"
},
"image": "http://www.emadmokhtar.com/images/profile.jpg",
"url": "http://www.emadmokhtar.com/aspnet-4-webforms-new-feature-clientidmode.html",
"description": "Today we'll examine ClientIDMode the new feature of ASP.NET 4 which makes life easier on developers when writing client-side scripting/code like javascript or jQuery. ClientIDMode control property: You can assign ClientIDMode property for ASP.NET controls which is take 4 values AutoID Inherit Predictable Static And I'll demonstrate what the different between those 4 values. Demo: We've simple ASP.NET 4 page with Master page, with one button on it, and We'll set the ClientIDMode for the button control and examine what's happen when ASP.NET render it to HTML. AutoID: <asp:Button ID=”btnSubmit” runat=”server” Text=”Button” ClientIDMode=”AutoID”/> The Rendered HTML: <input type="submit" name="ctl00$ContentPlaceHolder1$btnSubmit" value="Button" id=”ctl00_ContentPlaceHolder1_btnSubmit” /> It's rendered like what ASP.NET 3.5 do, so if you want to renter control's ID like ASP.NET 3.5 set ClientIDMode to AutoID. Inherit: <asp:Button ID=”btnSubmit” runat=”server” Text=”Button” ClientIDMode=”Inherit” /> The Rendered HTML: <input type="submit" name="ctl00$ContentPlaceHolder1$btnSubmit" value="Button" id=”btnSubmit” /> Actually it tells the control to defer to the naming behavior mode of the parent container control. Predictable (default): <asp:Button ID=”btnSubmit” runat=”server” Text=”Button” ClientIDMode=”Predictable” /> The Rendered HTML …"
}
</script></body>
</html>