Objective
In order to avoid duplicate naming of controls when using MasterPage, UserControl, and so on, ASP.net automatically generates a ClientID in the container that can be generated in control tree, otherwise it will not be generated.
For example, the Button1 in ContentPlaceHolder1 generates the ClientID of "Ctl00_contentplaceholder1_button1" by default.
We see these clientid in the mark up render. So, when we use JavaScript to manipulate the control elements, we must use ClientID to find the control.
Solution in the case of inline
If the JavaScript code is written in an. aspx file, that is, inline script. When the page is generated, we can bind the control's ClientID to the page mark up by binding mechanism, so we can use:
document.getElementById ("<%=me.txttest.clientid%>")
To get a real reference to a control, and, of course, FindControl can also be written in <%=...%> to bind server-side data to the client.
External JS Case Solution
However, in some cases, to understand decoupling, we often write JavaScript separately in the. js file, and then refer to the ASPX file. In this case, the code in the. js file does not bind to the server data through <%=...%>, so the above method is not available.
The simple solution at this point is to write the control's ClientID directly in JavaScript, but this increases the coupling of JS files and ASPX, and is highly deprecated.
There are two kinds of methods that I usually use:
Case:
Default5.aspx is the Masterpage.master content page, the main file in this example.
Jscript.js is an external JS file that is used to handle JavaScript operations.
Button1 is a <asp:button> in default5.aspx, which is used to display the effect.
Button2 is a <input type=button> in default5.aspx, and is used to trigger JavaScript.
Requirements: Click Button2 to change the text on Button1 to "from extended JS"
Scheme one: use inline JS accessor
To obtain an ASPX dynamically generated ClientID in the external JS, you can do so by adding accessors to the ASPX page, similar to the attributes in Oo language:
We add the following code to the default5.aspx:
Function: ① declares the getclientid accessor and registers the Button1 ClientID. ② Reference Jscript.js File
Copy Code code 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'll be able to implement the requirements in Jscript.js:
function Changetext ()
{
var Btn=document.getelementbyid (Getclientid (). ID1);
Btn.value= "from extended JS";
}
Getclientid (). Id1 looks very oo, but also support VS2008 very poor JS smart hint, hit the "." Then you can choose ID1 in the hint.
If you have multiple controls that need to be registered, simply register them with the accessor, and here is a complete demo code:
Default5.aspx
Copy Code code 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};//build accessor
}
</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";
}
Scenario Two: Use JS global variable
There is also a way to compare Oo, is the use of JS global variables, the same, also need to add a default5.aspx in the JS code, as a global variable, to provide ClientID:
Copy Code code 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'll be able to implement the requirements in Jscript.js:
Copy Code code as follows:
function Changetext ()
{
var Btn=document.getelementbyid (globals.controlIdentities.someControl1);
Btn.value= "from extended JS";
}
Globals.controlIdentities.someControl1, the same, also support VS2008 very lame JS smart hint, hit "." Then you can choose SomeControl1 in the hint.
The following is a complete demo code:
Default5.aspx
Copy Code code 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.js
Copy Code code 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, there is no real implementation of ASPX and JS fully decoupled, so, in the JS file, it is best to add:
<reference path= "default5.aspx"/>
