在DataGrid中创建一个弹出式窗口

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

时间: 2024-11-02 10:37:45

在DataGrid中创建一个弹出式窗口的相关文章

Javascript实例教程(1) 创建弹出式窗口

javascript|创建|教程 利用Javascript创建弹出式窗口 好吧,言归正转,开始我们的第一个教程吧.利用Javascript创建弹出式窗口的目的实际上是打开另外的浏览器窗口.你可以设置这个浏览器窗口的一些属性,如高度.宽度以及是否让该窗口有一个状态条或者工具条.在下面的例子中,我将窗口设置为:350 x 400,即高度为350像素,宽度为400像素:其中也包括了另外的一些设置,如滚动条:而将其它的设置(如状态条.菜单条)都设置为没有(no). 下面是具体的代码,你可以将它放置到网页

构建一个弹出式图象按钮

按钮 构建Windows控件并不是一件特别复杂的事情.我曾在以前的文章中讲过如何通过最专业的技术来构建复杂的控件,但这并不意味着构建所有控件都是那么复杂.本文我将用一种曾在我的工作中遇到的简单方法来解决一个真实领域中的问题.就算你只有一些或者完全没有什么构建控件的经验,你也可以用它来实现在你的桌面应用程序中加入复杂的功能. 我需要一个带有不同图象的弹出式按钮,用于实现常规的.mouse-hover和mouse-down状态.我可以用一个常规的WinForm按钮来实现大多数我想要的效果,但却不能实

Js Jquery创建一个弹出层可加载一个页面_javascript技巧

复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"

mfc opencv 窗口关闭-MFC应用程序中,opencv弹出的窗口如何关闭

问题描述 MFC应用程序中,opencv弹出的窗口如何关闭 如题,我用VS2013+opencv2.4.8,做了一个应用程序,用opencv弹出了两个视频显示窗口,用MFC界面上的一个Button,做"系统退出",但是当MFC的界面退出后,opencv的那两个窗口还在,不知道如何自主关闭?除了"Esc",知道的大神们,请帮帮忙,先谢谢了! 解决方案 http://blog.csdn.net/jhh_move_on/article/details/8088461 解决

三星手机Note5 SM-N9200(6.0.1)如何将全屏模式转为弹出式窗口?

注:弹出视图手势功能默认是开启状态,若您关闭了该功能,请手动开启后(开启路径:设置-高级功能-弹出视图手势开启即可)进行以下操作.  1.沿屏幕左上角或右上角的对角线方向拖动屏幕的某个角,即可将全屏窗口转为弹出式窗口,这里以"S日历"为例.(注:某些应用程序不支持弹出式窗口,此操作可能无效.)    2.点击弹出式窗口上的[圆点]图标可以查看更多选项.    3.可以看到四个选项图标:拖动内容.最小化窗口.最大化窗口.关闭应用程序,这里以点击[最小化窗口]图标为例. (注:如需移动弹出

js之弹出式窗口代码生成器_javascript技巧

弹出式窗口代码生成器 要完成此效果把如下代码加入到区域中 弹出式窗口代码产生器 在新窗口里要打开的文件 (文件的名字或URL地址...) 请选择要显示的窗口元素 toolbars status bar scrollbars menu bar location bar resizeable 输入窗口的大小(缺省是满屏打开) Witdh (in pixels) Height (in pixels) 窗口打开方式 点按钮点超链自动 让窗口出现在屏幕正中间? 把下面代码Copy到程序中: [Ctrl+A

三星S7 SM-G9300(6.0.1)将全屏模式转为弹出式窗口方法

Samsung Galaxy S7 SM-G9300支持在应用程序全屏模式下转为弹出式窗口,若想实现该功能,请按以下步骤操作:  1.沿屏幕左上角或右上角的对角线方向拖动屏幕的某个角,即可将全屏窗口转为弹出式窗口,这里以"S日历"为例.(注:某些应用程序不支持弹出式窗口,此操作可能无效.)    2.点击弹出式窗口上的[圆点]图标可以查看更多选项.    3.可以看到四个选项图标:拖动内容.最小化窗口.最大化窗口.关闭应用程序,这里以点击[最小化窗口]图标为例. (注:如欲移动弹出窗口

三星Note Edge如何使用弹出式窗口?三星N9150弹出式窗口使用教程

1.长按[返回]键,打开多窗口.    2.点击要开启的应用程序,这里以[三星应用商店]为例.    3.就会以弹出式窗口打开三星应用商店.    4.您也可以通过最近应用程序打开弹出式窗口,点击[最近应用程序]键.    5.长按某一应用程序即可打开弹出式窗口,这里以[三星应用商店]为例. (注:某些软件不支持该方式)    6.三星应用商店以弹窗形式出现在屏幕上.   

三星Note4如何使用弹出式窗口?N9108V弹出式窗口使用教程

1.长按[返回]键,打开多窗口.    2.点击要开启的应用程序,这里以[S日历]为例.     3.就会以弹出式窗口打开S日历.    4.您也可以通过最近应用程序打开弹出式窗口,点击[最近应用程序]键.    5.长按某一应用程序即可打开弹出式窗口,这里以[S日历]为例.    6.S日历以弹窗形式出现在屏幕上.