如何创建一个用弹出窗口来查看详细信息的超链接列

如何创建一个用弹出窗口来查看详细信息的超链接列
出处：www.dotnetjunkie.com

这篇文章来自于一位忠实的DotNetJunkie的建议，他最初发了一封email给我们，
要求我们给出一个例子来说明如何在DataGrid中设置一个当用户点击时能够弹出
显示其详细信息的新窗口的超链接列。在我们给他回复之前，他已经给我们提供了
一种方法，并建议我们写篇教程。于是有了这篇文章。这篇文章包含了两个webforms和一个css第一个webform包含了一个DataGrid，它显示了Northwind数据库中的一列产品还有写着"SeeDetails"的超链接。只要点击了这个链接，就会调用JavaScript的Window.Open方法来打开一个新的窗口。在一个Url中包含了用户想详细了解的产品的ProductId的Query String 参数。在第二个Webform里，是另一个DataGrid，它显示了用户选择的产品的所有详细信息。现在让我们来看看WebForm1.aspx和WebForm1.aspx.cs。

WebForm1.aspx
<%@ Page language="c#" AutoEventWireup="false" Inherits="HowTos.DataGrid.PopupWindow.WebForm1" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<head>
   <LINK REL="stylesheet" TYPE="text/css" HREF="StyleSheet1.css"></LINK>
</head>
   <body>
    <center>
        <form runat="server" ID="Form1">
            <asp:datagrid id="DataGrid1" runat="server" Font-Size="12" AutoGenerateColumns="False">
            <Columns>
            <asp:BoundColumn DataField= "ProductID" HeaderText= "Product ID" HeaderStyle-CssClass="HEADERSTYLE" ItemStyle-CssClass="ITEMSTYLEDEFAULT" />
            <asp:BoundColumn DataField="ProductName" HeaderText="ProductName" HeaderStyle-CssClass="HEADERSTYLE" ItemStyle-CssClass="ITEMSTYLEDEFAULT"/>
            <asp:hyperlinkcolumn DataTextFormatString="ShowDetails..." DataTextField="ProductID" DataNavigateUrlField="ProductID" DataNavigateUrlFormatString="javascript:varwin=window.open('WebForm2.aspx?ProductID={0}',null,'width=692,height=25');" HeaderText="See Details" HeaderStyle-CssClass="HEADERSTYLE" ItemStyle-CssClass="ITEMSTYLEHYPERLINK" />
            </Columns>
            </asp:datagrid>
        </form>
     </center>
   </body>
</HTML>

WebForm1.aspx.cs
using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Data.SqlClient ;
using System.Drawing;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;

namespace HowTos.DataGrid.PopupWindow
{

public class WebForm1 : System.Web.UI.Page
{
protected System.Web.UI.WebControls.DataGrid DataGrid1;

#region User Defined Code

private void Page_Load(object sender, System.EventArgs e)
{

if ( ! this.IsPostBack )
this.BindData();

}

protected void BindData()
{

SqlCommand cmd = new SqlCommand( "SELECT TOP 10 ProductID, ProductName FROM Products", con("Server=LocalHost; DataBase=Northwind; TRUSTED_CONNECTION=TRUE"));
this.DataGrid1.DataSource = cmd.ExecuteReader(CommandBehavior.CloseConnection);
this.DataGrid1.DataBind();

}

protected SqlConnection con(System.String ConnectionString )
{

SqlConnection c = new SqlConnection( ConnectionString );
c.Open();
return c;

}

#endregion

#region Web Form Designer generated code

override protected void OnInit(EventArgs e)
        {

                InitializeComponent();
                base.OnInit(e);

        }

private void InitializeComponent()
        {

                this.Load += new System.EventHandler(this.Page_Load);

        }

#endregion

}
}

其实这两个文件没有什么难点，除了DataNavigateUrlFormatString,你注意到我直接把JavaScript window.open写在里面（注意：我也可以建一个js文件或者在WebForm中使用<script></script>，我直接写是为了简单）这个Javascript代码应该对大家来说很熟悉，所以我也不深入讨论它。它的作用就是在新窗口中打开WebForm2.aspx使用ProductId参数。这个值是来自我们的数据源。我们来看看webform2.aspx和webform2.aspx.cs。

WebForm2.aspx
<%@Page language="c#" AutoEventWireup="false" Inherits="HowTos.DataGrid.PopupWindow.WebForm2" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<html>
<head>
    <title>Product Details</title>
    <LINK REL="stylesheet" TYPE="text/css" HREF="StyleSheet1.css"></LINK>
</head>
    <body>
      <asp:DataGrid HeaderStyle-CssClass="HEADERSTYLE" ItemStyle-CssClass="ITEMSTYLEDEFAULT" runat="server" id="DataGrid1" Font-Size="8" Height="50" Width="675"></asp:DataGrid>
      <p align="center">
      <a href="JavaScript:window.close()">close window</a>
      </p>
    </body>
</html>

WebForm2.aspx.cs
using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Data.SqlClient ;
using System.Drawing;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;

namespace HowTos.DataGrid.PopupWindow
{

public class WebForm2 : System.Web.UI.Page
{
protected System.Web.UI.WebControls.DataGrid DataGrid1;

#region User Defined Code

private void Page_Load(object sender, System.EventArgs e)
    {
        if ( ! this.IsPostBack )
          this.BindData();
    }

protected void BindData()
    {
      SqlCommand cmd = new SqlCommand( "SELECT * FROM Products WHERE ProductID = @ProductID", con("Server=LocalHost; DataBase=Northwind; TRUSTED_CONNECTION=TRUE"));
      cmd.Parameters.Add(new SqlParameter("@ProductID", SqlDbType.VarChar, 200));
      cmd.Parameters["@ProductID"].Value = Request["ProductID"].ToString();
      this.DataGrid1.DataSource = cmd.ExecuteReader(CommandBehavior.CloseConnection);
      this.DataGrid1.DataBind();
    }

protected SqlConnection con(System.String ConnectionString )
{

SqlConnection c = new SqlConnection( ConnectionString );
c.Open();
return c;

}

#endregion

#region Web Form Designer generated code

override protected void OnInit(EventArgs e)
{

InitializeComponent();
base.OnInit(e);

}

private void InitializeComponent()
{

this.Load += new System.EventHandler(this.Page_Load);

}

#endregion

}
}

webform2.aspx也是相当的简单。其中只有一个绑定到SqlDataReader的DataGrid。SqlDataReader通过Query string参数获得产品的数据。

如何创建一个用弹出窗口来查看详细信息的超链接列相关推荐

[转]创建一个JavaScript弹出DIV窗口层的效果
本文转自:http://www.soso.io/article/23698.html <!doctype html> <html lang="en"> &l ...
用jQuery实现弹出窗口/弹出div层
原文链接:http://hi.baidu.com/awz_tiger/item/863cfc10c4bb0f6171d5e8d9 http://blog.163.com/qiuxinke2006@12 ...
jquery实现弹出窗口
JavaScript实现弹出窗口实质上就是在浏览器上画了一个方形区域,并在开始时将其隐藏,只是到某个JavaScript事件时才通过修改css的属性值来将其显示出来. 其大致步骤为: •创建一个装载弹 ...
swing退出子窗口事件_如何创建有效的退出弹出窗口？
如何创建有效的退出弹出窗口? 下面的退出弹出窗口为电子邮件列表增加了4153个订阅者: 这个提供折扣的弹出窗口,帮助Storiarts在60天之内挽回了96个弃单客户,从而额外创造了5000美元的销售 ...
html语言arc属性,为要素图层设置 HTML 弹出窗口属性
ArcGIS 中的许多地图图层都可用于访问要素的丰富的属性及其他信息.一种机制是,单击每个要素时显示一个 HTML 弹出窗口.这就潜在地提供了一种有效的方法来共享每个要素的 HTML 格式的信息(例如 ...
javascript弹出窗口代码大全（转）
转帖,用来学习的 javascript弹出窗口代码大全如何利用网页弹出各种形式的窗口,我想大家大多都是知道些的,但那种多种多样的弹出式窗口是怎么搞出来的,我们今天就来学习一下: 1.弹启一个全屏窗口 ...
php屏蔽弹出窗口,可以不被浏览器拦截的弹出窗口JS代码
转载: 一个强制弹出窗口的JavaScript类:ForceWindow 一个可以不被广告拦截器拦截的弹出窗口 ForceWindow.iclass.js代码如下(使用.讲解.相关说明全部在注释中): ...
java一个界面用另一个界面的值_如何将参数/值从一个弹出窗口传递到Angular2中的另一个弹出窗口...
我在Angular2中有一个要求,我需要打开第一个弹出窗口,用户会输入一些值 . 在某些用户事件(即按钮单击)上,我需要关闭该弹出窗口并打开另一个弹出窗口,其中包含用户在第一个弹出窗口中输入的值 . ...
android中弹出窗口,如何在Android中创建弹出窗口（PopupWindow）
如何制作一个简单的Android弹出窗口这是一个更完整的例子.这是一个补充性答案,涉及一般情况下创建弹出窗口的过程,而不一定是OP问题的具体细节.(OP要求取消按钮,但这不是必需的,因为用户可以在屏 ...

如何创建一个用弹出窗口来查看详细信息的超链接列

如何创建一个用弹出窗口来查看详细信息的超链接列相关推荐

最新文章

热门文章