最近我在用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"＞ ＜!-- // Prevent users from typing any text // into the Textbox function ProtectBox(e) {return false; } //--＞ ＜/script＞ ＜/HEAD＞ ＜body＞ ＜form id="Form1" method="post" runat="server"＞ ＜!-- Header Section --＞ ＜div id="header"＞ ＜p＞Popup Window with DIV Layer＜/p＞ ＜/div＞ ＜!-- Body Section --＞ ＜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" οnclick="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" οnclick="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(); } |
用戶現在可以選擇與國家相匹配的城市，如下
 |