Dynamically change a cell of table on radio button select in ASP.NET
Question
I have developed the above sample page for booking ticket application in ASP.NET. I created the above layout using <asp:Table> tags. The <asp:RadioButtonList> is available in 1st cell of 2nd row and my main content should be in 2nd cell or 2nd row. Whenever i select a radio button the contents of 2nd cell in 2nd row should be updated automatically with new aspx page within this HomePage.aspx itself without reloading the page. I did this with <frameset> in HTML but i want to do this in ASP.NET web form as .aspx form. Is it possible to do this in <asp:Table> layout or i should use some other layout? Better in <asp:Table> layout if there is any solution.
The code i used for the above layout is as follows (only the HTML part of ASP.NET page)
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="HomePage.aspx.cs" Inherits="TicketBookingRequest.HomePage" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Online Ticket Booking Request Portal</title>
<link rel='stylesheet' type='text/css' href='Styles/Main.css'/>
<script type='text/javascript' src='Scripts/HomePage.js'></script>
</head>
<body>
<form id="main_form" runat="server">
<div>
<asp:Table ID="main_table" CssClass="table" runat="server" GridLines="Both" Height="100%" Width="100%">
<asp:TableRow ID="row_head" Height="100px">
<asp:TableCell ID="logo_cell" Width="20%">
</asp:TableCell>
<asp:TableCell Width="65%">
<asp:Label ID="label_heading" Text="ONLINE TICKET BOOKING REQUEST PORTAL" CssClass="label" runat="server"></asp:Label>
</asp:TableCell>
<asp:TableCell Width="15%">
<div id="clockDisplay" class="clockStyle"></div>
</asp:TableCell>
</asp:TableRow>
<asp:TableRow ID="row_main" Height="500px">
<asp:TableCell>
<asp:RadioButtonList ID="menu_list" CssClass="list" runat="server" RepeatDirection="Vertical" OnSelectedIndexChanged="menu_list_SelectedIndexChanged" AutoPostBack="true">
<asp:ListItem Value="profile" Text="Edit User Profile"></asp:ListItem>
<asp:ListItem Value="booking" Text="Request New Booking"></asp:ListItem>
<asp:ListItem Value="status" Text="View Existing Booking Status"></asp:ListItem>
<asp:ListItem Value="approval" Text="Request Awaiting Your Approval"></asp:ListItem>
<asp:ListItem Value="cancel" Text="Cancel Existing Booking"></asp:ListItem>
</asp:RadioButtonList>
</asp:TableCell>
<asp:TableCell ID="master_cell" ColumnSpan="2" runat="server">
<div id="master_cell_div" runat="server"></div>
</asp:TableCell>
</asp:TableRow>
<asp:TableRow ID="row_foot" Height="10%">
<asp:TableCell ColumnSpan="3">
<center>
<asp:Label Text="All Rights Reserved. Company Name @ 2016" CssClass="label" runat="server"></asp:Label><br />
<asp:Label Text="Click here to contact us." CssClass="label" runat="server"></asp:Label>
</center>
</asp:TableCell>
</asp:TableRow>
</asp:Table>
</div>
</form>
</body>
</html>
The CS code using <div> tag and InnerHtml is as follows and this is working now after adding AutoPostBack="true"
protected void menu_list_SelectedIndexChanged(object sender, EventArgs e)
{
string value = menu_list.SelectedValue;
if (value.Equals("profile"))
{
master_cell_div.InnerHtml = "<p>WELCOME TO PROFILE</p>";
}
else if (value.Equals("booking"))
{
master_cell_div.InnerHtml = "<p>WELCOME TO BOOKING</p>";
}
else
{
master_cell_div.InnerHtml = "<p>WELCOME TO OTHERS</p>";
}
}
The code i added for cell is,
<asp:TableCell ID="master_cell" ColumnSpan="2" Width="80%" runat="server">
<div id="master_cell_div" runat="server"></div>
</asp:TableCell>
But here instead of using InnerHtml is it possible to create 5 different .aspx forms and load them into the target cell on selecting these 5 different radio buttons?
2 answers
solution1
2 2016-09-26 06:20:24
If I'm reading your question correctly - you can use tables and modify a cell's content by assigning an ID= and a runat="server" to the td you want to make dynamic. In your codebehind, use the ID of the Td and the InnerHtml property.
<asp:TableCell>
<div id="myDynamicCell_1" runat="server"></div>
</asp:TableCell>
then...
myDynamicCell_1.InnerHtml = "<b>This is a test of the emergency dynamic system</b>";
solution2
0 ACCPTED 2016-09-26 08:43:39
Finally found a solution using JQuery . In the main HomePage.aspx i added the following JQuery script,
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script type='text/javascript'>
function LoadProfile() {
$("#master_cell_div").load("UserProfile.aspx #load_profile");
}
function LoadBooking() {
$("#master_cell_div").load("BookTicket.aspx #load_booking");
}
function LoadStatus() {
$("#master_cell_div").load("ViewStatus.aspx #load_status");
}
function LoadApproval() {
$("#master_cell_div").load("ApproveRequest.aspx #load_approval");
}
function LoadCancel() {
$("#master_cell_div").load("CancelTicket.aspx #load_cancel");
}
</script>
Then i created 5 different .aspx pages with <div> tags as given below,
<div id="load_profile" runat="server">
//Content goes here
</div>
<div id="load_booking" runat="server">
//Content goes here
</div>
<div id="load_status" runat="server">
//Content goes here
</div>
<div id="load_approval" runat="server">
//Content goes here
</div>
<div id="load_cancel" runat="server">
//Content goes here
</div>
Then i used the CS code in HomePage.aspx.cs back end code to load these JQuery scripts on radio button change as given below,
protected void menu_list_SelectedIndexChanged(object sender, EventArgs e)
{
string value = menu_list.SelectedValue;
if (value.Equals("profile"))
{
ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "script", "LoadProfile();", true);
}
else if (value.Equals("booking"))
{
ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "script", "LoadBooking();", true);
}
else if (value.Equals("status"))
{
ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "script", "LoadStatus();", true);
}
else if (value.Equals("approval"))
{
ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "script", "LoadApproval();", true);
}
else if (value.Equals("cancel"))
{
ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "script", "LoadCancel();", true);
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.