利用GridView显示主细表并添加打开、关闭功能

本文例子使用嵌套的 GridView 来显示主细表，并使用 JavaScript 来控制明细表的显示与隐藏。值得注意的是：在 GridView 的 RowDataBound 的事件里，不要多次执行数据库的打开，否则，将很快会导致连接数已满的问题。

例子中的数据库，请参照《 ASP.NET 2.0应用开发技术》一书中附带的光盘中的数据库。

查看例子

代码:

<% @ Page Language = " C# "  AutoEventWireup = " true "  CodeFile = " GridViewNested.aspx.cs "  Inherits = " Exam_GridViewNested "   %>

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head  runat ="server" >
   < title > 利用GridView显示主细表并添加打开、关闭功能 </ title >
   < style  type ="text/css" >
  td,div,a  { font-size : 12px }
   </ style >

   < script  type ="text/javascript" >
   // <![CDATA[
   function  ShowHidden(sid,ev)
  {
    ev  =  ev  ||  window.event;
     var  target  =  ev.target  ||  ev.srcElement;
     var  oDiv  =  document.getElementById( " div "   +  sid);
    oDiv.style.display  =  oDiv.style.display  ==   " none " ? " block " : " none " ;
    target.innerHTML  =  oDiv.style.display  ==   " none " ? " 显示 " : " 隐藏 " ;
  }
   // ]]>
   </ script >

</ head >
< body >
   < form  id ="form1"  runat ="server" >
     < asp:GridView  ID ="MasterGridView"  runat ="server"  AutoGenerateColumns ="false"  Width ="760px"
      BorderWidth ="1"  OnRowDataBound ="MasterGridView_RowDataBound"  DataKeyNames ="id"
      ShowHeader ="false" >
       < Columns >
         < asp:TemplateField >
           < ItemTemplate >
             < div  style ="width: 100%; padding: 2px; font-weight: bold; background-color: #DEDEDE;
              float: left" >
               < span  style ="float: left" > 栏目名称： <% # Eval ( " Title " )  %> </ span >< span  style ="float: right;
                color: Red; cursor: pointer"  onclick ="ShowHidden('<%#Eval(" id") % > ',event)">隐藏 </ span ></ div >
             < div  style ="background-color: #FFF; padding-left: 60px;clear:both"  id ="div<%#Eval(" id") % > ">
               < asp:GridView  ID ="DetailGridView"  runat ="server"  AutoGenerateColumns ="false"  ShowHeader ="true"
                Width ="100%"  HorizontalAlign ="left" >
                 < HeaderStyle  BackColor ="#9999FF"   />
                 < Columns >
                   < asp:TemplateField  HeaderText ="文章名称" >
                     < ItemTemplate >
                       < a  href ="/article/<%#Eval(" objectGuid") % > /read.aspx">
                         <% # Eval ( " Title " )  %>
                       </ a > [ <% #  Eval ( " HitCount " )  %> ]
                     </ ItemTemplate >
                   </ asp:TemplateField >
                   < asp:BoundField  HeaderText ="发布日期"  DataField ="CreateDate"  HtmlEncode ="false"  DataFormatString ="{0:yyyy年MM月dd日}"
                    ItemStyle-Width ="100px"  ItemStyle-HorizontalAlign ="Center"   />
                 </ Columns >
               </ asp:GridView >
             </ div >
           </ ItemTemplate >
         </ asp:TemplateField >
       </ Columns >
     </ asp:GridView >
   </ form >
</ body >
</ html >

C#：

using  System;
using  System.Data;
using  System.Data.OleDb;
using  System.Configuration;
using  System.Collections;
using  System.Web;
using  System.Web.Security;
using  System.Web.UI;
using  System.Web.UI.WebControls;
using  System.Web.UI.HtmlControls;

public   partial   class  Exam_GridViewNested : System.Web.UI.Page
{
   string  ConnectionString  =   @" Provider=Microsoft.Jet.OLEDB.4.0;Data Source=|DataDirectory|aspxWeb.mdb;Persist Security Info=True " ;
  OleDbConnection cn1;


   protected   void  Page_Load( object  sender, EventArgs e)
  {
     if  ( ! Page.IsPostBack)
    {
      OleDbConnection cn  =   new  OleDbConnection(ConnectionString);
      cn.Open();
      cn1  =   new  OleDbConnection(ConnectionString);
      cn1.Open();
      OleDbCommand cmd  =   new  OleDbCommand( " select * from [Subject] " , cn);
      OleDbDataReader dr  =  cmd.ExecuteReader(CommandBehavior.CloseConnection);
      MasterGridView.DataSource  =  dr;
      MasterGridView.DataBind();
      dr.Close();
      cmd.Dispose();
      cn.Dispose();
      cn1.Dispose();
      cn  =  cn1  =   null ;
    }
  }
   protected   void  MasterGridView_RowDataBound( object  sender, GridViewRowEventArgs e)
  {
     if  (e.Row.RowType  ==  DataControlRowType.DataRow)
    { 
     
     GridView oGridView  =  (GridView)e.Row.FindControl( " DetailGridView " );
      if  (oGridView  !=   null )
     {
       OleDbCommand cmd  =   new  OleDbCommand( " select top 10 * from Document Where pid =  "   +  MasterGridView.DataKeys[e.Row.RowIndex].Value, cn1);
       OleDbDataReader dr1  =  cmd.ExecuteReader();
       oGridView.DataSource  =  dr1;
       oGridView.DataBind();
       dr1.Close();
       cmd.Dispose();
     }
    }
  }
}

VB.NET：

Private  ConnectionString  As   String   =   " Provider=Microsoft.Jet.OLEDB.4.0;Data Source=|DataDirectory|aspxWeb.mdb;Persist Security Info=True "  
Private  cn1  As  OleDbConnection 

Protected   Sub  Page_Load( ByVal  sender  As   Object ,  ByVal  e  As  EventArgs) 
  If   Not  Page.IsPostBack  Then  
    Dim  cn  As  OleDbConnection  =   New  OleDbConnection(ConnectionString) 
   cn.Open 
   cn1  =   New  OleDbConnection(ConnectionString) 
   cn1.Open 
    Dim  cmd  As  OleDbCommand  =   New  OleDbCommand( " select * from [Subject] " , cn) 
    Dim  dr  As  OleDbDataReader  =  cmd.ExecuteReader(CommandBehavior.CloseConnection) 
   MasterGridView.DataSource  =  dr 
   MasterGridView.DataBind 
   dr.Close 
   cmd.Dispose 
   cn.Dispose 
   cn1.Dispose 
   cn  =  cn1  =   Nothing  
  End   If  
End Sub  

Protected   Sub  MasterGridView_RowDataBound( ByVal  sender  As   Object ,  ByVal  e  As  GridViewRowEventArgs) 
  If  e.Row.RowType  =  DataControlRowType.DataRow  Then  
    Dim  oGridView  As  GridView  =   CType (e.Row.FindControl( " DetailGridView " ), GridView) 
    If   Not  (oGridView  Is   Nothing )  Then  
      Dim  cmd  As  OleDbCommand  =   New  OleDbCommand( " select top 10 * from Document Where pid =  "   +  MasterGridView.DataKeys(e.Row.RowIndex).Value, cn1) 
      Dim  dr1  As  OleDbDataReader  =  cmd.ExecuteReader 
     oGridView.DataSource  =  dr1 
     oGridView.DataBind 
     dr1.Close 
     cmd.Dispose 
    End   If  
  End   If  
End Sub