The name of the control using client scripts in the User Control

Source: Internet
Author: User

Asp.net provides a good module-level multiplexing technology-user controls, which greatly facilitates the construction of Web websites and improves efficiency. When the user control is used more often, more problems will be encountered. Recently, a problem occurs when a user control needs to use a client script and the client script needs to access the control contained in the control. The problem is that when a user control is included in An ASPX page and displayed on the user client, the name of the control in the user control will change, they are no longer the names you used to design the user control, but have two related names:

ID-the client can access this client control through this ID. Asp.net sends an ID to each control in the form of "User Control ID _ id of this control ", if the user control is nested, the format is "top-level user control ID _ lower-level user control ID _ The Control ID"

Name-the client can also use this name to access the client control. Asp.net outputs the name "User Control ID: Control ID" to each control ", if the user control is nested, the format is "top-level user control ID: lower-level user control ID: the Control ID ".

Example: <input name = "webusercontrol11: textbox1" type = "text" id = "webusercontrol11_textbox1"/>

When designing a user control, a textbox with the ID texbox1 is placed. The user control is placed on An ASPX page and the user control ID is webusercontrol11, finally, the textbox of the user control is displayed on the client.

When the client submits the request to the server, it submits the request based on the control name. That is to say, for the server, the client name is meaningful and the ID is not required.

When writing a client script, you cannot predict the ID of your user control to be added to the ASPX page, nor how many layers are nested in the user control, therefore, you cannot refer to these controls during design.

Fortunately, the webcontrol and htmlcontrol controls of Asp.net have a runtime attribute uniqueid, which is used to obtain the unique identifier of the server control, which is defined in hierarchical form. In the preceding example, the uniqueid of the control textbox1 is "webusercontrol11: textbox1", which is consistent with the name of the control on the generated client.

Therefore, we can use the uniqueid of the control to obtain the name of the client at runtime, so that we can use this name to control the client control.

OK. Design a client script based on this idea:

The user control is very simple. Place a textbox. We will set a mouse over the textbox to break the client script and assign a value to the textbox. The Code is as follows:
  
<% @ Control Language = "C #" autoeventwireup = "false" codebehind = "webusercontrol1.ascx. cs" inherits = "webapplication3.webusercontrol1" targetschema = "http://schemas.microsoft.com/intellisense/ie5" %>
<Asp: textbox id = "textbox1" runat = "server" onmouseover = "over ()"> </ASP: textbox>
<Script language = JavaScript>
<! --
Function over ()
{
Document. All. <% = textbox1.uniqueid %>. value = "Kent ";
}
// -->
</SCRIPT>

Drag the user control to An ASPX page, compile and browse the page, and report a script error: Missing ';'

When you move the mouse over Textbox, another script error is reported: "The object is missing"

Check found that the client reference label cannot contain the ":" symbol, that is, the client cannot use the control name for reference. The webcontrol and htmlcontrol controls of Asp.net also have the runtime attribute clientid, which is used to obtain. the server control identifier generated by. net, that is, to obtain the Client ID of the Control. We can use this attribute to try it again:

Document. All. <% = textbox1.clientid %>. value = "Kent ";

Run again. OK is successful. When the mouse moves the textbox, "Kent" appears in the textbox ".

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.