`
leonardleonard
  • 浏览: 801448 次
社区版块
存档分类
最新评论

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

WebFormASPUIWebJavaScript 
阅读更多
 

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

  }
} 

其实这两个文件没有什么难点，除了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" %>
<!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也是相当的简单。其中只有一个绑定到SqlDataReader的DataGrid。SqlDataReader通过Query string参数获得产品的数据。
分享到：
| 使用c#+(datagrid控件)编辑xml文件
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    添加Excel超链接返回主界面按钮.docx

    本教程将详细介绍如何在Excel中添加超链接，并创建一个返回主界面的按钮，以便于快速导航。 首先，我们需要理解什么是超链接。超链接在Excel中是一种特殊的单元格格式，它允许用户通过单击单元格内容直接跳转到其他...

    Ext GridPanel 中实现加链接操作

    接下来，我们需要实现 `opLink` 函数，该函数将根据传入的 ID 执行相应的操作（例如打开一个新的窗口或弹出框）。 ```javascript function opLink(id) { // 获取对应的记录 var record = store.getById(id); ...

    饼图超级链接

    - 添加动作：在“分析”菜单中选择“动作”，然后创建一个新的“跳转”动作，指定目标工作表或仪表板，并关联饼图的各个部分。 饼图超级链接的应用场景广泛，例如： - 产品销售分析：饼图显示各产品销售额占比，...

    asp.net DataGrid控件中弹出详细信息窗口

    在DataGrid控件中添加超链接如下步骤： (1) 在”设计”视图中，选择DataGrid控件，然后单击”属性”窗口底部的”属性生成器”链接。 (2) 在”DataGrid属性”对话框中单击”列”选项卡。 (3) 在”可用列”选项框中，...

    申请单管理系统

    如果申请单已审批，则弹出的页面只能够查看申请单的详细信息而不能再次进行审批。 审批申请单 1点击审批管理列表中管理列中的“审批”按钮，弹出审批申请单页面对话框页面。 2．页面加载后显示出申请单的详细信息，...

    VB自定义的气泡提示框_气泡提示框_

    气泡提示框通常是一个小型的弹出窗口，它在鼠标悬停在特定对象上时出现，显示与该对象相关的简短信息。在VB中，我们可以利用控件和自定义代码来创建这类提示框，以提供更美观、功能丰富的用户体验。 2. **自定义...

    asp.net GridView中超链接的使用（带参数）

    在***中使用GridView控件时，经常需要对其中的行进行操作，比如跳转到另一个页面并传递参数。本文详细介绍了在GridView中实现带参数超链接的三种常用方法。 首先，我们可以使用HTML的标签来创建超链接。在***的...

    c# DataGridView显示指定链接图片,visual studio2013，DEMO，完整源码

    你可以使用一个字典来存储图片链接和对应的Image对象。 8. **测试和调试**： - 编译并运行程序，确保图片能够正确显示并响应点击事件。可能需要调整图片列的宽度以适应图片大小。 这个示例项目提供的DEMO应该包含...

    Excel中为多个工作表快速创建目录【会计实务操作教程】.pptx

    在弹出的“新建名称”窗口中，输入名称“List”，在引用位置中输入公式`=INDEX(GET.WORKBOOK(1), $A1)&T(NOW())`。这里的GET.WORKBOOK(1)函数用于获取当前工作簿中所有工作表的名称，INDEX函数则根据A1单元格中的...

    Excel中为多个工作表快速创建目录【推荐文章】.doc

    在弹出的“新建名称”窗口中，将名称设为“List”，在引用位置中输入`=INDEX(GET.WORKBOOK(1), $A1)&T(NOW())`。`GET.WORKBOOK(1)`是一个宏表函数，用于获取工作簿中所有工作表的名称，`INDEX`函数根据 `$A1` 中的...

    关于C#的几个有用的代码

    这种做法常用于导航或弹出窗口功能，需要注意的是，参数传递应确保安全性，避免跨站脚本（XSS）攻击。 2. **按钮点击确认对话框** 通过向按钮的`Attributes`集合添加`onclick`事件，可以在用户点击按钮前弹出一个...

    《程序天下：JavaScript实例自学手册》光盘源码

    12.12 创建弹出窗口 12.13 不允许窗口出现滚动条 12.14 页面打开的同时打开另外两个窗口 12.15 慢慢变大的窗口 12.16 设置新打开的窗口为活动窗口 12.17 页面随窗口的改变而改变 12.18 幻灯片式弹出窗口 12.19 弹出...

    程序天下:JavaScript实例自学手册

    12.12 创建弹出窗口 12.13 不允许窗口出现滚动条 12.14 页面打开的同时打开另外两个窗口 12.15 慢慢变大的窗口 12.16 设置新打开的窗口为活动窗口 12.17 页面随窗口的改变而改变 12.18 幻灯片式弹出窗口 12.19 弹出...

    动态网站制作入门ASP+ACCESS+DreamweaverCS3

    **步骤2:** 数据库创建完成后，会弹出数据库创建界面。点击“使用设计器创建表”。 **步骤3:** 创建一个学生信息表，包含字段：`id`, `name`, `tel`, `title`, `pass`。保存该表，并命名为“data”。 #### 三、...

    easyui中文帮助文档

    `easyui-window` 是用于创建弹出窗口的组件，可以用来展示信息、对话或进行操作。窗口具备可调整大小、拖动、关闭、最小化和最大化等特性，支持设置标题、图标、宽度、高度以及是否自动显示等内容。 2. **easyui-...

    GridView的19种操作(删除,编辑,添加等)

    14. **弹出新页面/弹出新窗口**：通过链接按钮或超链接列，可以实现点击某行后在新窗口打开详细信息页面。 15. **固定表头**：使用CSS定位技术，使表头在表格滚动时始终保持可见。 16. **合并表头多重表头无错完美...

    ASP.NET中33种常用代码

    单击通常用于查看详细信息，双击可能用于编辑或进一步操作。 6. **表格超链接列传递参数**： 使用`HyperLinkColumn`控件，可以在表格中创建链接列，同时将数据绑定到链接的URL，以便在点击链接时传递参数到目标...

    frontpage网页制作

    至于动态效果，FrontPage提供了预设的动画和行为，如闪烁文字、滚动条、弹出窗口等，这些都可以通过"插入"菜单的"动态效果"或"行为"选项来添加，使网页更具吸引力。 最后，我们来看**超级链接的设置**。超链接是...

Magicbox
Global site tag (gtag.js) - Google Analytics