在 ASP.NET 中动态更改单选按钮选择的表格单元格答案

【问题标题】：Dynamically change a cell of table on radio button select in ASP.NET在 ASP.NET 中动态更改单选按钮选择的表格单元格
【发布时间】：2017-02-03 09:03:25
【问题描述】：

我已经为 ASP.NET 中的订票应用程序开发了上述示例页面。我使用<asp:Table> 标签创建了上述布局。 <asp:RadioButtonList> 在第二行的第一个单元格中可用，我的主要内容应该在第二个单元格或第二行中。每当我选择一个单选按钮时，第 2 行中的第 2 个单元格的内容应该使用此 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 个不同的单选按钮时将它们加载到目标单元格中？

【问题讨论】：

标签： javascript c# html css asp.net

【解决方案1】：

如果我正确阅读了您的问题 - 您可以使用表格并通过将 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>";

【讨论】：

但是<asp:TabelCell> 在 CS 代码中没有 InnerHtml 属性..我试过了。我认为 InnerHtml 是一个仅适用于 HTML 标记的属性，例如<td>。对于 ASP.NET，我们使用 <asp:TabelCell>，因此它不支持。
你是对的 - 已经有一段时间了。然后你只需以同样的方式放置一个 div 标签。我会编辑。很抱歉混淆了
好的，应该会更好。
嗯，我试过了，但它不起作用..没有错误，但是当我单击单选按钮时没有任何反应。我在我的问题中添加了 CS 脚本。
是的 - 您需要将代码隐藏添加到您的 buttonclick 事件中。我不知道你的按钮在哪里，或者我会帮忙的。等等——你是在使用 JavaScript 做客户端添加吗？我的例子是基于服务器端/代码隐藏

【解决方案2】：

终于找到了使用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>

然后我创建了 5 个不同的带有<div> 标签的 .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);
    }
}

【讨论】：