Resolving a problem with a control-associating a Web control reference with a client

If the programmer who just transitioned from ASP to ASPX complains about the ID of the client element generated by ASPX, it's too long! If you want to use it in client script, such as using:

The following are the referenced contents: document.getElementById (' Repeater1_ctl00_button1 ')

This kind of way to quote, very inconvenient.

Imagine that you want to generate an interface like this, and then change the text in the corresponding box in front of the mouse when you mousemove the button, in the format: ' Hello World ' + the button's ID + '--' + new Date (). valueof ()

First of all, what is the use of this, where to use, first , How do you achieve it?

My approach is to use server controls to deal with them, as the title says, as long as we choose the right idea: Suppose we have a server control that assigns two associated controls to the control (here's Buton and textbox), and we have the two controls on the client, Set the custom properties individually to point directly to the other control.

If you have a reference to another control, we can get a reference to the associated textbox directly in the instance of the button, bypassing getElementById ().
Let's take a look at the use of this server-side control:

The following is the referenced content:<div> <asp:repeater id= "Repeater1" runat= "Server" > <ItemTemplate> <asp:textbox id= "TextBox1" runat= "Server" width= "445px" ></asp:TextBox> <asp:button id= "Button1" runat= "Server" text= "button" onmousemove= "Return Button_onmousemove (this,event)"/> <cc1:webcontrollinker id= "WebControlLinker1" runat= "webcontrolfirst=" Button1 "webcontrolsecond=" TextBox1 "/> </ItemTemplate> </asp:Repeater> </div>

Pay attention, Cc1:webcontrollinker. OfWebcontrolfirst= "Button1" webcontrolsecond= "TextBox1"We set up the two associated controls.

They generate the following code when the page is printed:
Page Rendering:

The following is the referenced content:<div> <input name= "Repeater1$ctl00$textbox1" type= "text" id= "Repeater1_ctl00_textbox1" style= "width:445px;"/> <input type= "Submit" Name= "Repeater1$ctl00$button1" value= "button" id= "Repeater1_ctl00_button1" onmousemove= " Return Button_onmousemove (this,event) "/> <span id= "Repeater1_ctl00_webcontrollinker1" ></span> <input name= "Repeater1$ctl01$textbox1" type= "text" id= "Repeater1_ctl01_textbox1" style= "width:445px;"/> <input type= "Submit" Name= "Repeater1$ctl01$button1" value= "button" id= "Repeater1_ctl01_button1" onmousemove= " Return Button_onmousemove (this,event) "/> <span id= "Repeater1_ctl01_webcontrollinker1" ></span> <input name= "Repeater1$ctl02$textbox1" type= "text" id= "Repeater1_ctl02_textbox1" style= "width:445px;"/> <input type= "Submit" Name= "Repeater1$ctl02$button1" value= "button" id= "Repeater1_ctl02_button1" onmousemove= " Return Button_onmousemove (this,event) "/> <span id= "Repeater1_ctl02_webcontrollinker1" ></span> <input name= "Repeater1$ctl03$textbox1" type= "text" id= "Repeater1_ctl03_textbox1" style= "width:445px;"/> <input type= "Submit" Name= "Repeater1$ctl03$button1" value= "button" id= "Repeater1_ctl03_button1" onmousemove= " Return Button_onmousemove (this,event) "/> <span id= "Repeater1_ctl03_webcontrollinker1" ></span> <input name= "Repeater1$ctl04$textbox1" type= "text" id= "Repeater1_ctl04_textbox1" style= "width:445px;"/> <input type= "Submit" Name= "Repeater1$ctl04$button1" value= "button" id= "Repeater1_ctl04_button1" onmousemove= " Return Button_onmousemove (this,event) "/> <span id= "Repeater1_ctl04_webcontrollinker1" ></span> </div>

The following are the contents of the reference: <script type= "Text/javascript" > <!-- document.getElementById (' Repeater1_ctl00_button1 '). setattribute (' TextBox1 ', document.getElementById (' Repeater1_ Ctl00_textbox1 ')); document.getElementById (' Repeater1_ctl00_textbox1 '). setattribute (' Button1 ', document.getElementById (' Repeater1_ Ctl00_button1 ')); document.getElementById (' Repeater1_ctl01_button1 '). setattribute (' TextBox1 ', document.getElementById (' Repeater1_ Ctl01_textbox1 ')); document.getElementById (' Repeater1_ctl01_textbox1 '). setattribute (' Button1 ', document.getElementById (' Repeater1_ Ctl01_button1 ')); document.getElementById (' Repeater1_ctl02_button1 '). setattribute (' TextBox1 ', document.getElementById (' Repeater1_ Ctl02_textbox1 ')); document.getElementById (' Repeater1_ctl02_textbox1 '). setattribute (' Button1 ', document.getElementById (' Repeater1_ Ctl02_button1 ')); document.getElementById (' Repeater1_ctl03_button1 '). setattribute (' TextBox1 ', document.getElementById (' Repeater1_ Ctl03_textbox1 ')); document.getElementById (' Repeater1_ctl03_textbox1 '). setattribute (' Button1 ', document.getElementById (' Repeater1_ Ctl03_button1 ')); document.getElementById (' Repeater1_ctl04_button1 '). setattribute (' TextBox1 ', document.getElementById (' Repeater1_ Ctl04_textbox1 ')); document.getElementById (' Repeater1_ctl04_textbox1 '). setattribute (' Button1 ', document.getElementById (' Repeater1_ Ctl04_button1 ')); --> </script>

With the above, the script we're going to execute can simply be written like this:

The following are the referenced contents: Untitled Page </title> <script type= "Text/javascript" > function Button_onmousemove (obj,e) { Obj. Textbox1.value = "Hello world" + obj. TextBox1.Button1.id + '--' + new Date () valueof ();; } </script>

obj. Textbox1.value this way, visit, also pretty cool?

Please contact the site, timely note your name, contact email: Post@chinaz.com.