在ASP.NET1.0/2.0裡使用DIV層元素彈出表單

最後更新：2018-07-17 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

本文 Bilal Haidar 將帶領您如何使用DIV元素來建立彈出的表單,這種彈出即可以包含簡單的HTML元素也可以包含ASP.NET伺服器控制項,而且在實現過程中沒有使用傳統的window函數和showModalDialog / showModelessDialog函數
(傳統的我們使用 window.open,或者showModalDialog 這樣的函數來製作快顯視窗--天天注釋)

   最近我在用ASP.NET1.1技術來開發一個表單,該表單包含由三個控制群組成的一個面板集合,這個面板用來顯示系統資訊.可以假想這些控制項是一些簡單的下拉框,當第一個下拉框選取後,第二個下拉框的值將顯示被第一個過濾的結果,同樣第三個下拉框將根據第二個下拉框的選擇而進行改變顯示。
   表單的這個技術通常被用來讓終端客戶那些不知道ASP.NET技術的人員擷取更好的使用者體驗。
    當決定使用這些控制項的替代品使用時,您是否用過dropdownlist或者是具有彈出表單功能的Textbox控制項?
    好了,我們已經有了一個很好的解決方案:使用TextBox控制項並掛鈎OnClick事件來觸發DIV彈出表單,包括使用Listbox控制項來選擇資料的值
   一個不使用任何常規popup表單或者過時的Dropdownlist來完成這個功能

THE HTML WebForm
   我們已經建立了一個簡單的WebForm,他包含了一些TextBox,每一個TextBox已經附加了OnClick事件，用一段javascript代碼來彈出表單，代碼如下：

<%@ Page language="c#"
Codebehind="ParentPage.aspx.cs" AutoEventWireup="false"
Inherits="PopupWithDiv.ParentPage" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
      <HEAD>
            <title>Parent Page</title>
            <LINK href="main.css" type="text/css" rel="stylesheet">
            <script src="jsPopup.js" type="text/javascript"></script>
                  <script language="javascript">
                  
                  </script>
      </HEAD>
      <body>
            <form id="Form1" method="post" runat="server">
                  
                  <div id="header">
                        <p>Popup Window with DIV Layer</p>
                  </div>
                  
                  <div id="content">
                        <table border="0" cellpadding="0" cellspacing="0">
                              <tr valign="top">
                                    <td><label for="txtCountry">Country :</label></td>
                                    <td><asp:TextBox
id="txtCountry" runat="server" OnKeyDown="return
ProtectBox(event);" OnClick="PopupArea(event, 'divCountry')"></asp:TextBox></td>
                                    <td width="50"></td>
                                    <td><label for="txtCity">City :</label></td>
                                    <td><asp:TextBox
id="txtCity" runat="server" OnKeyDown="return
ProtectBox(event);" OnClick="PopupArea(event, 'divCity')"></asp:TextBox></td>
                              </tr>
                        </table>
                  </div>
                  <%-- Country --%>
                  <div class="popupWindow" id="divCountry">
                        <table cellSpacing="0" cellPadding="0" width="100%"
bgColor="#2557ad" border="0">
                              <tr>
                                    <td align="right"><span style="CURSOR: hand"
onclick="jsAreaClose('divCountry')"><img alt="Hide Popup" src="close.gif"
border="0"></span></td>
                              </tr>
                              <tr>
                                    <td>
                                          <asp:ListBox
id="lstCountry" runat="server"
AutoPostBack="True" width="100%"
rows="10"></asp:ListBox></td>
                              </tr>
                        </table>
                  </div>
                  <%-- City --%>
                  <div class="popupWindow" id="divCity">
                        <table
cellSpacing="0" cellPadding="0" width="100%"
bgColor="#2557ad" border="0">
                              <tr>
                                    <td
align="right"><span style="CURSOR: hand"
onclick="jsAreaClose('divCity')"><img alt="Hide Popup" src="close.gif"
border="0"></span></td>
                              </tr>
                              <tr>
                                    <td>
                                          <asp:ListBox
id="lsCity" runat="server" AutoPostBack="True"
width="100%" rows="10"></asp:ListBox></td>
                              </tr>
                        </table>
                  </div>
            </form>
      </body>
</HTML>

代碼中，用粗體標出的部分是Popup表單的主要屬性，在按一下滑鼠時，將調用一端JavaScript：PopupArea
正如您所看到的，我們在頁面底部添加了兩個DIV元素，一個用於國家，一個用於城市，每一個都包含ListBox控制項，使用者可以使用Listbox選擇上面的內容
下圖1現實了頁面瀏覽的效果，他還示範了如何彈出DIV表單

當單擊Textbox內部，windows將彈出表單而不會引起頁面資料回傳
現在該到填充其中資料的時候了

Page COde-behind
在頁面後台，我們準備從一個XML文檔載入list“國家”所需要的資料，同時顯示國家的名稱，下面列出了這個功能的代碼：

Listing 2: Populate Country ListBox

// Load data into Country List box
if (!Page.IsPostBack)
{
// Load data from XML into a DataSet
DataSet ds = new DataSet();
ds.ReadXml(Server.MapPath("countries.xml"));

this.lstCountry.DataSource = ds.Tables[0].DefaultView;
this.lstCountry.DataTextField = "name";
this.lstCountry.DataBind();
}

在這一步驟中，當頁面運行時，您可以選擇國家，如下圖現在，當使用者選擇國家時，將觸發listbox的選擇事件，並通過該事件載入“城市”資料，該資料同樣從XML文檔載入下面列出了事件代碼
Listing 3 private void lstCountry_SelectedIndexChanged(object sender, EventArgs e)
{
// Set the value in the textbox
this.txtCountry.Text = this.lstCountry.SelectedValue;

// Load and Filter the lstCity
DataSet ds = new DataSet();
ds.ReadXml(Server.MapPath("cities.xml"));

DataView dv = ds.Tables[0].DefaultView;
dv.RowFilter = "country = '" + this.lstCountry.SelectedValue + "'";

// Bind lstCity
this.lstCity.DataSource = dv;
this.lstCity.DataTextField = "name";
this.lstCity.DataBind();
} 使用者現在可以選擇與國家相匹配的城市，如下

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

在ASP.NET1.0/2.0裡使用DIV層元素彈出表單

聯繫我們

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support