在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#">
<meta name="vs_defaultClientScript" content="JavaScript">
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
</HEAD>
<body>
<P align="left">
<asp:DataGrid HeaderStyle-CssClass="HEADERSTYLE" ItemStyle-CssClass="ITEMSTYLEDEFAULT" runat="server" id="DataGrid1" Font-Size="8" Height="50" Width="675"></asp:DataGrid></P>
<p align="center">
<a href="JavaScript:window.close()">close window</a>
</p>
</body>
</HTML>

datagrid_show.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_show 的摘要说明。
/// </summary>
public class datagrid_show : 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=dwserver; DataBase=Northwind; User Id=sa; Password=123456"));
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)
{
//
// CODEGEN:该调用是 ASP.NET Web 窗体设计器所必需的。
//
InitializeComponent();
base.OnInit(e);
}
/// <summary>
/// 设计器支持所需的方法 - 不要使用代码编辑器修改
/// 此方法的内容。
/// </summary>
private void InitializeComponent()
{
this.Load += new System.EventHandler(this.Page_Load);
}
#endregion
}
}




c#中在DataGrid里创建一个弹出式窗口------可实现源代码
查看全文
如若内容造成侵权/违法违规/事实不符,请联系编程学习网邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!

相关文章

  1. 电路板级的电磁兼容性EMC

    从PCB布线&#xff0c;电路设计&#xff0c;元器件3方面来分析EMC。...

    2023/8/14 15:17:05
  2. 通信协议- IIC和SPI

    IIC&#xff08;intel integrated circuit&#xff09;和SPI&#xff08;serial peripheral interface&#xff09;是一种低速短距离通信总线。 SPI没有明文规定。 IIC可多主总线&#xff0c;SPI是单主总线。 传输速度&#xff1a; SPI有多快传多快。 IIC&#xff1a;标准模式…...

    2023/8/14 11:01:22
  3. 单片机的概述

    单片机类别: 单片机也有其他说法&#xff0c;微控制器&#xff0c;微处理器(dsp) 按照单片机的内核(ip核)分类:51系列&#xff0c;AVR系列&#xff0c;ARM系列(ARMv1~ARMv8架构&#xff0c;ARM11后用cortex命名&#xff0c;cortex系列是armv7架构&#xff0c;A:虚拟内存 操作系…...

    2023/8/14 15:17:04
  4. 电源的恒压与恒流原理

    电源的恒压与恒流原理 一、恒压与恒流的概念 恒压指的是电源以恒定电压输出&#xff0c;负载大小的变化不会改变输出电压&#xff0c;但是输出电流可能会变化。 恒流与恒压类似。 二、应用场合 恒流技术一般用于驱动LED&#xff0c;驱动比例阀等对电流有要求对象。 恒压技术一…...

    2023/8/14 14:27:59
  5. vs2005 MFC界面自绘图形BMP按钮时,设置按钮的位置问题

    步骤1&#xff1a;按钮button的属性Owner Draw设置为True&#xff1b; 步骤2&#xff1a;在BOOL CChargeDlg::OnInitDialog()函数中调用SetWindowPos(HWND hWnd,HWND hWndInsertAfter,int X,int Y,int cx,_In_ int cy, UINTuFlags)设置按钮的位置&#xff0c;如下 CWnd *pWnd;…...

    2023/8/14 10:16:38
  6. Qt Widgets 与 QML/Qt Quick的区别,什么时候使用哪种?

    (Qt4版本是qt gui Application , Qt5之后, gui界面用widgets可以做, 用qml也可以做, 就分开了。故widgets Application 选项 就是qt GUI Application) 一.Qt Widgets适合传统的桌面程序开发 二.Qt Quick 是 Qt 4.7 主推的技术&#xff0c; Qt 官网介绍&#xff1a;Qt Quick 是…...

    2023/8/14 15:17:05

最新文章

  1. 电路板级的电磁兼容性EMC

    从PCB布线&#xff0c;电路设计&#xff0c;元器件3方面来分析EMC。...

    2023/8/14 15:17:05
  2. 通信协议- IIC和SPI

    IIC&#xff08;intel integrated circuit&#xff09;和SPI&#xff08;serial peripheral interface&#xff09;是一种低速短距离通信总线。 SPI没有明文规定。 IIC可多主总线&#xff0c;SPI是单主总线。 传输速度&#xff1a; SPI有多快传多快。 IIC&#xff1a;标准模式…...

    2023/8/14 11:01:22
  3. 单片机的概述

    单片机类别: 单片机也有其他说法&#xff0c;微控制器&#xff0c;微处理器(dsp) 按照单片机的内核(ip核)分类:51系列&#xff0c;AVR系列&#xff0c;ARM系列(ARMv1~ARMv8架构&#xff0c;ARM11后用cortex命名&#xff0c;cortex系列是armv7架构&#xff0c;A:虚拟内存 操作系…...

    2023/8/14 15:17:04
  4. 电源的恒压与恒流原理

    电源的恒压与恒流原理 一、恒压与恒流的概念 恒压指的是电源以恒定电压输出&#xff0c;负载大小的变化不会改变输出电压&#xff0c;但是输出电流可能会变化。 恒流与恒压类似。 二、应用场合 恒流技术一般用于驱动LED&#xff0c;驱动比例阀等对电流有要求对象。 恒压技术一…...

    2023/8/14 14:27:59
  5. vs2005 MFC界面自绘图形BMP按钮时,设置按钮的位置问题

    步骤1&#xff1a;按钮button的属性Owner Draw设置为True&#xff1b; 步骤2&#xff1a;在BOOL CChargeDlg::OnInitDialog()函数中调用SetWindowPos(HWND hWnd,HWND hWndInsertAfter,int X,int Y,int cx,_In_ int cy, UINTuFlags)设置按钮的位置&#xff0c;如下 CWnd *pWnd;…...

    2023/8/14 10:16:38
  6. Qt Widgets 与 QML/Qt Quick的区别,什么时候使用哪种?

    (Qt4版本是qt gui Application , Qt5之后, gui界面用widgets可以做, 用qml也可以做, 就分开了。故widgets Application 选项 就是qt GUI Application) 一.Qt Widgets适合传统的桌面程序开发 二.Qt Quick 是 Qt 4.7 主推的技术&#xff0c; Qt 官网介绍&#xff1a;Qt Quick 是…...

    2023/8/14 15:17:05
  7. 国内可使用chatGPT的十三种方式

    国内AI 1. 开放猫 Chat机器人https://mirrorchat.extkj.cn/ chat机器人&#xff1a; Chat机器人https://mirrorchat.extkj.cn/ 3.免费学习测试 免费学习测试https://chat.wuguokai.cn/#/chat/1683348236237 4.AI文本工具站 AI文本工具站一个用于提高工作效率的文本工具网站,应用…...

    2023/8/14 13:04:36
  8. 基于ChatGPT3.5 API实现的私有化web程序源码+使用说明,一键部署属于自己定制化的 chatgpt web 程序

    chatgpt-web 本项目可以一键部署属于自己定制化的 chatgpt web 程序(兼容gpt3.5)&#xff0c; 只需下载release中对应平台的项目文件&#xff0c;修改配置后执行&#xff0c;打开 http://127.0.0.1:8080 &#xff0c;便可以获得属于自己的chatgpt网站。 参考项目&#xff1a;co…...

    2023/8/14 19:59:25
  9. ChatGPT Plus用户专享:86款高效功能插件,详尽安装与使用全攻略

    在前天的文章中&#xff0c;我们介绍了 ChatGPT 开放的全新模式 Web Browsing&#xff08;网页浏览&#xff09;&#xff0c;启用后 ChatGPT 就可以开始上网&#xff0c;收集最新的互联网资料进行作答。 其他关于chatgpt使用方面&#xff1a;请访问&#xff1a; 链接&#xf…...

    2023/8/14 10:16:53
  10. ChatGPT自然语言处理的新里程碑

    ChatGPT中文网是一个面向中国用户的聊天机器人网站&#xff0c;旨在为国内用户提供一个自然的环境、有趣、实用的聊天体验。它使用最新的自然语言处理技术来帮助用户更好地理解他们的聊天对话&#xff0c;还可以帮助用户解决日常生活中的问题&#xff0c;提供有趣的谈话内容以及…...

    2023/8/15 8:22:45
  11. 国内版ChatGPT最全使用方法及使用用途技巧汇总

    ChatGPT人工智能技术的出现确实会让一些人担心自己的工作会不会被取代。但实际上&#xff0c;人工智能技术只会替代那些可以被程序自动化的重复性、标准化、无脑力的工作&#xff0c;而对于需要人类创意、想象力和复杂思维的工作来说&#xff0c;AI人工智能技术的发展对于人类来…...

    2023/8/14 10:55:47
  12. ChatGPT和Midjourney王炸组合,开启AI新时代

    目录 序言 一&#xff1a;使用ChatGPT进行对话 二&#xff1a;调用newbies robot 三&#xff1a;举例说明 四&#xff1a;付费和使用限制 序言 随着人工智能技术的不断发展&#xff0c;越来越多的人开始使用人工智能工具来创作图画。在这里&#xff0c;我将分享如何结合Ch…...

    2023/8/15 10:03:43