Question

我有一个更新面板，其中包含一个复选框和一个面板，复选框的自动回发属性为true，我想在选中复选框时使面板可见，但是当我点击复选框页面时刷新：（< / p>

代码：

<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>

PageLoad代码：

pnlDate.Visible = chkUnderConstruction.Checked;

Answer 1

尝试添加触发器来更新pannel

<Triggers>
<asp:AsyncPostBackTrigger />

Answer 2

尝试使用Jquery。

Avaoid为它编写服务器端代码。在Jquery中有这样的功能，如Show()和Hide()。

您可以在此处引用这些功能＆gt;＆gt;

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

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

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

Answer 3

使用它对你来说非常好。我在我的项目中使用它

 <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>

Answer 4

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

<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>

为什么我的更新面板不起作用？

4 个答案: