为什么我的更新面板不工作

本文关键字：工作 我的 更新 为什么 | 更新日期: 2023-09-27 18:05:29

我有一个更新面板，其中包含一个复选框和一个面板，复选框的自动回发属性为真，我想使面板可见，当复选框被选中，但当我点击复选框页面刷新:(

: 

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

pnlDate.Visible = chkUnderConstruction.Checked;

为什么我的更新面板不工作

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

<Triggers>
<asp:AsyncPostBackTrigger />

尝试使用Jquery。

避免为它编写服务器端代码。在Jquery中有这样的函数，如Show()和Hide()。

你可以参考这里的函数>>

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

创建基于复选框事件的Jquery函数来隐藏和显示面板。

你的问题一定会解决的

使用这个，它将非常适合您。我在我的项目中使用这个

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

我找到了!是我的错。我没有使用触发器，正确的代码:

<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>
相关文章：