ASP.NET1.0/2.0里用DIV层元素弹出窗体
日期：2010-12-16 浏览次数：20399 次
本文 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代码来弹出窗体，代码如下：
代码中，用粗体标出的部分是Popup窗体的主要属性，在鼠标单击时，将调用一端JavaScript：PopupArea。
正如您所看到的，我们在页面底部添加了两个DIV元素，一个用于国家，一个用于城市，每一个都包含ListBox控件，用户可以使用Listbox选择上面的内容。
下图1现实了页面浏览的效果，他还演示了如何弹出DIV窗体
最近我在用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＞
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("count
if (!Page.IsPostBack)
{
// Load data from XML into a DataSet
DataSet ds = new DataSet();
ds.ReadXml(Server.MapPath("count
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
