Obtain the control ClientID of the aspx page from the external js File

Preface
When using MasterPage, UserControl, and other containers, asp.net automatically generates a ClientID (which can be generated in the Control Tree, otherwise it will not be generated) to avoid repeated naming of controls ).
For example, in ContentPlaceHolder1, Button1 generates the ClientID "ctl00_ContentPlaceHolder1_Button1" by default.
What we see in the mark up output by Render is also the ClientID. Therefore, when we use JavaScript to operate on the control elements, we must use ClientID to search for the control.
Inline Solution
If the JavaScript code is written in the. aspx file, that is, the Inline Script. When the page is generated, We can bind the ClientID of the control to the page Mark up through the binding mechanism, so we can use:
Document. getElementById ("<% = Me.txt Test. ClientID %> ")
To obtain the real reference of a control. Of course, methods such as FindControl can also be written in <% =... %> to BIND server data to the client.
Solutions for external JS
However, in some cases, in order to decouple JavaScript, we often write it in the. js file separately and reference it to the aspx file. In this case, the code in the. js file cannot be bound to the server data through <% =... %>, so the above method cannot be used.
In this case, the simple solution is to directly write the ClientID of the control in JavaScript, but this increases the coupling between JS files and ASPX, which is not recommended.
There are two methods that I commonly use:
Case:
Default5.aspx is the content page of MasterPage. master, the main file in this example.
JScript. js is an external js file used to process JavaScript operations.
Button1 is an <ASP: Button> In Default5.aspx to display the effect.
Button2 is a <input type = button> In Default5.aspx to trigger JavaScript.
Requirement: Click Button2 to change the text on Button1 to "from extended js"
Solution 1: use an inline JS accesser
To obtain the ClientID dynamically generated by ASPX in external JS, you can add an accesser to the aspx page, similar to the attributes in the OO language:
Add the following code in defa5.5.aspx:
Purpose: ① declare the getClientId accesser and register the ClientID of Button1. ② Reference the JScript. js File Copy codeThe Code is as follows: <script type = "text/javascript">
Function getClientId ()
{
Var paraId1 = '<% = Button1.ClientID %> ';
Return {Id1: paraId1 };
}
</Script>
<Script type = "text/javascript" src = "JScript. js"> </script>
Next, we can implement the requirements in JScript. js as follows:
Function ChangeText ()
{
Var btn = document. getElementById (getClientId (). Id1 );
Btn. value = "from extended js ";
}

GetClientId (). Id1 looks very OO, and it also supports the JS smart prompt of VS2008. After you press ".", you can select Id1 in the prompt.
If multiple controls need to be registered, you only need to register them to the accessors. Below is a complete Demo code:
Default5.aspxCopy codeThe Code is as follows: <% @ Page Language = "C #" MasterPageFile = "~ /MasterPage. master "Title =" Untitled Page "%>
<Script runat = "server">
</Script>
<Asp: Content ID = "Content1" ContentPlaceHolderID = "head" Runat = "Server">
<Script type = "text/javascript">
Function getClientId ()
{
Var paraId1 = '<% = Button1.ClientID %>'; // Register Control 1
Var paraId2 = '<% = TextBox1.ClientID %>'; // Register Control 2
Return {Id1: paraId1, Id2: paraId2}; // generate the accesser
}
</Script>
<Script type = "text/javascript" src = "JScript. js"> </script> // reference external js
</Asp: Content>
<Asp: Content ID = "Content2" ContentPlaceHolderID = "ContentPlaceHolder1" Runat = "Server">
<Asp: TextBox ID = "TextBox1" runat = "server"> </asp: TextBox>
<Asp: Button ID = "Button1" runat = "server" Text = "Button"/>
<Input id = "Button2" type = "button" value = "button" onclick = "ChangeText ();"/>
</Asp: Content>
JScript. js
Function ChangeText ()
{
Var btn = document. getElementById (getClientId (). Id1 );
Btn. value = "from extended js ";
Var btn = document. getElementById (getClientId (). Id2 );
Btn. value = "from extended js ";
}

Solution 2: Use JS global variables
Another way to compare OO is to use JS global variables. Similarly, you also need to add a JS Code in Default5.aspx as a global variable to provide ClientID:Copy codeThe Code is as follows: <script type = "text/javascript">
Var globals = {};
Globals. controlIdentities = {};
Globals. controlIdentities. someControl1 = '<% = Button1.ClientID %> ';
Globals. controlIdentities. someControl2 = '<% = TextBox1.ClientID %> ';
</Script>
<Script type = "text/javascript" src = "JScript. js"> </script>

Next, we can implement the requirements in JScript. js as follows:Copy codeThe Code is as follows: function ChangeText ()
{
Var btn = document. getElementById (globals. controlIdentities. someControl1 );
Btn. value = "from extended js ";
}

Globals. controlIdentities. someControl1. Similarly, it also supports JS smart prompts that are very poor in VS2008. After you press ".", you can select someControl1 in the prompt.
The following is a complete Demo code:
Default5.aspxCopy codeThe Code is as follows: <% @ Page Language = "C #" MasterPageFile = "~ /MasterPage. master "Title =" Untitled Page "%>
<Script runat = "server">
</Script>
<Asp: Content ID = "Content1" ContentPlaceHolderID = "head" Runat = "Server">
<Script type = "text/javascript">
Var globals = {};
Globals. controlIdentities = {};
Globals. controlIdentities. someControl1 = '<% = Button1.ClientID %> ';
Globals. controlIdentities. someControl2 = '<% = TextBox1.ClientID %> ';
</Script>
<Script type = "text/javascript" src = "JScript. js"> </script>
</Asp: Content>
<Asp: Content ID = "Content2" ContentPlaceHolderID = "ContentPlaceHolder1" Runat = "Server">
<Asp: TextBox ID = "TextBox1" runat = "server"> </asp: TextBox>
<Asp: Button ID = "Button1" runat = "server" Text = "Button"/>
<Input id = "Button2" type = "button" value = "button" onclick = "ChangeText ();"/>
</Asp: Content>

JScript. jsCopy codeThe Code is as follows: function ChangeText ()
{
Var btn = document. getElementById (globals. controlIdentities. someControl1 );
Btn. value = "from extended js ";
Var txt = document. getElementById (globals. controlIdentities. someControl2 );
Btn. value = "from extended js ";
}

Conclusion:
In the above two methods, aspx and js are not fully decoupled. Therefore, it is best to add the following in the js file:
/// <Reference path = "Default5.aspx"/>