在 ASP.NET 中動態更改單選按鈕選擇上的表格單元格
[英]Dynamically change a cell of table on radio button select in ASP.NET
問題描述
我已經開發了上述示例頁面，用於在 ASP.NET 中預訂機票應用程序。 我使用<asp:Table>標簽創建了上述布局。 <asp:RadioButtonList>在第二行的第一個單元格中可用，我的主要內容應該在第二個單元格或第二行中。 每當我選擇一個單選按鈕時，第二行中第二個單元格的內容應該自動更新為 HomePage.aspx 本身內的新 aspx 頁面，而無需重新加載頁面。 我使用 HTML 中的<frameset>完成此操作，但我想在 ASP.NET Web 表單中將其作為 .aspx 表單執行。 是否可以在<asp:Table>布局中執行此操作，或者我應該使用其他布局？ 如果有任何解決方案，最好在<asp:Table>布局中。
我用於上述布局的代碼如下（僅ASP.NET頁面的HTML部分）
<%@ 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>
使用<div>標簽和InnerHtml的 CS 代碼如下，添加 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>";
}
}
我為單元格添加的代碼是，
<asp:TableCell ID="master_cell" ColumnSpan="2" Width="80%" runat="server">
<div id="master_cell_div" runat="server"></div>
</asp:TableCell>
但是這里不是使用 InnerHtml 是否可以創建 5 個不同的 .aspx 表單並在選擇這 5 個不同的單選按鈕時將它們加載到目標單元格中？
2 個解決方案
解決方案1
2 2016-09-26 06:20:24
如果我正確閱讀了您的問題 - 您可以使用表格並通過為要動態化的 td 分配 ID= 和 runat="server" 來修改單元格的內容。 在您的代碼隱藏中，使用 Td 的 ID 和 InnerHtml 屬性。
<asp:TableCell>
<div id="myDynamicCell_1" runat="server"></div>
</asp:TableCell>
然后...
myDynamicCell_1.InnerHtml = "<b>This is a test of the emergency dynamic system</b>";
解決方案2
0 已采納 2016-09-26 08:43:39
終於找到了使用JQuery的解決方案。 在主HomePage.aspx我添加了以下 JQuery 腳本，
<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>
然后我用<div>標簽創建了 5 個不同的 .aspx 頁面，如下所示，
<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>
然后我使用HomePage.aspx.cs后端代碼中的 CS 代碼在單選按鈕更改時加載這些 JQuery 腳本，如下所示，
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);
}
}
更改選項 <select>動態使用javascript並在asp.net上閱讀
[英]change option of <select> Dynamically with javascript and read it on asp.net
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.