2016-02-25 96 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