2016-09-26 86 views
2

Home Page動態更改單選按鈕表格的單元格中的ASP.NET

選擇我已經制定了在ASP.NET預訂票務應用上面的示例頁面。我使用<asp:Table>標籤創建了上述佈局。該<asp:RadioButtonList>在第二行的第一小區可用,我的主要內容應該是在第二小區或第二排。每當我選擇一個單選按鈕第二小區的第2行中的內容應自動與該HomePage.aspx本身的新的aspx頁面無需重新加載頁面更新。我這樣做,在HTML <frameset>,但我想這樣做在ASP.NET網頁形式的.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 = 「真」

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個不同的單選按鈕靶細胞?

回答

0

終於找到使用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> 

然後我使用的CS代碼HomePage.aspx.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); 
    } 
} 
2

如果我正確地讀你的問題 - 你可以使用表和分配一個ID修改單元格的內容=和中用runat =「服務器」到TD要進行動態。在你的代碼隱藏中,使用Td和InnerHtml屬性的ID。

<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>"; 
+0

但是''沒有CS代碼中的InnerHtml屬性..我t裏德。我認爲InnerHtml是一個屬性,僅用於像'​​'這樣的HTML標記。在ASP.NET的情況下,我們使用'',所以它不支持。 –

+0

你是對的 - 這是一段時間。然後,您只需以相同的方式放置一個div標籤即可。我會編輯。對不起混音 –

+0

好的,應該更好。 –

相關問題