1

我有一个包含一个复选框和一个面板的更新面板，复选框的自动回发属性为 true，我希望在选中复选框时使面板可见，但是当我单击复选框页面时会刷新:(

代码：

<asp:UpdatePanel runat="server" ID="updDate">
     <ContentTemplate>
         <tr>
             <td>
                 <br/>
                  Website Status
                 <br/>
             </td>
             <td>
             <br/>
                 <asp:CheckBox runat="server" ID="chkUnderConstruction" Text="  Is Website Active?" 
                 AutoPostBack="True"></asp:CheckBox>
                 <br/>
            </td>
         </tr>
            <asp:Panel runat="server" ID="pnlDate">
                <tr>
                    <td>Activation Date</td>
                     <td>
                        Day: <asp:TextBox runat="server" ID="txtDate" Width="30">
                              </asp:TextBox>
                        Month: <asp:TextBox runat="server" ID="TextBox1" Width="30">
                               </asp:TextBox>
                        Year : <asp:TextBox runat="server" ID="TextBox2" Width="30">
                               </asp:TextBox>
                     </td>
                 </tr>
            </asp:Panel>
         </ContentTemplate>
     </asp:UpdatePanel>

页面加载代码：

pnlDate.Visible = chkUnderConstruction.Checked;
4

4 回答 4

2

尝试添加触发器来更新面板

<Triggers>
<asp:AsyncPostBackTrigger />
于 2013-03-22T07:10:59.963 回答
1

尝试为此使用 Jquery。

避免为它编写服务器端代码。在 Jquery 中有类似的功能Show()和Hide().

您可以在此处参考这些功能>>

http://api.jquery.com/show/

根据复选框事件创建 Jquery 函数以隐藏和显示您的面板。

你的问题肯定会得到解决。

于 2013-03-22T07:00:40.930 回答
1

使用它对你来说会很好用。我在我的项目中使用它

 <script type="text/javascript" language="javascript">

        function onUpdating() {
            // get the update progress div
            var updateProgressDiv = $get('updateProgressDiv');
            // make it visible
            updateProgressDiv.style.display = '';

            //  get the gridview element
            var gridView = $get('chkUnderConstruction');

            // get the bounds of both the gridview and the progress div
            var gridViewBounds = Sys.UI.DomElement.getBounds(gridView);
            var updateProgressDivBounds = Sys.UI.DomElement.getBounds(updateProgressDiv);

            //    do the math to figure out where to position the element (the center of the gridview)
            var x = gridViewBounds.x + Math.round(gridViewBounds.width / 2) - Math.round(updateProgressDivBounds.width / 2);
            var y = gridViewBounds.y + Math.round(gridViewBounds.height / 2) - Math.round(updateProgressDivBounds.height / 2);

            //    set the progress element to this position
            Sys.UI.DomElement.setLocation(updateProgressDiv, x, y);
        }

        function onUpdated() {
            // get the update progress div
            var updateProgressDiv = $get('updateProgressDiv');
            // make it invisible
            updateProgressDiv.style.display = 'none';
        }

    </script>

<asp:UpdatePanel ID="UpdatePanelTabContainer" runat="server">
            <ContentTemplate>

            </ContentTemplate>
 </asp:UpdatePanel>






<ajaxToolkit:UpdatePanelAnimationExtender ID="upae" BehaviorID="animation" runat="server"
            TargetControlID="UpdatePanelTabContainer">
            <Animations>
            <OnUpdating>
                        <Parallel duration="0">
                            <%-- place the update progress div over the gridview control --%>
                            <ScriptAction Script="onUpdating();" />  
                            <%-- disable the search button --%>                       
                            <EnableAction AnimationTarget="btnSubmit" Enabled="false" />
                            <%-- fade-out the GridView --%>
                            <FadeOut minimumOpacity=".5" />
                         </Parallel>
            </OnUpdating>
            <OnUpdated>
                        <Parallel duration="0">
                            <%-- fade back in the GridView --%>
                            <FadeIn minimumOpacity=".5" />
                            <%-- re-enable the search button --%>  
                            <EnableAction AnimationTarget="btnSubmit" Enabled="true" />
                            <%--find the update progress div and place it over the gridview control--%>
                            <ScriptAction Script="onUpdated();" /> 
                        </Parallel> 
                    </OnUpdated>
            </Animations>
        </ajaxToolkit:UpdatePanelAnimationExtender>
于 2013-03-22T07:12:34.953 回答
0

我找到了！，我的错。我没有使用触发器，正确的代码：

<asp:UpdatePanel runat="server" ID="updDate" UpdateMode="Conditional">
                <ContentTemplate>
                    <tr>
                        <td>
                        <br/>
                        Website Statuse
                        <br/>
                        </td>
                        <td>
                        <br/>
                            <asp:CheckBox runat="server" ID="chkUnderConstruction" Text="  Is Website Active?" AutoPostBack="True"></asp:CheckBox>
                        <br/>
                        </td>
                    </tr>
                    <asp:Panel runat="server" ID="pnlDate">
                        <tr>
                            <td>Activation Date</td>
                            <td>
                                Day: <asp:TextBox runat="server" ID="txtDate" Width="30"></asp:TextBox>
                                 Month: <asp:TextBox runat="server" ID="TextBox1" Width="30"></asp:TextBox>
                                  Year: <asp:TextBox runat="server" ID="TextBox2" Width="30"></asp:TextBox>
                            </td>
                        </tr>
                    </asp:Panel>
                </ContentTemplate>
                <Triggers>
                    <asp:AsyncPostBackTrigger ControlID="chkUnderConstruction" />
                </Triggers>
            </asp:UpdatePanel>
于 2013-03-22T07:10:22.150 回答