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

如何创建一个用弹出窗口来查看详细信息的超链接列 出处：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" %>

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" %>

close window

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参数获得产品的数据。