在datagrid中的HyperLinkColumn上达到谈出一个窗口的效果
2008-05-01 03:46
465 查看
Creating a Popup Window Details Grid in a datagrid
This articles topic came from the suggestion of a true DotNetJunkie. He originally sent an email to us asking for an example illustrating how to make a HyperLinkColumn in a datagrid spawn events that would pop up a new window with details of the row that the user clicked on. Before we could anwser his email he had already emailed us back explaining that he had found a way to do it and suggested a tutorial of his discovery. So, here it is! As with most of our articles, this simplifies the task, but easy examples of coding techniques is what gives developers ideas for more complex senerios.
This example contains two WebForms and one external style sheet (All code is included in the download) - The first WebForm contains a datagrid with a list of products from the Northwind database and a hyperlink that states "SeeDetails". Once this link is clicked the JavaScript Window.Open method is used to open a new window. Within the URL is a Query String parameter of the ProductID of the product the user wants the details for. In the second WebForm there is another datagrid that shows the user all the details for the chosen product. The stylesheet is used just because its cleaner to use than inline styles. So lets take a look at WebForm1.aspx and 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
}
}
There isn't really anything out of the ordinary on here except for the details of DataNavigateUrlFormatString You'll notice that I actually have JavaScript window.open directly in it (Note: I could have just as easily created an external .js file or <script></script> within the WebForm - I used it inline for simplicity. This JavaScript code should look familiar to all so I won't go into discussion about it. Essentially, it will open a new browser with the page WebForm2.aspx with a query string parameter ProductID. This value is the ProductID from our data source. So let's look at WebForm2.aspx and 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 is also quite simple. The only object that resides on the page is a datagrid which is bound to a SqlDataReader. The Reader gets the data for the product based on the query string parameter of the ProductID value. Let's quickly look at the CSS (Cascading Style Sheet) file and then below that contains a figure illustrating WebForm1.aspx when it is first rendered:
StyleSheet1.css
/* Style Sheet */
BODY
{
margin-left: 0;
margin-top:10;
}
.HEADERSTYLE
{
background-color: #3a6ea5;
color: #FFFFFF;
font-weight:bold;
}
.ITEMSTYLEDEFAULT
{
background-color: #C0C0C0;
color: #000000;
font-weight: bold;
}
.ITEMSTYLEHYPERLINK {
background-color: #C0C0C0;
color: #000000;
font-weight: bold;
}
A:LINK
{
color: #000000;
}
A:VISITED
{
color: #000000;
}
A:HOVER
{
color: #3a6ea
This articles topic came from the suggestion of a true DotNetJunkie. He originally sent an email to us asking for an example illustrating how to make a HyperLinkColumn in a datagrid spawn events that would pop up a new window with details of the row that the user clicked on. Before we could anwser his email he had already emailed us back explaining that he had found a way to do it and suggested a tutorial of his discovery. So, here it is! As with most of our articles, this simplifies the task, but easy examples of coding techniques is what gives developers ideas for more complex senerios.
This example contains two WebForms and one external style sheet (All code is included in the download) - The first WebForm contains a datagrid with a list of products from the Northwind database and a hyperlink that states "SeeDetails". Once this link is clicked the JavaScript Window.Open method is used to open a new window. Within the URL is a Query String parameter of the ProductID of the product the user wants the details for. In the second WebForm there is another datagrid that shows the user all the details for the chosen product. The stylesheet is used just because its cleaner to use than inline styles. So lets take a look at WebForm1.aspx and 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
}
}
There isn't really anything out of the ordinary on here except for the details of DataNavigateUrlFormatString You'll notice that I actually have JavaScript window.open directly in it (Note: I could have just as easily created an external .js file or <script></script> within the WebForm - I used it inline for simplicity. This JavaScript code should look familiar to all so I won't go into discussion about it. Essentially, it will open a new browser with the page WebForm2.aspx with a query string parameter ProductID. This value is the ProductID from our data source. So let's look at WebForm2.aspx and 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 is also quite simple. The only object that resides on the page is a datagrid which is bound to a SqlDataReader. The Reader gets the data for the product based on the query string parameter of the ProductID value. Let's quickly look at the CSS (Cascading Style Sheet) file and then below that contains a figure illustrating WebForm1.aspx when it is first rendered:
StyleSheet1.css
/* Style Sheet */
BODY
{
margin-left: 0;
margin-top:10;
}
.HEADERSTYLE
{
background-color: #3a6ea5;
color: #FFFFFF;
font-weight:bold;
}
.ITEMSTYLEDEFAULT
{
background-color: #C0C0C0;
color: #000000;
font-weight: bold;
}
.ITEMSTYLEHYPERLINK {
background-color: #C0C0C0;
color: #000000;
font-weight: bold;
}
A:LINK
{
color: #000000;
}
A:VISITED
{
color: #000000;
}
A:HOVER
{
color: #3a6ea
相关文章推荐
- 在用android日志的时候老是弹出一个窗口,内容为:"Copy" did not complete normally. Please see the log 和 什么函数,能达到和android手机上按“返回”键一样的效果?
- ExtJS学习--如何新建一个窗口并达到遮罩住整个页面的效果
- 如何在ASP.NET里用DataView来达到DataGrid控件里的Column Sorting效果。
- 在DataGrid中创建一个弹出式窗口
- 一个超酷弹出窗口登陆框效果
- 如果某一个对象没有提供创建函数,或创建函数无法达到期望的效果,如果创建新的这个类型的对象?
- 对于一个DataGrid的DataGridColumn ItemRenderer,如何在操作Item
- 为DataGrid 写一个 DropDownListColumn
- Silverlight使用DataGrid的模板列(DataGridTemplateColumn)实现类似TreeListView控件的效果
- 在DataGrid中创建一个弹出式窗口
- 在DataGrid中创建一个弹出式窗口
- DataGrid之DataGridComboBoxColumn,DataGridCheckBoxColumn,DataGridHyperlinkColumn,DataGridTextColumn
- 用Html5 or JS实现点击一个按钮达到浏览器全屏效果
- 在DataGrid中创建一个弹出式Details窗口
- andorid popupwindow 更新时动画的实现,可实现一个窗口被一个窗口推上去的效果
- 在DataGrid中创建一个弹出式Details窗口
- .net学习datagrid的hyperlinkcolumn应用20060526
- DataGrid 中的 HyperLinkColumn (可以携带多个Get参数)
- 修改caffe输出multilabel,并自己训练完成了一个神经网络,初步达到目标检测的效果
- 如何在已有网站的服务器上面,通过nginx配置虚拟主机来达到多个应用使用同一个服务器的效果