2016-02-25 114 views
0

在我的網頁中,我有一個部門內的更新面板,但有4個鏈接按鈕和4個面板。當我點擊第一個鏈接按鈕時,我希望'panel1'可見並且其餘部分不可見,當第二個點擊'panel2'時可見且不可見,等等。然而,這不起作用,即使我點擊任何鏈接按鈕,所有面板仍然可見。爲什麼會發生?ASP.NET面板可見性不起作用

我的代碼:

<div class="container">  
    <asp:ScriptManager ID="ScriptManager1" runat="server">  
    </asp:ScriptManager>  
    <div class="row">   
     <asp:UpdatePanel ID="UpdatePanel1" runat="server"> 
      <ContentTemplate> 
       <asp:LinkButton ID="BookAppointment" runat="server" Text="Book Appointment" OnClick="BookAppointment_Click"></asp:LinkButton> 
       <asp:LinkButton ID="ViewBookings" runat="server" Text="View Bookings" OnClick="ViewBookings_Click"></asp:LinkButton> 
       <asp:LinkButton ID="CancelBooking" runat="server" Text="Cancel Booking" OnClick="CancelBooking_Click"></asp:LinkButton> 
       <asp:LinkButton ID="SearchDoctor" runat="server" Text="Search Doctor" OnClick="SearchDoctor_Click" ></asp:LinkButton>        
      </ContentTemplate> 
     </asp:UpdatePanel> 
    </div> 
    <div> 
     <div style="width: 870px; float:right;"> 
      <asp:Panel ID="Panel1" runat="server"> 
       <asp:Label ID="Label5" runat="server" Text="Book Appointment : "></asp:Label> 
       <br /> 
       <br /> 
       <asp:Button ID="Button2" runat="server" Text="9.00 - 9.30" CssClass="btn btn-primary" Width="120px" OnClick="Button2_Click"></asp:Button> 
       <asp:Button ID="Button3" runat="server" Text="9.30 - 10.00" CssClass="btn btn-primary" Width="120px" OnClick="Button3_Click"></asp:Button> 
       <asp:Button ID="Button4" runat="server" Text="10.00 - 10.30" CssClass="btn btn-primary" Width="120px" OnClick="Button4_Click"></asp:Button> 
       <asp:Button ID="Button5" runat="server" Text="10.30 - 11.00" CssClass="btn btn-primary" Width="120px" OnClick="Button5_Click"></asp:Button> 
       <asp:Button ID="Button6" runat="server" Text="11.00 - 11.30" CssClass="btn btn-primary" Width="120px" OnClick="Button6_Click"></asp:Button> 
       <asp:Button ID="Button7" runat="server" Text="11.30 - 12.00" CssClass="btn btn-primary" Width="120px" OnClick="Button7_Click"></asp:Button> 
       <br /> 
       <br/> 
       <asp:Button ID="Button14" runat="server" Text="12.00 - 1.30 Break" CssClass="btn btn-danger" Enabled="False" Width="840px"></asp:Button> 
       <br /> 
       <br /> 
       <asp:Button ID="Button8" runat="server" Text="1.30 - 2.00" CssClass="btn btn-primary" Width="120px" OnClick="Button8_Click"></asp:Button> 
       <asp:Button ID="Button9" runat="server" Text="2.00 - 2.30" CssClass="btn btn-primary" Width="120px" OnClick="Button9_Click"></asp:Button> 
       <asp:Button ID="Button10" runat="server" Text="2.30 - 3.00" CssClass="btn btn-primary" Width="120px" OnClick="Button10_Click"></asp:Button> 
       <asp:Button ID="Button11" runat="server" Text="3.00 - 3.30" CssClass="btn btn-primary" Width="120px" OnClick="Button11_Click"></asp:Button> 
       <asp:Button ID="Button12" runat="server" Text="3.30 - 4.00" CssClass="btn btn-primary" Width="120px" OnClick="Button12_Click"></asp:Button> 
       <asp:Button ID="Button13" runat="server" Text="4.00 - 4.30" CssClass="btn btn-primary" Width="120px" OnClick="Button13_Click"></asp:Button> 
       <br/> 
       <asp:Button ID="Button21" runat="server" Text="04.30 - 6.30 Break" CssClass="btn btn-danger" Enabled="False" Width="840px"></asp:Button> 
       <br /> 
       <br /> 
       <asp:Button ID="Button22" runat="server" Text="6.30 - 7.00" CssClass="btn btn-primary" Width="120px" OnClick="Button22_Click"></asp:Button> 
       <asp:Button ID="Button23" runat="server" Text="7.00 - 7.30" CssClass="btn btn-primary" Width="120px" OnClick="Button23_Click"></asp:Button> 
       <asp:Button ID="Button24" runat="server" Text="7.30 - 8.00" CssClass="btn btn-primary" Width="120px" OnClick="Button24_Click"></asp:Button> 
       <asp:Button ID="Button25" runat="server" Text="8.00 - 8.30" CssClass="btn btn-primary" Width="120px" OnClick="Button25_Click"></asp:Button> 
       <asp:Button ID="Button26" runat="server" Text="8.30 - 9.00" CssClass="btn btn-primary" Width="120px" OnClick="Button26_Click"></asp:Button> 
       <asp:Button ID="Button27" runat="server" Text="9.00 - 9.30" CssClass="btn btn-primary" Width="120px" OnClick="Button27_Click"></asp:Button> 
       <br /> 
       <br /> 
       <asp:Button ID="Book" runat="server" Text="Book" CssClass="btn btn-success" Height="35px" Width="150px" OnClick="Book_Click" ></asp:Button> 
       <br /> 
      </asp:Panel> 
      <asp:Panel ID="Panel2" runat="server" > 
       <asp:Label ID="Label6" runat="server" Text="View Bookings : "></asp:Label><br /> 
       <asp:Label ID="Label7" runat="server" Text="Booking History : "></asp:Label> 
       <asp:GridView ID="GridView1" runat="server"></asp:GridView> 
      </asp:Panel> 
      <asp:Panel ID="Panel3" runat="server" > 
       <asp:Label ID="Label8" runat="server" Text="cancel"></asp:Label> 
      </asp:Panel> 
      <asp:Panel ID="Panel4" runat="server" > 
       <asp:Label ID="Label9" runat="server" Text="doc"></asp:Label> 
      </asp:Panel> 
      <br /> 
      <br /> 
      <br /> 
     </div> 
     <div> 
      <asp:UpdatePanel ID="UpdatePanel2" runat="server"> 
       <ContentTemplate> 
        <asp:Label ID="Label1" runat="server" Text="Appointment Id : "></asp:Label> 
        <asp:TextBox ID="TextBox1" runat="server" class="form-control" CssClass="text-info" ReadOnly="True"></asp:TextBox> 
        <br /><br /> 
        <asp:Label ID="Label2" runat="server" Text="For : "></asp:Label> 
        <asp:DropDownList ID="DropDownList1" runat="server" CssClass="dropdown"></asp:DropDownList> 
        <br /><br /> 
        <asp:Label ID="Label3" runat="server" Text="Choose Doctor : "></asp:Label> 
        <asp:DropDownList ID="DropDownList2" runat="server" CssClass="dropdown"></asp:DropDownList> 
        <br /> 
        <br /> 
        <asp:Label ID="Label4" runat="server" Text="Date : "></asp:Label><asp:Calendar ID="Calendar1" runat="server"></asp:Calendar> 
        <br /> 
        <asp:Button ID="Button1" runat="server" CssClass="btn btn-success" OnClick="Button1_Click" Text="Check" /> 
        <br /> 
        <br /><br /> 
       </ContentTemplate> 
      </asp:UpdatePanel> 
     </div> 
    </div>    
</div><!--/.container--> 

和我的服務器端代碼:

protected void BookAppointment_Click(object sender, EventArgs e) 
{ 
    Label1.Text = "book appointment"; 
    Panel1.Visible = true; 
    Panel2.Visible = false; 
    Panel3.Visible = false; 
    Panel4.Visible = false; 
} 

protected void ViewBookings_Click(object sender, EventArgs e) 
{ 
    Label1.Text = "view bookings"; 
    Panel1.Visible = false; 
    Panel2.Visible = true; 
    Panel3.Visible = false; 
    Panel4.Visible = false; 
} 

protected void CancelBooking_Click(object sender, EventArgs e) 
{ 
    Label1.Text = "cancel bookings"; 
    Panel1.Visible = false; 
    Panel2.Visible = false; 
    Panel3.Visible = true; 
    Panel4.Visible = false; 
} 

protected void SearchDoctor_Click(object sender, EventArgs e) 
{ 
    Label1.Text = "search doc"; 
    Panel1.Visible = true; 
    Panel2.Visible = false; 
    Panel3.Visible = false; 
    Panel4.Visible = true; 
} 

回答

1

您使用更新面板錯誤。

更新面板允許通過AJAX調用部分更新頁面內容,但它們不會做真正的發佈。在這種情況下,只有在更新面板內的控件觸發事件時,才能修改更新面板內的控件。

爲了使它工作封裝更新面板中的所有控件,它們應該可以工作。

事情是這樣的:

<div class="container">  
    <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>  
    <asp:UpdatePanel ID="UpdatePanel1" runat="server"> 
     <ContentTemplate> 
      <div class="row">   
       <asp:LinkButton ID="BookAppointment" runat="server" Text="Book Appointment" OnClick="BookAppointment_Click"></asp:LinkButton> 
       <asp:LinkButton ID="ViewBookings" runat="server" Text="View Bookings" OnClick="ViewBookings_Click"></asp:LinkButton> 
       <asp:LinkButton ID="CancelBooking" runat="server" Text="Cancel Booking" OnClick="CancelBooking_Click"></asp:LinkButton> 
       <asp:LinkButton ID="SearchDoctor" runat="server" Text="Search Doctor" OnClick="SearchDoctor_Click" ></asp:LinkButton>        
      </div> 
      <div> 
       <div style="width: 870px; float:right;"> 
        <asp:Panel ID="Panel1" runat="server"> 
        <asp:Label ID="Label5" runat="server" Text="Book Appointment : "></asp:Label> 
        <br /> 
        <br /> 
        <asp:Button ID="Button2" runat="server" Text="9.00 - 9.30" CssClass="btn btn-primary" Width="120px" OnClick="Button2_Click"></asp:Button> <asp:Button ID="Button3" runat="server" Text="9.30 - 10.00" CssClass="btn btn-primary" Width="120px" OnClick="Button3_Click"></asp:Button> <asp:Button ID="Button4" runat="server" Text="10.00 - 10.30" CssClass="btn btn-primary" Width="120px" OnClick="Button4_Click"></asp:Button> <asp:Button ID="Button5" runat="server" Text="10.30 - 11.00" CssClass="btn btn-primary" Width="120px" OnClick="Button5_Click"></asp:Button> <asp:Button ID="Button6" runat="server" Text="11.00 - 11.30" CssClass="btn btn-primary" Width="120px" OnClick="Button6_Click"></asp:Button> 
        <asp:Button ID="Button7" runat="server" Text="11.30 - 12.00" CssClass="btn btn-primary" Width="120px" OnClick="Button7_Click"></asp:Button> 
        <br /> 
        <br/> 
        <asp:Button ID="Button14" runat="server" Text="12.00 - 1.30 Break" CssClass="btn btn-danger" Enabled="False" Width="840px"></asp:Button> 
        <br /> 
        <br /> 
        <asp:Button ID="Button8" runat="server" Text="1.30 - 2.00" CssClass="btn btn-primary" Width="120px" OnClick="Button8_Click"></asp:Button> <asp:Button ID="Button9" runat="server" Text="2.00 - 2.30" CssClass="btn btn-primary" Width="120px" OnClick="Button9_Click"></asp:Button> <asp:Button ID="Button10" runat="server" Text="2.30 - 3.00" CssClass="btn btn-primary" Width="120px" OnClick="Button10_Click"></asp:Button> <asp:Button ID="Button11" runat="server" Text="3.00 - 3.30" CssClass="btn btn-primary" Width="120px" OnClick="Button11_Click"></asp:Button> <asp:Button ID="Button12" runat="server" Text="3.30 - 4.00" CssClass="btn btn-primary" Width="120px" OnClick="Button12_Click"></asp:Button> 
        <asp:Button ID="Button13" runat="server" Text="4.00 - 4.30" CssClass="btn btn-primary" Width="120px" OnClick="Button13_Click"></asp:Button> 
        <br/> 
        <asp:Button ID="Button21" runat="server" Text="04.30 - 6.30 Break" CssClass="btn btn-danger" Enabled="False" Width="840px"></asp:Button> 
        <br /> 
        <br /> 
        <asp:Button ID="Button22" runat="server" Text="6.30 - 7.00" CssClass="btn btn-primary" Width="120px" OnClick="Button22_Click"></asp:Button> <asp:Button ID="Button23" runat="server" Text="7.00 - 7.30" CssClass="btn btn-primary" Width="120px" OnClick="Button23_Click"></asp:Button> <asp:Button ID="Button24" runat="server" Text="7.30 - 8.00" CssClass="btn btn-primary" Width="120px" OnClick="Button24_Click"></asp:Button> <asp:Button ID="Button25" runat="server" Text="8.00 - 8.30" CssClass="btn btn-primary" Width="120px" OnClick="Button25_Click"></asp:Button> <asp:Button ID="Button26" runat="server" Text="8.30 - 9.00" CssClass="btn btn-primary" Width="120px" OnClick="Button26_Click"></asp:Button> 
        <asp:Button ID="Button27" runat="server" Text="9.00 - 9.30" CssClass="btn btn-primary" Width="120px" OnClick="Button27_Click"></asp:Button> 
        <br /> 
        <br /> 
       </div> 
      </div> 
     </ContentTemplate> 
    </asp:UpdatePanel> 
</div> 
+0

所以我應該刪除所有面板和手動進行控制可見和不可見的鏈接按鈕點擊?我問,因爲有太多的控制,更簡單的方法來做到這一點?或者我應該刪除更新面板? – panman

+0

不,不,不要,只需把更新面板中的所有標籤,讓我更新答案 – Gusman

+0

好的,謝謝你會嘗試解決方案,並更新結果 – panman