asp.net 本文 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"＞
＜!--
// 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" ＞＜/asp:TextBox＞＜/td＞
＜td width="50"＞＜/td＞
＜td＞＜label for="txtCity"＞City :＜/label＞＜/td＞
＜td＞＜asp:TextBox
id="txtCity" runat="server" ＞＜/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"
＞＜img alt="Hide Popup" src="http://www.webjx.com/htmldata/2006-12-05/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" ＞＜img alt="Hide Popup" src="http://www.webjx.com/htmldata/2006-12-05/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();
}
使用者現在可以選擇與國家相匹配的城市，如下
