ASP.NET1.0/2.0里用DIV层元素弹出窗体
点击次数：28 次 发布日期：2008-11-26 11:28:05 作者：源代码网
|
源代码网推荐 源代码网推荐 最近我在用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="http://www.zzchn.com/edu/20080727/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" 源代码网推荐 onclick="jsAreaClose("divCountry")"＞＜img alt="Hide Popup" src="http://www.zzchn.com/edu/20080727/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="http://www.zzchn.com/edu/20080727/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(); 源代码网推荐 } 源代码网推荐 源代码网推荐 用户现在可以选择与国家相匹配的城市，如下 源代码网推荐 
源代码网推荐 做人要厚道，请注明转自酷网动力(www.ASPCOOL.COM)。 源代码网推荐 源代码网供稿. |
