在datagrid中创建一个弹出式窗口
这篇文章来自dotnetjunkie的提议。他最初写信要求我们提供一个关于如何创建在datagrid 中使用hyperlinkcolumn的例子，可以在用户点击这一列后打开一个新窗口，显示出此列的详细内容。在此之前我们曾经通过email回答他们，他建议我们将这个方法加入他们的指南中，于是，就有了这篇文章。像我们原来的文章一样，它很简单，但是简单的包含代码的方法例可以更有效地启发开发者。
这个例子包含两个webforms和一个css文件（所有的代码都可以下载）－－第一个webform包含一个展示从northwind库中读出的产品列表的datagrid，hyperlink的states设为“seedetails”,一旦这个链接被点击，javascript片段 window.open方法就会被调用.用户想获得的关于产品的productid做为参数包含在url中.包含另一个datagrid的第二个webforms向用户列示他选中产品的所有具体细节。让我们来看一下datagrid-open.aspx和datagrid-open.aspx.cs
datagrid-open.aspx
<%@ page language="c#" codebehind="datagrid-open.aspx.cs" autoeventwireup="false" inherits="study.datagrid_open" %>
<html>
<head>
<title>datagrid-open</title>
<meta name="generator" content="microsoft visual studio 7.0">
<meta name="code_language" content="c#">
<meta name="vs_defaultclientscript" content="javascript">
<meta name="vs_targetschema" content="http://schemas.microsoft.com/intellisense/ie5">
</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="product name" headerstyle-cssclass="headerstyle" itemstyle-cssclass="itemstyledefault" />
<asp:hyperlinkcolumn datatextformatstring="show details..." datatextfield="productid" datanavigateurlfield="productid" datanavigateurlformatstring="javascript:var win = window.open("datagrid-show.aspx?productid={0}",null,"width=700,height=200");" headertext="see details" headerstyle-cssclass="headerstyle" itemstyle-cssclass="itemstylehyperlink" />
</columns>
</asp:datagrid>
</form>
</center>
</body>
</html>
datagrid-open.aspx.cs
using system;
using system.collections;
using system.componentmodel;
using system.data;
using system.drawing;
using system.web;
using system.web.sessionstate;
using system.web.ui;
using system.web.ui.webcontrols;
using system.web.ui.htmlcontrols;
using system.data.sqlclient;
namespace study
{
/// <summary>
/// datagrid_open 的摘要说明。
/// </summary>
public class datagrid_open : system.web.ui.page
{
protected system.web.ui.webcontrols.datagrid datagrid1;
protected system.web.ui.htmlcontrols.htmlform form1;
#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=dwserver; database=northwind; user id=sa; password=123456"));
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)
{
//
// codegen：该调用是 asp.net web 窗体设计器所必需的。
//
initializecomponent();
base.oninit(e);
}
/// <summary>
/// 设计器支持所需的方法 - 不要使用代码编辑器修改
/// 此方法的内容。
/// </summary>
private void initializecomponent()
{
this.load += new system.eventhandler(this.page_load);
}
#endregion
}
}
除了datanavigateurlformatstring外确实没什么困难的，你可以注意到我实际上直接使用了一个javascript片段（注：你也可以简单地创建一个.js文件或在webform中使用<script></script>），javascript如此普及，所以这里不再详细讲解。功能上，它打开一个新的窗口，带productid查询字串的datagrid_show.aspx，productid的值来自我们的数据源。我们可以看这两个文件：
datagrid_show.aspx
<%@ page language="c#" codebehind="datagrid-show.aspx.cs" autoeventwireup="false" inherits="study.datagrid_show" %>
<html>
<head>
<title>datagrid-show</title>
<meta name="generator" content="microsoft visual studio 7.0">
<meta name="code_language" content="c#">
