Javascript 在ASP.NET中动态更改单选按钮select上的表格单元格

我已经为ASP.NET中的订票应用程序开发了上面的示例页面。我使用

标记创建了上述布局。

在第二行的第一个单元格中可用，我的主要内容应该在第二个单元格或第二行。每当我选择一个单选按钮时，第二行第二个单元格的内容将自动更新为本主页内的新aspx页面。aspx本身无需重新加载页面。我用HTML中的

完成了这项工作，但我想用ASP.NET web表单作为.aspx表单完成这项工作。是否可以在

版面中执行此操作，或者我应该使用其他版面？如果有任何解决方案，在

布局中会更好

我用于上述布局的代码如下（仅限于ASP.NET页面的HTML部分）

我为单元格添加的代码是

<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个不同的单选按钮时将其加载到目标单元格中？

如果我正确阅读了您的问题，您可以使用表格，通过为要使其动态化的td分配ID=和runat=“server”来修改单元格内容。在codebehind中，使用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>";

myDynamicCell\u 1.InnerHtml=“这是对应急动态系统的测试”；

最终使用

JQuery

找到了一个解决方案。在main

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>

---

但是

在CS代码中没有InnerHtml属性。我试过了。我认为InnerHtml只是像

这样的HTML标记的属性。对于ASP.NET，我们使用

，因此它不支持。你说得对，已经有一段时间了。然后，您只需以相同的方式放置一个div标记。我来编辑。对不起，这应该更好。嗯，我试过了，但它不起作用。没有错误，但当我点击单选按钮时，什么也没有发生。我在问题中添加了CS脚本。是的-您需要将codebehind添加到buttonclick事件中。我不知道你的按钮在哪里，否则我会帮你的。等等-您是否正在使用JavaScript进行客户端添加？我的示例基于服务器端/代码隐藏

 myDynamicCell_1.InnerHtml = "<b>This is a test of the emergency dynamic system</b>";

<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 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>

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);
    }
}