2013-03-22 68 views
1

我有一個更新面板,其中包含一個複選框和一個面板,複選框的自動回發屬性是真實的,我想使複選框被選中時面板可見,但是當我點擊複選框頁面時刷新:(爲什麼我的更新面板不起作用?

代碼

<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; 
+0

做你把'的' – scofield 2013-03-22 07:00:18

回答

2

嘗試添加觸發器來更新潘內爾

<Triggers> 
<asp:AsyncPostBackTrigger /> 
1

嘗試使用jQuery FO那個。

Avaoid爲它編寫服務器端代碼。在jquery中有這樣的功能,如Show()Hide()

你可以參考在這裏的功能>>

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

基於複選框事件隱藏和顯示您的面板創建jQuery函數。

您的問題一定會得到解決。

+0

我認爲這是個好主意,讓我查一下,謝謝 – 2013-03-22 07:04:39

+0

感謝兄弟,這種方式更好,但我用「.toggle」。無論如何感謝您的幫助:x – 2013-03-22 08:02:48

+0

歡迎。建議的東西,如果你知道這一個>> http://stackoverflow.com/questions/15565135/c-sharp-search-functionality-query-code – Freelancer 2013-03-22 08:05:11

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

好。接受答案,以便其他人將在未來知道正確的答案。 – Freelancer 2013-03-22 07:15:23

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>