查看完整版本: ASP.NET1.0/2.0里用DIV层元素弹出窗体

ASP.NET1.0/2.0里用DIV层元素弹出窗体

本文BilalHaidar将带领您如何使用DIV[wiki]元素[/wiki]来创建弹出的窗体,这种弹出即可以包含简单的HTML元素也可以包含ASP.NET[wiki]服务器[/wiki]控件,而且在实现过程中没有使用传统的window函数和showModalDialog/showModelessDialog函数(传统的我们使用window.open,或者showModalDialog这样的函数来制作弹出窗口--天天注释)

　　最近我在用ASP.NET1.1[wiki]技术[/wiki]来开发一个窗体,该窗体包含由三个控件组成的一个面板集合,这个面板用来显示[wiki]系统[/wiki][wiki]信息[/wiki].可以假想这些控件是一些简单的下拉框,当第一个下拉框选取后,第二个下拉框的值将显示被第一个过滤的结果,同样第三个下拉框将根据第二个下拉框的选择而进行改变显示。

　　窗体的这个技术通常被用来让终端客户那些不知道ASP.NET技术的人员获取更好的用户体验。

　　当决定使用这些控件的替代品使用时,您是否用过dropdownlist或者是具有弹出窗体功能的Textbox控件?

　　好了,我们已经有了一个很好的解决方案:使用TextBox控件并挂钩OnClick事件来触发DIV弹出窗体,包括使用Listbox控件来选择数据的值
一个不使用任何常规popup窗体或者过时的Dropdownlist来完成这个功能

　　THEHTMLWebForm

　　我们已经建立了一个简单的WebForm,他包含了一些TextBox,每一个TextBox已经附加了OnClick事件，用一段javascript代码来弹出窗体，代码如下：

＜%@Pagelanguage="c#"
Codebehind="ParentPage.aspx.cs"AutoEventWireup="false"
Inherits="PopupWithDiv.ParentPage"%＞
＜!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.0Transitional//EN"＞
＜HTML＞
＜HEAD＞
　＜title＞ParentPage＜/title＞
　＜LINKhref="main.css"[wiki]type[/wiki]="text/css"rel="stylesheet"＞
　＜scriptsrc="jsPopup.js"type="text/javascript"＞＜/script＞
　＜scriptlanguage="javascript"＞
　　＜!--
　　　//Preventusersfromtypinganytext
　　　//intotheTextbox
　　　functionProtectBox(e)
　　　{returnfalse;}

　　//--＞
　＜/script＞
＜/HEAD＞
＜body＞
　＜formid="Form1"method="post"runat="server"＞
　＜!--HeaderSection--＞
　＜divid="header"＞
　　＜p＞PopupWindowwithDIVLayer＜/p＞
　＜/div＞
　＜!--BodySection--＞
　＜divid="content"＞
　　＜tableborder="0"cellpadding="0"cellspacing="0"＞
　　＜trvalign="top"＞
　　　＜td＞＜labelfor="txtCountry"＞Country:＜/label＞＜/td＞
　　　＜td＞＜asp:TextBox
　　　　　id="txtCountry"runat="server"＞＜/asp:TextBox＞＜/td＞
　　　＜tdwidth="50"＞＜/td＞
　　　＜td＞＜labelfor="txtCity"＞City:＜/label＞＜/td＞
　　　＜td＞＜asp:TextBox
　　　　　　id="txtCity"runat="server"＞＜/asp:TextBox＞＜/td＞
　　＜/tr＞
　　＜/table＞
　＜/div＞
　＜%--Country--%＞
　＜divclass="popupWindow"id="divCountry"＞
　　＜tablecellSpacing="0"cellPadding="0"width="100%"　bgColor="#2557ad"border="0"＞
　　＜tr＞
　　　＜tdalign="right"＞＜spanstyle="CURSOR:hand"
　　　　＞＜imgalt="HidePopup"src="close.gif"
　　　　border="0"＞＜/span＞＜/td＞
　　＜/tr＞
　　＜tr＞
　　　＜td＞
　　　　＜asp
[img]http://bbs.jokcn.com/images/smilies/10.gif[/img]
istBoxid="lstCountry"runat="server"AutoPostBack="True"width="100%"
rows="10"＞＜/asp
[img]http://bbs.jokcn.com/images/smilies/10.gif[/img]
istBox＞＜/td＞
　　＜/tr＞
　＜/table＞
　＜/div＞
　＜%--City--%＞
　　＜divclass="popupWindow"id="divCity"＞
　　＜table
　　　　cellSpacing="0"cellPadding="0"width="100%"
　　　　bgColor="#2557ad"border="0"＞
　　＜tr＞
　　　＜tdalign="right"＞＜spanstyle="CURSOR:hand"＞＜imgalt="HidePopup"src="close.gif"border="0"＞＜/span＞＜/td＞
　　＜/tr＞
　　＜tr＞
　　　＜td＞
　　　　＜asp
[img]http://bbs.jokcn.com/images/smilies/10.gif[/img]
istBoxid="lsCity"runat="server"AutoPostBack="True"width="100%"rows="10"＞＜/asp
[img]http://bbs.jokcn.com/images/smilies/10.gif[/img]
istBox＞　　　＜/td＞
　　＜/tr＞
　　＜/table＞
　＜/div＞
＜/form＞
＜/body＞
＜/HTML＞

　　代码中，用粗体标出的部分是Popup窗体的主要属性，在[wiki]鼠标[/wiki]单击时，将调用一端JavaScript：PopupArea。

　　正如您所看到的，我们在页面底部添加了两个DIV元素，一个用于国家，一个用于城市，每一个都包含ListBox控件，用户可以使用Listbox选择上面的内容。

　　下图1现实了页面浏览的效果，他还演示了如何弹出DIV窗体


[img]http://www.wangyeba.com/Article/UploadFiles/200612/20061206072908610.jpg[/img]
　　当单击Textbox内部，[wiki]windows[/wiki]将弹出窗体而不会引起页面数据回发现在该到填充其中数据的时候了
　　PageCOde-behind

　　在页面后台，我们准备从一个[wiki]XML[/wiki]文档加载list“国家”所需要的数据，同时显示国家的名称，下面列出了这个功能的代码：

　　Listing2:PopulateCountryListBox


//LoaddataintoCountryListbox
if(!Page.IsPostBack)
{
　//LoaddatafromXMLintoaDataSet
　DataSetds=newDataSet();
　ds.ReadXml(Server.MapPath("countries.xml"));

　this.lstCountry.DataSource=ds.Tables[0].DefaultView;
　this.lstCountry.DataTextField="name";
　this.lstCountry.DataBind();
}

　　在这一步骤中，当页面运行时，您可以选择国家，如下图


[img]http://www.wangyeba.com/Article/UploadFiles/200612/20061206072908748.jpg[/img]

　　现在，当用户选择国家时，将触发listbox的选择事件，并通过该事件加载“城市”数据，该数据同样从XML文档加载

　　下面列出了事件代码

　　Listing3

privatevoidlstCountry_SelectedIndexChanged([wiki]object[/wiki]sender,EventArgse)
{
　//Setthevalueinthetextbox
　this.txtCountry.Text=this.lstCountry.SelectedValue;

　//LoadandFilterthelstCity
　DataSetds=newDataSet();
　ds.ReadXml(Server.MapPath("cities.xml"));

　DataViewdv=ds.Tables[0].DefaultView;
　dv.RowFilter="country='"+this.lstCountry.SelectedValue+"'";

　//BindlstCity
　this.lstCity.DataSource=dv;
　this.lstCity.DataTextField="name";
　this.lstCity.DataBind();
}

　　用户现在可以选择与国家相匹配的城市，如下


[img]http://www.wangyeba.com/Article/UploadFiles/200612/20061206072909679.jpg[/img]