panman
Reputation: 75
ASP.NET panel visibility not working
In my web page I have an update panel inside a division, however there are 4 link button and 4 panels. When I click on first link button I want 'panel1' to be visible and rest to be invisible, when second is clicked 'panel2' to be visible and rest invisible and so on. However this doesn't work all panels stay visible even if I click on any link button. Why does this happen?
My code :
<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-->
and my server side code :
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;
}
Upvotes: 0
Views: 2294
Answers (1)
Gusman
Reputation: 15151
You're using the update panel wrong.
An update panel enables partial updates of the page content through AJAX calls, they will not do real post. In that case, only the controls inside the update panel can be modified when an event is fired from a control inside an update panel.
To make it work encapsulate all the controls inside the update panel and they should work.
Something like this:
<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>
Upvotes: 1
Related Questions
- How do I remedy "The breakpoint will not currently be hit. No symbols have been loaded for this document." warning?
- Could not find a part of the path ... bin\roslyn\csc.exe
- If a folder does not exist, create it
- ASP.NET Web Site or ASP.NET Web Application?
- Why not inherit from List<T>?
- How to Update Specific update panel and prevent other to be refreshed?
- dropdownlist pass parameter to webmethod in vb.net
- How to access vb.net button click event on modal popup button click event?
- Adding rows and removing rows to table using Jquery in asp.net
- Problem with ajax hover menu extender control