Client-Side Control IDs in ASP.NET WebForms

Client-Side Control IDs in ASP.NET WebForms – किसी ASP.NET Webpage के किसी Specific Part में कई बार ऐसी जरूरत होती है, जहां हमें Render होने वाले किसी Control के HTML Element को उसके Unique ID के माध्‍यम से Client Side में Access व Manipulate करना होता है।

उदाहरण के लिए कई बार ASP.NET Application की Code-Behind File को ये जानने की जरूरत होती है कि किस Client Side Control ने Postback को Trigger किया है, ताकि उस Particular Control को Uniquely Identify करके Extra Specific तरीके से Treat किया जा सके।

पहली नजर में ये काम काफी आसान मालूम पडता है, क्योंकि सभी Server Side Controls का एक Unique Server ID होता है, जिसके माध्‍यम से Server Side Code-Behind File द्वारा उसे Access व Manipulate किया जाता है। लेकिन Server Side ID को हम Client Side में ज्यों का त्यों उपयोग में नहीं ले सकते और इसके दो कारण हैं।

• पहला कारण ये है कि किसी .aspx File में ऐसे Server Side Control को भी Specify किया जा सकता है, जिसका कोई Server-Side ID न हो, भले ही वह Client-Side के Automatic Postback जैसे Feature को Use क्यों न कर रहा हो।
• दूसरा कारण ये है कि यदि हमारा Control किसी अन्‍य User Control के अन्दर हो, और हम अपने Page पर उस Control को एक से ज्यादा बार Repeat कर दें, तो उस Control का ID भी Multiple बार Repeat हो जाता है, जबकि किसी भी Page पर एक ID केवल एक ही बार होना चाहिए।

उदाहरण के लिए ऐसा तब हो सकता है, जब हम हमारे ASP.NET Application में किसी User Control के अन्दर किसी अन्‍य Web Control को Place करते हैं और फिर उस User Control को कई बार Repeat कर देते हैं।

Master Pages में भी यही प्रक्रिया हो सकती है और Master Pages में ऐसा निश्चित रूप से तब होता है, जब हम हमारे उस पर GridView जैसे किसी Data-Bound Control को Use करते हैं, जो कि Display किए जाने वाले हर Record के Row के लिए समान Control को Repeat करता है।

इस प्रकार की स्थिति को Handle करने के लिए ASP.NET Framework, Server Side Control के ID के रूप में उसके सभी Naming Containers के नामों को Use करता है और यदि वह Control कोई Data-Bound Control हो, तो उस Data Bound Control के Numeric Index को भी इस ID के नाम में Use कर लिया जाता है।

हालांकि ये नाम काफी अटपटा दिखाई देता है, लेकिन फिर भी हर Server Side Control के लिए ये एक Unique नाम होता है। जैसे:

   ctl00_ContentPlaceHolder1_ParentPanel_NamingPanel_TextBox1

Naming Container एक ऐसा Control होता है, जिसमें INamingContainer Interface को Implement किया गया होता है और कोई Control इसे तब Implement करता है, जब उसे अपने किसी Child Control के लिए Unique Naming Scope Provide करने की जरूरत हो, ताकि ID Conflict न हो।

सामान्‍यत: ASP.NET Developers Client Side ID को ज्यादा महत्व नहीं देते, क्योंकि ASP.NET Web Forms को लगभग पूरी तरह से Desktop Application Develop के Simulation के रूप में विकसित किया गया था। लेकिन Modern Web Development में हमें Client Side Technologies को भी ध्‍यान में रखना जरूरी होता है।

क्योंकि Client Side JavaScript व CSS वर्तमान में Modern Web Application की मुख्‍य Client-Side Technologies हैं, जिन्हें काफी उपयोग में लिया जाता है। ताकि Web Application की Performance को Increase करते हुए Server Side Load कम किया जा सके और JavaScript व CSS जैसी Technologies विभिन्न Rendered HTML Elements के ID पर काफी निर्भर करते हैं, जबकि Naming Container तरीके से Generate होने वाले ID काफी अनिश्चित होते हैं, जिन पर पूरी तरह से भरोसा नहीं किया जा सकता।

इसलिए ASP.NET 4 में ClientIDMode नाम की एक नई Property को Add किया गया है, जो किसी Entire Page, Page के Section या किसी Individual Control के Naming Behavior को पूरी तरह से Change करने की सुविधा Provide करता है।

ClientIDMode Property मुख्‍य Control Class का एक Member है, जिससे सभी ASP.NET Web Controls Derived हैं। ये Property एक Enumeration के रूप में निम्नानुसार चार Properties को Support करता है:

AutoID Value

जब ClientIDMode Property में ये मान Set रहता है, तब ASP.NET Server, Client-Side ID Create करने के लिए Naming Containers का प्रयोग करता है, जहां हर Control का ID एक Underscore से Separated रहता है।

जैसे:   ctl00_ContentPlaceHolder1_ParentPanel_NamingPanel_TextBox1

Static Value

जब ClientIDMode Property में ये मान Set रहता है, तब ASP.NET Framework, Client-Side ID को Server-Side ID Value से ही Set कर देता है।

जैसे: TextBox1

Predictable Value

जब ClientIDMode Property में ये मान Set रहता है, तब ASP.NET Framework, Client-Side ID Create करने के लिए AutoID तरीके को ही Use करता है, लेकिन उसे थोडा सरल बना देता है। जिसमें सबसे पहले Top-Level Page के automatically Generated ID को Include नहीं किया जाता। परिणामस्वरूप Generate होने वाले Client-Side ID की शुरूआत किसी Automatically Generated Text जैसे कि ctl00 से न होने की वजह से Client-Side ID ज्यादा Predictable हो जाता है।

जैसे:   ContentPlaceHolder1_ParentPanel_NamingPanel_TextBox1

Inherit Value

जब ClientIDMode Property में ये मान Set रहता है, तब ASP.NET Framework, Client-Side ID को Set करने के लिए अपने Parent के Naming Container की Strategy को Use करता है। अथवा यदि इसे Page में Set किया गया हो, तो ये उस Naming Strategy को Use करता है, जिसे Web.config File के <pages> Element में Specify किया गया होता है।

Default रूप से सभी Controls की ClientIDMode Setting Property का मान Inherit ही होता है, जिसका मतलब यही है कि Control अपने Parent के Naming Container की Strategy को ही Use करता है। जबकि Inheritance हमेंशा Control से Bubble होकर Top-Level Page पर पहुंचता है, जो कि ClientIDMode Setting को Web.config File के <pages> Element से Current Control तक Inherit करता है।

जबकि एक Newly Created ASP.NET 4 Website में Web.config नाम की Root File में ClientIDMode को Predicable Set कर दिया जाता है। लेकिन जो Website ASP.NET के पिछले Version से ASP.NET 4 पर Migrate की गई होती हैं, उनमें Visual Studio निम्नानुसार Code के माध्‍यम से Web.config File में ClientIDMode को Backward Compatibility बनाए रखने के लिए AutoID Value से Set करता है:

[code]
File Name: Web.config
<?xml version="1.0"?>
<!--
 For more information on how to configure your ASP.NET application, please visit
 http://go.microsoft.com/fwLink/?LinkId=169433
-->

<configuration>
  <System.web>
    <pagesclientIDMode="AutoID" />
    <compilationdebug="true" targetFramework="4.5" />
    <httpRuntimetargetFramework="4.5" />
  </System.web>
</configuration>
[/code]

जबकि यदि हम चाहें तो अपनी जरूरत के अनुसार हम इस ClientIDMode Property को Modify या Delete भी कर सकते हैं।

ClientIDMode Setting के Behavior की Working को Try करने के लिए हमें Master Pages या Data-Bound Controls को Use करना पडता है, जिसके बारे में हम आगे विस्तार से जानेंगे। लेकिन इसकी Working को Quickly Test करने के लिए हम Visual Studio में “FILE =>Website” Menu Option को Click कर सकते है और दिखाई देने वाले “New Web Site” Dialog Box में निम्न चित्रानुसार “ASP.NET Web Forms Site” Option को Select करके OK Button पर Click कर सकते हैं:

परिणामस्वरूप पूरी एक Predefined Website हमारे Solution Sidebarमें Load हो जाती है और हमारे सामने Default.aspx File Open हो जाती है। इस Default.aspx File में दिखाई देने वाले BodyContent Region में हम एक निम्नानुसार एक Textbox Control Add कर सकते हैं:

[code]
<ASP:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
<ASP:TextBox ID="TextBox1" runat="server"></ASP:TextBox>
</ASP:Content>
[/code]

Add किए गए इस TextBox के ClientIDMode Property में Default रूप से “Inherit” मान Set होता है, जो कि अपने Parent यानी Page के ClientIDMode Value को Inherit करता है और स्वयं Page अपनी Root File Web.config से Inherit करता है।

इस प्रकार से ये एक Predictable Value को Represent करता है और यदि हम हमारे इस Page को Run करें, तो Resultant Output के रूप में Render होने वाले हमारे TextBox का ID Attribute निम्नानुसार होता है:

<input name=”ctl00$MainContent$TextBox1″ type=”text” id=”MainContent_TextBox1“/>

हम देख सकते हैं कि ClientIDMode Setting ने Client-Side केname Attribute की Value को प्रभावित नहीं किया है। बल्किname Attribute का मान एक ऐसी String से Set हुआ है, जो उस स्थिति में लगभग Identical होता है, जब ClientIDMode Property में Value के रूप में AutoID Set होता है। अन्तर केवल इतना ही होता है कि name Attribute में Specified मान को $ Symbol से Separate किया जाता है जबकि id Attribute में Specified मान एक Underscore Symbol से Separated होते हैं।

अब यदि हम हमारे TextBox को निम्‍नानुसार ClientIDMode Attribute को Static Value से Set करते हुए Modify कर दें-

<ASP:TextBox ID=”TextBox1″ runat=”server” ClientIDMode=”Static”></ASP:TextBox>

तो TextBox Control के इस बार Render होने वाले HTML Markup में id के रूप में वही मान होता है, जो उस TextBox Control के Server-Side ID का मान होता है।

   <input name=”ctl00$MainContent$TextBox1″ type=”text” id=”TextBox1″/>

ClientIDMode Property के बारे में समझने वाली बात ये भी है कि हम किसी भी Control के लिए इस Property को किसी Complex Page की पूरी Hierarchy में कभी भी और कहीं भी Set कर सकते हैं।

उदाहरण के लिए हमारे पास एक ऐसा Container हो सकता है, जिसमें Static Naming को Use किया गया है और इसमें कुछ अन्‍य Controls भी Contained हैं, जो कि Predictable Naming को Use करते हैं।

इस स्थिति में जिस Control के साथ Predictable Naming Set है, उसके ID के रूप में Static Name से शुरू होने वाले Parent Control का नाम Concatenate होकर Set हो जाता है। जबकि Higher-Level Naming Containers Ignore हो जाते हैं।

इस प्रकार से हम ClientIDMode Property के बारे में समझ सकते हैं कि ये किस प्रकार से काम करता है। लेकिन जब हम किसी Real-World Application में इसे Use करते हैं, तब इसे Use करते समय हम निम्न Guidelines को ध्‍यान में रख सकते हैं।

• यदि हमें किसी Client-Side Element को Refer करने की कभी भी जरूरत न पडने वाली हो, तो हमें Client-Side ID से सम्बंधित Issues के बारे में सोंचने की जरूरत नहीं होती।
• यदि हमें किसी Client-Side Element को कभी-कभार ही Use करना हो, तो हम इसकी ClientIDMode Property में Static Set कर सकते हैं।
• यदि हमें हमारे Client-Side Element के ID को Frequently Use करना हो, तो उस स्थिति में हम Static ID को Entire Page Level के लिए Use कर सकते हैं। लेकिन यदि उस Page पर कोई Data-Bound Control या Repeated User Control हो, तो उस स्थिति में हम केवल इन Specific Controls के लिए ClientIDMode Property को Predictable Value से Set कर सकते हैं।
• यदि हमें हमारे Client-Side IDs को किसी Data-Bound Control में Use करना हो, तो उस स्थिति में उन Controls की ClientIDMode Property को Predictable Value से Set करके तथा ClientIDRowSuffix Property का प्रयोग करके अपने Development Task को कुछ सरल कर सकते हैं।