在ASP.NET1.0/2.0里使用DIV层元素弹出窗体
2006-12-25 15:16
531 查看
本文 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" 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="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="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();
}
用户现在可以选择与国家相匹配的城市，如下
下载本文源代码：
upload/2006_12/06120214495066.zip
源文件地址：
http://aspalliance.com/1060_How_to_Popup_a_Window_Using_DIV_Layer_in_ASPNET_1x2x
相关资源：
http://www.magicajax.net/
-------------------------------------------------------------------------
本文由天天翻译，如果本文能够对您有所帮助，我们将感到非常高兴。也希望您能捐赠本站
(传统的我们使用 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" 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="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="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();
}
用户现在可以选择与国家相匹配的城市，如下
下载本文源代码：
upload/2006_12/06120214495066.zip
源文件地址：
http://aspalliance.com/1060_How_to_Popup_a_Window_Using_DIV_Layer_in_ASPNET_1x2x
相关资源：
http://www.magicajax.net/
-------------------------------------------------------------------------
本文由天天翻译，如果本文能够对您有所帮助，我们将感到非常高兴。也希望您能捐赠本站
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 在ASP.NET1.0/2.0里使用DIV层元素弹出窗体
- 在ASP.NET1.0/2.0里使用DIV层元素弹出窗体
- 在ASP.NET1.0/2.0里使用DIV层元素弹出窗体
- ASP.NET1.0/2.0里用DIV层元素弹出窗体
- ASP.NET1.0/2.0里用DIV层元素弹出窗体
- 在Asp.net里利用DIV层元素弹出窗体
- 也学ASP.NET 2.0 AJAX 1.0 之一：使用ScriptManager,UpdatePanel,UpdateProgress
- 使用ASP.NET 2.0 AJAX 弹出对话框
- ASP.NET2.0中ClientScriptManager的用法(使用ASP.NET 2.0 AJAX 弹出对话框)
- ASP.NET页面使用JS弹出窗体
- 使用VS 2008创建启用了ASP.NET AJAX 1.0的新ASP.NET 2.0项目
- ASP.NET2.0中ClientScriptManager的用法(使用ASP.NET 2.0 AJAX 弹出对话框)
- 技巧百问(2):在asp.net网页中如何使用弹出窗体？
- ASP.NET 2.0中使用自定义provider （2）
- ASP.NET MVC 1.0 转化为ASP.NET MVC 2.0的方法 vs 2010
- 在ASP.NET 2.0中操作数据之六十六：在TableAdapters中使用现有的存储过程
- 使用ASP.NET 2.0 Profile存储用户信息_2[翻译] Level 200
- ASP.net中防止弹出窗体中，开起两个一样的新子窗体
- asp.net 2.0 下设置和使用FCKeditor文本编辑器
- ASP.NET 2.0使用user profile储存信息前,如何部署aspnetdb.mdf和连接