ASP.NET 面板可见性无效

Question

在我的网页中，我在一个分区内有一个更新面板，但是有 4 个 link 按钮和 4 个面板。当我点击第一个 link 按钮时，我希望 'panel1' 可见，其余不可见，当单击第二个时，'panel2' 可见，其余不可见，依此类推。但是，即使我单击任何 link 按钮，所有面板都不会保持可见。为什么会这样？

我的代码：

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

Answer 1

您使用的更新面板有误。

更新面板通过 AJAX 调用启用页面内容的部分更新，它们不会进行真正的 post。在这种情况下，当从更新面板内的控件触发事件时，只能修改更新面板内的控件。

要使其正常工作，请将所有控件封装在更新面板中，它们应该可以正常工作。

像这样：

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

ASP.NET 面板可见性无效

ASP.NET panel visibility not working

c#

asp.net

updatepanel

panel