ASP.NETのラジオボタン選択でテーブルのセルを動的に変更

ASP.NETでチケットアプリケーションを予約するための上記のサンプルページを開発しました。私は<asp:Table>タグを使って上記のレイアウトを作成しました。 <asp:RadioButtonList>は2行目の1番目のセルにあり、私の主な内容は2番目のセルまたは2番目の行にあるはずです。ラジオボタンを選択すると、2行目の2番目のセルの内容は、このHomePage.aspx内の新しいaspxページで自動的に更新され、ページをリロードする必要はありません。私はこれを<frameset>のHTMLで行いましたが、ASP.NET Webフォームで.aspxフォームとしてこれを実行したいと思います。 <asp:Table>レイアウトでこれを行うことは可能ですか、他のレイアウトを使用する必要がありますか？任意の解決策がある場合は、<asp:Table>レイアウトのほうがよいでしょう。次のように<div>タグとInnerHtmlを用い

次のように私は上記のレイアウトに使用されるコードである（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コードがあり、これは後に今働いています追加の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>"; 
     } 
    }

iはセルであるために追加されたコード、

<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つの異なるラジオボタンを選択してターゲットセルにロードすることは可能ですか？

出典

2016-09-26 Mano Prathibhan C

は最後にJQueryを使用して解決策を見つけました。メインHomePage.aspxに私は下記のように、私は、私はHomePage.aspx.csバックエンドにCSコードを用い、

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

を<div>タグとの5つの異なる.aspxページを作成し、

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

を次の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); 
    } 
}

出典

2016-09-26 08:43:39

あなたの質問を正しく読んでいるなら、動的にしたいIDに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>";

出典

2016-09-26 06:20:24

しかし、 ''はCSコードのInnerHtmlプロパティを持っていません.I t ried。私はInnerHtmlは ''のようなHTMLタグのためのプロパティだと思います。 ASP.NETの場合、 ' 'を使用しています。 –

あなたは正しいです。それはしばらくありました。次にdivタグを同じ方法で配置します。私は編集します。混乱のために申し訳ありません –

それは良いはずです。 –

ASP.NETのラジオボタン選択でテーブルのセルを動的に変更

答えて

関連する問題