Obtain the Asp.net webpage control using javascript and verify the webpage input (obtain the Client ID from the server)

Today, I want to test the validity of asp.net input through javascript, using the original Form method document. getElementById ("textBox "). value, and the document. getElementById ("textBox") returns Null, indicating that the method is in. when WebForms is adopted in. net, the Control id cannot be obtained. after a long time of material is found, the system finally knows the problem and the solution.

Cause:

In the preceding example, the ID of a TextBox Control on the server is txtUserName, but the ID generated on the client may be LoginForm_txtUserName, because it is placed in a NamingContainer with the ID of LoginForm. To enable the Client ID generated by the server control inside the component to be unique on the page, WebForms introduces the NamingContainer concept. The ID generated by the client for the server control in NamingContainer. The "client ID" of NamingContainer is used as the prefix. This "recursion" ensures that the server controls are unique in the Client ID.

The momentum of Web 2.0 in the industry has not been stopped yet, and its closely related AJAX technology is also widely used. AJAX is basically a technology implemented by using JavaScript in a browser. Therefore, it is common to use JavaScript to operate DOM elements. On a non-WebForms page, you can write the following code:

<Input type = "text" id = "textBox"/>

<Script language = "javascript" type = "text/javascript">
Document. getElementById ("textBox"). value = "Hello World! ";
</Script>

However, due to NamingContainer, when using the WebForms server-side control, we may not be able to obtain the text box (generated <input/> element) on the client through the textBox ). To solve this problem, the control model on the server side provides a ClientID attribute. Through this attribute, we can obtain the control's final client ID on the server side. For example, if the above Code is placed in a user control, it must be written as follows:

<% @ Control Language = "C #" AutoEventWireup = "true" %>

<Asp: TextBox runat = "server" ID = "textBox"/>

<Script language = "javascript" type = "text/javascript">
Document. getElementById ("<% = this. textBox. ClientID %>"). value = "Hello World! ";
</Script>

At this point, when the control is placed on the page, the code generated on the client will be:

<Input name = "DemoControl1 $ textBox" type = "text" id = "DemoControl1_textBox"/>

<Script language = "javascript" type = "text/javascript">
Document. getElementById ("DemoControl1_textBox"). value = "Hello World "!;
</Script>

Note that the names and IDs of the <input/> elements leave traces of NamingContainer. Because the <% = %> flag is used on the page to directly output the ID of the server control, the JavaScript code on the client can be correctly accessed to the server <asp: textBox/> corresponding client <input/> element.

Test entry solution:

The instance code is as follows:
<Asp: Content ID = "Content1" ContentPlaceHolderID = "ContentPlaceHolder1" Runat = "Server">
<Script language = "javascript" type = "text/javascript">
Function CheckSchEnter ()
{
Var obj = document. getElementById ("<% = this. tValue. ClientID %> ");
If (obj. value = ""){
Alert ("Enter the query keyword ");
Obj. focus ();
Return false;
}
Else {
Return true;
}
}
</Script>
<Form id = "form1" runat = "server">
<Div>
Search: keyword <asp: TextBox ID = "tValue" runat = "server"> </asp: TextBox>
<Asp: Button ID = "btnSearch" runat = "server" Height = "25px" Text = "Search" OnClientClick = "return CheckSchEnter ()" onclick = "btnSearch_Click"/>
<Div>
</Form>