ASP. NET user control visibility control in the Examination System

The goal is simple: Write a user control that is hidden when the page is loaded. When a radiobutton clicks, the user control is displayed. However, it is not that simple to use.

Error Method 1

The first thing that comes to mind is the most common method. set its visible attribute to false:

    <uc1:TGBDropDownList ID="TGBDropDownList2" runat="server" Visible ="false" />

Click:

<Asp: radiobutton id = "radrecord" runat = "server" text = "answer record" onclick = "radiorecordclick ();" groupname = "queryhistory"/>

            function RadioRecordClick() {                document.getElementById("<%= TGBDropDownList2.ClientID%>").style.display = "inline";            }

Error

And the user control is not hidden:

If you do not want to open the page, do not use visible = false. Otherwise, the control cannot be found in the script.

Error Method 2

Hide the interface when loading:

       <uc1:TGBDropDownList ID="TGBDropDownList2" runat="server" style="display:none;/>

When you click radiobutton:

Function radiorecordclick () {document. getelementbyid ("<% = radrecord. clientid %> "). style. display = "inline" ;}< ASP: radiobutton id = "radrecord" runat = "server" text = "answer record" onclick = "radiorecordclick (); "groupname =" queryhistory "/>

Cause Analysis

The result is the same as the first method: the user control is not hidden and the error "cannot read empty attribute style" is displayed. It can be seen that the problem cannot be solved even if style is used. Why?

Use the debugging tool to find the code of the user control on the client:

<Div> <span id = "contentplaceholderregular tgbdropdownlist2_spancollege"> School: <select name = "ctl00 $ contentplaceholder1 $ tgbdropdownlist2 $ dropcollege" onchange = "javascript: setTimeout ('_ dopostback (\ 'ctl00 $ contentplaceholder1 $ tgbdropdownlist2 $ dropcollege \', \ ')', 0) "id =" contentplaceholderw.tgbdropdownlist2_dropcollege "class =" standardwidth1 "> <option value =" yellow "> School of Life Sciences </option> <option value =" yellow "> School of mathematics and computer science </option> <option value = "a610a1fe-bdc1-442f-b637-f221d64f0d11"> School of literature </option> <option value = "d1ea12a9-9e52-4ce4-b271-2fd639de58d9"> Conservatory of Music </option> <option value = "f1767539-7ace-4761-8d70-3e98410c3702"> School of Physical Education </option> <option value = "f20e99a5-c63b-4740-bda1-34ec8d599bfc"> Foreign Language Institute </option> <option selected = "selected" value = ""> select </option> </SELECT> </span> <span id = "contentplaceholder=tgbdropdownlist2_spancourse"> course: <select name = "ctl00 $ change $ tgbdropdownlist2 $ dropcourse" onchange = "javascript: setTimeout ('_ dopostback (\ 'ctl00 $ contentplaceholder1 $ tgbdropdownlist2 $ dropcourse \', \ ')', 0) "id =" contentplaceholder1_tgbdropdownlist2_dropcourse "class =" standardwidth1 "> <option selected =" selected "value =" "> select </option> </SELECT> </span> <Span id = "contentplaceholder=tgbdropdownlist2_spanexam"> test: <select name = "ctl00 $ change $ tgbdropdownlist2 $ dropexam" onchange = "javascript: setTimeout ('_ dopostback (\ 'ctl00 $ contentplaceholder1 $ tgbdropdownlist2 $ dropexam \', \ ')', 0) "id =" contentplaceholder1_tgbdropdownlist2_dropexam "class =" standardwidth1 "> <option selected =" selected "value =" "> select </option> </SELECT> </span>/ div>

Dom Structure

It can be seen that the user control is parsed to the DOM tree:

Style attributes

That is, a div contains three parallel spans. Let's take a look at the style attributes of the DIV and Span:

It can be seen that after the user control is parsed on the client, no clientid can be regarded as an anonymous Div, and there is no controllable display attribute.

Solution

So how can we solve the problem of user control visibility? The answer is panel: place the user control in the panel control, and indirectly control the visibility of the user control by controlling the Panel visibility.

Hide the user control code:

    <br />    <asp:Panel ID="Panel1" runat="server" style="display:none;">            <uc1:TGBDropDownList ID="TGBDropDownList2" runat="server" />    </asp:Panel>    <br />

Show user control code:

<Asp: radiobutton id = "radrecord" runat = "server" text = "answer record" onclick = "radiorecordclick ();" groupname = "queryhistory"/>

And

            function RadioRecordClick() {                document.getElementById("<%= Panel1.ClientID%>").style.display = "inline";             }

Running result

When the interface is loaded:

When you click answer record:

Dom Structure

Resolved client code:

<Div id = "contentplaceholder?panel1" style = "display: inline;"> <div> <span id = "contentplaceholder=tgbdropdownlist2_spancollege"> school: <select name = "ctl00 $ contentplaceholder1 $ tgbdropdownlist2 $ dropcollege" onchange = "javascript: setTimeout ('_ dopostback (\ 'ctl00 $ contentplaceholder1 $ tgbdropdownlist2 $ dropcollege \', \ ')', 0) "id =" contentplaceholderw.tgbdropdownlist2_dropcollege "class =" standardwidth1 "> <option value =" yellow "> School of Life Sciences </option> <option value =" yellow "> School of mathematics and computer science </option> <option value = "a610a1fe-bdc1-442f-b637-f221d64f0d11"> School of literature </option> <option value = "d1ea12a9-9e52-4ce4-b271-2fd639de58d9"> Conservatory of Music </option> <option value = "f1767539-7ace-4761-8d70-3e98410c3702"> School of Physical Education </option> <option value = "f20e99a5-c63b-4740-bda1-34ec8d599bfc"> Foreign Language Institute </option> <option selected = "selected" value = ""> select </option> </SELECT> </span> <span id = "contentplaceholder=tgbdropdownlist2_spancourse"> course: <select name = "ctl00 $ change $ tgbdropdownlist2 $ dropcourse" onchange = "javascript: setTimeout ('_ dopostback (\ 'ctl00 $ contentplaceholder1 $ tgbdropdownlist2 $ dropcourse \', \ ')', 0) "id =" contentplaceholder1_tgbdropdownlist2_dropcourse "class =" standardwidth1 "> <option selected =" selected "value =" "> select </option> </SELECT> </span> <Span id = "contentplaceholder=tgbdropdownlist2_spanexam"> test: <select name = "ctl00 $ change $ tgbdropdownlist2 $ dropexam" onchange = "javascript: setTimeout ('_ dopostback (\ 'ctl00 $ contentplaceholder1 $ tgbdropdownlist2 $ dropexam \', \ ')', 0) "id =" contentplaceholder1_tgbdropdownlist2_dropexam "class =" standardwidth1 "> <option selected =" selected "value =" "> select </option> </SELECT> </span>/ div> </div>

Style attributes

Corresponding style attributes:

After the panel control is parsed, The clientid and display style attributes can be controlled, so the visibility problem can be solved.