I. Question proposal
Due to the overall layout and design needs, we often create master pages to achieve the uniformity of the entire website. Recently, due to the need for uniformity, I applied all the pages of the original project to the master pages. But there is an error ...... Record it here for your reference.
Ii. abstract model
Because the entire page contains too much content, I abstracted the most essential problems on this page.
The original single page is to use buttons to trigger JS events and insert the "(_)" function in the text field. The implementation code is as follows:
The following is a reference clip:
<% @ Page Language = "C #" autoeventwireup = "true" Codefile = "default. aspx. cs" inherits = "_ default" %>
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // En "" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<HTML xmlns = "http://www.w3.org/1999/xhtml">
<Head runat ="Server">
<Title> single page abstraction model-yjinglee </title>
<Script. Language = "JavaScript" type = "text/JavaScript">
// <! CDATA [
Function insert (){
Document. getelementbyid ("TXT"). value = Document. getelementbyid ("TXT"). Value + "(__)"; Return;
}
//]>
</SCRIPT>
</Head>
<Body>
<Form. ID = "form1" runat = "server">
<Div>
<Textarea id = "TXT" runat = "server" name = "TXT" Rows = "10" Cols = "50"> </textarea>
<Asp: button id = "btninsert" runat = "server" TEXT = "insert (_) on the server" nclientclick = "insert ();"/>
<Input id = "btninsert2" name = "insert" nclick = "insert ();" Type = "button" value = "client insert (_)" runat = "server"/> </div>
</Form>
</Body>
</Html> |
The above page can be used normally. After using the template page, the Code is as follows:
The following is a reference clip:
<% @ Page Language = "C #" masterpagefile = "~ /Masterpage. Master" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits = "default2" Title = "use master page abstraction model-yjinglee" %>
<Asp: Content ID = "content1" contentplaceholderid = "contentplaceholder1" runat = "server">
<Script. Language = "JavaScript" type = "text/JavaScript">
// <! CDATA [
Function insert (){
Document. getelementbyid ("TXT"). value = Document. getelementbyid ("TXT"). Value + "(__)"; return;
}
// ]]>
</script>
<div>
<textarea id="txt" runat="server" name="txt" Rows = "10" Cols = "50"> </textarea>
<Asp: button id = "btninsert" runat = "server" text = "server end insert (_)" nClientClick="insert();"/>
<input id="btnInsert2" name="insert" nclick="insert();" Type = "button" value = "client insert (_)" runat = "server"/> </div>
</ASP: content> |
After opening the file, press the button and the message "Microsoft JScript. runtime error: 'document. getelementbyid (...) 'appears (...)'
Is null or not an object ". Why? It turned out to be good. How can this strange problem occur when a master page is applied? After a long time, I discussed it with my friends and finally found the answer ......
Iii. Analysis nature
We used to take a closer look at the generated HTML code:
Single page:
The following is a reference clip:
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<HTML xmlns = "http://www.w3.org/1999/xhtml">
<Head> <title> single page abstraction model-yjinglee </title>
<Script. Language = "JavaScript" type = "text/JavaScript">
// <! CDATA [
Function insert (){
Document. getelementbyid ("TXT"). value = Document. getelementbyid ("TXT"). Value + "(__)";
Return;
}
//]>
</SCRIPT>
</Head>
<Body>
<Form. Name = "form1" method = "Post" Action = "default. aspx" id = "form1">
<Div>
<Input type = "hidden" name = "_ viewstate" id = "_ viewstate" Value = "/wepdwukmtezmje5nda0nwrkkleh1jsxjkibnuap2d9dra8lqek ="/>
</Div>
<Div>
<Textarea name = "TXT" id = "TXT" rows = "10" Cols = "50"> </textarea>
<Input type = "Submit" name = "btninsert" value = "server-side insert (_)" nclick="insert();" id="btnInsert" />
<input name="btnInsert2" type="button" id="btnInsert2" Nclick = "insert ();" value = "client insert (_)"/> </div>
<Div>
<Input type = "hidden" name = "_ eventvalidation" id = "_ eventvalidation" value="/wEWBALVid/5DQKShrDCCQL5w9POBQL5w4vOBZPGqxUU/yvoKTqG8k+uG8YroGTv" />
</div></form>
</body>
|
Let's take a look at the HTML code generated after the master page is applied:
The following is a reference clip:
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<HTML xmlns = "http://www.w3.org/1999/xhtml">
<Head> <title> master page abstraction model-yjinglee </title> <Body>
<Form. Name = "aspnetform" method = "Post" Action = "default2.aspx" id = "aspnetform">
<Div>
<Input type = "hidden" name = "_ viewstate" id = "_ viewstate" value="/wEPDwUKLTEwMTY2NjE0OWRkADUETiohcorj2qXOE9M1qhFVw20=" />
</div>
<div>
<script. language="javascript" type="text/javascript">
// <!CDATA[
function insert() {
document.getElementById("txt").value=document.getElementById("txt").value+"(__)";
return;
}
// ]]>
</script>
<div>
<textarea name="ctl00$ContentPlaceHolder1$txt" id="ctl00_ContentPlaceHolder1_txt" rows="10" cols="50"></textarea>
<input type="submit" name="ctl00$ContentPlaceHolder1$btnInsert" Value = "server insert (_)" nclick = "insert ();" id = "ctl00_contentplaceholder1_btninsert"/>
<Input name = "ctl00 $ contentplaceholder1 $ btninsert2" type="button" id="ctl00_ContentPlaceHolder1_btnInsert2" Nclick = "insert ();" value = "client insert (_)"/> </div>
</Div>
<Div>
<Input type = "hidden" name = "_ eventvalidation" id = "_ eventvalidation" value="/wEWBAKyga4JAtO59ZELApOT2tEDApOTwvAC83bfMO00kt0PYcRte7XQOsXBcFE=" />
</div></form>
</body>
|
Yes
The source file control element ID is different from the ID of the generated HTML file. The name and ID attributes of the form from are changed to aspnetform. the ID of the control is
For no reason, the ctl00_contentplaceholder1 _ prefix is added, and its name attribute is also added.
Ctl00 $ contentplaceholder1 $ prefix.
Now, it's no wonder that the error message "'document. getelementbyid (...) 'is null or not an object" is returned. After the page is generated, its ID changes.
So how can we solve it? Since his ID has changed, we will change the JS Code ID to the generated ID. The Code is as follows:
The following is a reference clip:
Function insert (){
Document. getelementbyid ( "Ctl00 $ contentplaceholder1 $ TXT"). value = Document. getelementbyid ( "Ctl00 $ contentplaceholder1 $ TXT"). Value + "(__)";
Return;
}
// Or
Function insert (){
Document. getelementbyid ( "Ctl00_contentplaceholder1_txt"). value = Document. getelementbyid ( "Ctl00_contentplaceholder1_txt"). Value + "(__)";
Return;
} |
Okay, the problem is solved, but think about a better solution? Why?
As a matter of fact, it is the client ID generated later. We can use the clientid attribute of the C # statement to control, as shown in the following code: TXT. clientid;
TXT is the ID of the original control, and the clientid is the new ID. TXT. clientid is obtained from the program and then generates a new ID. Isn't it better. The modification code is as follows:
The following is a reference clip:
Function insert (){
Document. getelementbyid (""). value = Document. getelementbyid (""). Value + "(__)";
Return;
} |
Also
The request. Form ["TXT"] key value in the background needs to be changed and must be changed to request. Form [""] to receive the page value. If you want to get the ID
Control is a user control. After a page is generated, although the clientid can be obtained, this object is not available, so you cannot set or obtain its attributes. For example
This user control is composed of three dropdownlists, but I want to get a complete date value (in the client). One idea is to first obtain three dropdownlists.
Clientid, and then obtained by id1.value + id2.value + id3.value, but if you need to put multiple user controls on one page, you need
How many clientids are required? Obviously, the workload will be huge, and a large number of objects need to be operated, making it easy to make mistakes.
Iv. Summary
This
I often encounter a type of problem when writing a program. To sum up, it should be "masterpage is used, or all element IDs are inconsistent after the template column in The gridview.
Problem ". For various reasons (such as using masterpage or the template column in The gridview), the ID of a control during design is often different from the id after the page is generated.
Obtain the control Client ID. We can start with the generated page. There are three ways to modify the Control ID: (of course, I recommend the third one)
The following is a reference clip:
Document. getelementbyid ("ctl00 $ editing area ID $ Control ID ");
Document. getelementbyid ("ctl00 _ edit area ID _ Control ID ");
Document. getelementbyid (""); |
Why is the root cause of the failure to fully understand the. NET mechanism?
