ASP.NET1.0/2.0里用DIV層元素彈出窗體

2019-11-18 16:50:12

字體：大中小

來源：轉載

供稿：網友

　　本文 Bilal Haidar 將帶領您如何使用DIV元素來創(chuàng)建彈出的窗體,這種彈出即可以包含簡單的HTML元素也可以包含 asp.net服務器控件,而且在實現(xiàn)過程中沒有使用傳統(tǒng)的window函數(shù)和showModalDialog / showModelessDialog函數(shù)(傳統(tǒng)的我們使用 window.open,或者showModalDialog 這樣的函數(shù)來制作彈出窗口--天天注釋)

　　最近我在用ASP.NET1.1技術來開發(fā)一個窗體,該窗體包含由三個控件組成的一個面板集合,這個面板用來顯示系統(tǒng)信息.可以假想這些控件是一些簡單的下拉框,當?shù)谝粋€下拉框選取后,第二個下拉框的值將顯示被第一個過濾的結果,同樣第三個下拉框將根據(jù)第二個下拉框的選擇而進行改變顯示。

　　窗體的這個技術通常被用來讓終端客戶那些不知道ASP.NET技術的人員獲取更好的用戶體驗。

　　當決定使用這些控件的替代品使用時,您是否用過dropdownlist或者是具有彈出窗體功能的Textbox控件?

　　好了,我們已經有了一個很好的解決方案:使用TextBox控件并掛鉤OnClick事件來觸發(fā)DIV彈出窗體,包括使用Listbox控件來選擇數(shù)據(jù)的值
一個不使用任何常規(guī)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"＞
?。約cript src="jspopup.js" type="text/Javascript"＞＜/script＞
?。約cript language="javascript"＞
　　＜!--
　　　// PRevent users from typing any text
　　　// into the Textbox
　　　function ProtectBox(e)
　　　{return false; }

　　//--＞
?。?script＞
＜/HEAD＞
＜body＞
?。糵orm id="Form1" method="post" runat="server"＞
　＜!-- Header Section --＞
?。糳iv id="header"＞
　?。紁＞Popup Window with DIV Layer＜/p＞
　＜/div＞
?。?-- Body Section --＞
　＜div id="content"＞
　?。紅able border="0" cellpadding="0" cellspacing="0"＞
　　＜tr valign="top"＞
　　?。紅d＞＜label for="txtCountry"＞Country :＜/label＞＜/td＞
　　?。紅d＞＜asp:TextBox
　　　　　id="txtCountry" runat="server" OnKeyDown="return
　　　　　ProtectBox(event);" OnClick="PopupArea(event, 'divCountry')"＞＜/asp:TextBox＞＜/td＞
　　?。紅d width="50"＞＜/td＞
　　?。紅d＞＜label for="txtCity"＞City :＜/label＞＜/td＞
　　?。紅d＞＜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"＞
　?。紅r＞
　　?。紅d align="right"＞＜span style="CURSOR: hand"
　　　　onclick="jsAreaClose('divCountry')"＞＜img alt="Hide Popup" src="close.gif"
　　　　border="0"＞＜/span＞＜/td＞
　?。?tr＞
　?。紅r＞
　　?。紅d＞
　　　　＜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"＞
　?。紅r＞
　　?。紅d align="right"＞＜span style="CURSOR: hand" onclick="jsAreaClose('divCity')"＞＜img alt="Hide Popup" src="close.gif" border="0"＞＜/span＞＜/td＞
　　＜/tr＞
　?。紅r＞
　　?。紅d＞
　　　　＜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現(xiàn)實了頁面瀏覽的效果，他還演示了如何彈出DIV窗體

　　當單擊Textbox內部，windows將彈出窗體而不會引起頁面數(shù)據(jù)回發(fā)現(xiàn)在該到填充其中數(shù)據(jù)的時候了

　　Page COde-behind

　　在頁面后臺，我們準備從一個xml文檔加載list“國家”所需要的數(shù)據(jù)，同時顯示國家的名稱，下面列出了這個功能的代碼：

　　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();
}

　　在這一步驟中，當頁面運行時，您可以選擇國家，如下圖

　　現(xiàn)在，當用戶選擇國家時，將觸發(fā)listbox的選擇事件，并通過該事件加載“城市”數(shù)據(jù)，該數(shù)據(jù)同樣從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();
}

　　用戶現(xiàn)在可以選擇與國家相匹配的城市，如下