javascript - 在 ASP.NET 中动态更改单选按钮选择上的表格单元格

标签 javascript c# html css asp.net

Home Page

我在 ASP.NET 中开发了上述用于订票应用程序的示例页面。我使用 <asp:Table> 创建了上述布局标签。 <asp:RadioButtonList>在第二行的第一个单元格中可用,我的主要内容应该在第二个单元格或第二行中。每当我选择一个单选按钮时,第二行中第二个单元格的内容应该自动更新为 HomePage.aspx 本身中的新 aspx 页面,而无需重新加载页面。我用 <frameset> 做到了这一点在 HTML 中,但我想在 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>

CS代码使用<div>标签和InnerHtml如下,添加 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 个不同的单选按钮时将它们加载到目标单元格中​​?

最佳答案

如果我正确地阅读了您的问题 - 您可以使用表格并通过将 ID= 和 runat="server"分配给您想要动态化的 td 来修改单元格的内容。在您的代码隐藏中,使用 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>";

关于javascript - 在 ASP.NET 中动态更改单选按钮选择上的表格单元格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39695725/

相关文章:

javascript - 无法从选择框中选择项目/在输入字段中写入。我是否错误地处理了 'key'?

javascript - 必须单击“提交”两次才能在表单提交时触发 AJAX 请求

c# - SharpSVN 和修订版中的新/修改文件

c# - 如何在 zip 存档中找到某些文件的压缩位以进行进一步处理?

javascript - 按键事件,不希望的 native 行为

javascript - 在超过 1 个 div 中使用相同类型的 javascript

javascript - 将带有 CSS3 过滤器的图像元素转换为 Blob

javascript - Babel `import` 的 Codemod 到 commonjs `require`

php - 通过 JavaScript 提交表单,无需刷新页面

c# - 将两个字节图像数据合并为一个 PDF,然后下载或打印该 PDF