如何创建一个用弹出窗口来查看详细信息的超链接列
发布日期:2021-06-30 19:18:27 浏览次数:2 分类:技术文章

本文共 5100 字,大约阅读时间需要 17 分钟。

 

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

出处:

      这篇文章来自于一位忠实的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 

< 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参数获得产品的数据。

转载地址:https://linuxstyle.blog.csdn.net/article/details/226276 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:DataSet导出CSV格式(ASP.NET,C#)
下一篇:使用c#+(datagrid控件)编辑xml文件

发表评论

最新留言

网站不错 人气很旺了 加油
[***.192.178.218]2024年05月01日 20时08分46秒