How to show the Detailed Value for the associated Hovered Row of the GridView by using the HoverMenu...

In one scenario, there are two GridViews with the Main Data and Detailed Data. The Customer would like to show the Detailed Value for the associated Hovered Row by using the HoverMenuExtender.

To achieve this goal, we need to access the Hovered Row’s information and then sent them to the PopupMenu. But the HoverMenu is only a client side control which cannot fire any service event to access the value. So, I need to handle the GridView Row’s onmouseover event to get the hovered information and then call the web service method to build a new DataTable with the hovered key. Then, in the success call back function, fill a PopupMenu with the returned value.

Please follow these steps:

1.Build a new application which contains a GridView. Bind the GridView with a SqlDataSource whose DataFields are ID, User, Category.

 

代码

< asp:GridView  ID ="GridView1"  runat ="server"  AutoGenerateColumns ="False"  DataKeyNames ="ID"   
    DataSourceID ="SqlDataSource1"  BackColor ="Azure"  Width ="500px" >   
     < Columns >   
         < asp:TemplateField >   
             < ItemTemplate >   
                 < asp:Panel  ID ="Panel1"  runat ="server"  onmouseover ="mouseOverHandler(this);" >   
                     < table  width ="100%" >   
                         < tr >   
                             < td  width ="25%" >   
                                 < asp:Label  Font-Bold ="true"  ID ="Label1"  runat ="server"  Text ='<%#  HttpUtility.HtmlEncode(Convert.ToString(Eval("ID"))) % > ' />  
                             </ td >   
                             < td  width ="50%" >   
                                 < asp:Label  ID ="Label2"  runat ="server"  Text ='<%#  HttpUtility.HtmlEncode(Convert.ToString(Eval("USER"))) % > ' />  
                             </ td >   
                             < td  width ="25%" >   
                                 < asp:Label  ID ="Label3"  runat ="server"  Text ='<%#  Eval("CATEGORY") % > ' />  
                             </ td >   
                         </ tr >   
                     </ table >   
                 </ asp:Panel >   
             </ ItemTemplate >   
         </ asp:TemplateField >   
     </ Columns >   
</ asp:GridView >   
< asp:SqlDataSource  ID ="SqlDataSource1"  runat ="server"  ConnectionString ="<%$ ConnectionStrings:MasterAndDetailConnectionString %>"   
    ProviderName ="<%$ ConnectionStrings:MasterAndDetailConnectionString.ProviderName %>"   
    SelectCommand ="SELECT [ID], [USER], [CATEGORY] FROM [MASTER]" ></ asp:SqlDataSource >   

         < asp:GridView  ID ="GridView1"  runat ="server"  AutoGenerateColumns ="False"  DataKeyNames ="ID"
            DataSourceID ="SqlDataSource1"  BackColor ="Azure"  Width ="500px" >
             < Columns >
                 < asp:TemplateField >
                     < ItemTemplate >
                         < asp:Panel  ID ="Panel1"  runat ="server"  onmouseover ="mouseOverHandler(this);" >
                             < table  width ="100%" >
                                 < tr >
                                     < td  width ="25%" >
                                         < asp:Label  Font-Bold ="true"  ID ="Label1"  runat ="server"  Text ='<%#  HttpUtility.HtmlEncode(Convert.ToString(Eval("ID"))) % > ' />
                                     </ td >
                                     < td  width ="50%" >
                                         < asp:Label  ID ="Label2"  runat ="server"  Text ='<%#  HttpUtility.HtmlEncode(Convert.ToString(Eval("USER"))) % > ' />
                                     </ td >
                                     < td  width ="25%" >
                                         < asp:Label  ID ="Label3"  runat ="server"  Text ='<%#  Eval("CATEGORY") % > ' />
                                     </ td >
                                 </ tr >
                             </ table >
                         </ asp:Panel >
                     </ ItemTemplate >
                 </ asp:TemplateField >
             </ Columns >
         </ asp:GridView >
         < asp:SqlDataSource  ID ="SqlDataSource1"  runat ="server"  ConnectionString ="<%$ ConnectionStrings:MasterAndDetailConnectionString %>"
            ProviderName ="<%$ ConnectionStrings:MasterAndDetailConnectionString.ProviderName %>"
            SelectCommand ="SELECT [ID], [USER], [CATEGORY] FROM [MASTER]" ></ asp:SqlDataSource >

 

 

2.In the GridView’s ItemTemplate, add a Panel as the target panel. In this Panel, bind three labels with the DataFields

3.Add a DataSet into this application. In the DataSet, add a DataAdapter which has a method “GetDataByHoverKey” that returns a DataTable with the “Category” parameter. The SQL statement is like this:
SELECT CATEGORY, DETAIL, ID FROM DETAIL WHERE (CATEGORY = ?)

4.Add a WebService into this application. Define a WebMethod with the HoverKey parameter and set the returned type as string. In this method, we return a HTML table with the generated DataTable’s Value.

 

代码

Imports  System.Web.Services   
Imports  System.Web.Services.Protocols   
Imports  System.ComponentModel   
  
'  To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.   
< System.Web.Script.Services.ScriptService() >  _   
< System.Web.Services.WebService( Namespace : = " http://tempuri.org/ " ) >  _   
< System.Web.Services.WebServiceBinding(ConformsTo: = WsiProfiles.BasicProfile1_1) >  _   
< ToolboxItem( False ) >  _   
Public   Class  HoverMenuService   
     Inherits  System.Web.Services.WebService   
  
     < WebMethod() >  _   
     Public   Function  GetDataByHoverKey( ByVal  sHoverKey  As   String )  As   String   
  
         Dim  dt  As   New  DataSet1.DETAILDataTable   
         Dim  da  As   New  DataSet1TableAdapters.DETAILTableAdapter   
  
        dt  =  da.GetDataByHoverKey(sHoverKey)   
         Dim  sb  As   New  StringBuilder   
        sb.Append( " <table width='100%'> " )   
         For   Each  dr  As  DataRow  In  dt.Rows   
            sb.Append( " <tr> " )   
            sb.Append( " <td width='50%'> " )   
            sb.Append( " <span style='font-weight:bold;'> "   +  dr.Item( 0 ).ToString()  +   " </span> " )   
            sb.Append( " </td> " )   
            sb.Append( " <td width='50%'> " )   
            sb.Append( " <span style='font-weight:bold;'> "   +  dr.Item( 1 ).ToString()  +   " </span> " )   
            sb.Append( " </td> " )   
            sb.Append( " </tr> " )   
         Next   
        sb.Append( " </table> " )   
  
         Return  sb.ToString   
     End Function   
End Class   

Imports  System.Web.Services
Imports  System.Web.Services.Protocols
Imports  System.ComponentModel

'  To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
< System.Web.Script.Services.ScriptService() >  _
< System.Web.Services.WebService( Namespace : = " http://tempuri.org/ " ) >  _
< System.Web.Services.WebServiceBinding(ConformsTo: = WsiProfiles.BasicProfile1_1) >  _
< ToolboxItem( False ) >  _
Public   Class  HoverMenuService
     Inherits  System.Web.Services.WebService

     < WebMethod() >  _
     Public   Function  GetDataByHoverKey( ByVal  sHoverKey  As   String )  As   String

         Dim  dt  As   New  DataSet1.DETAILDataTable
         Dim  da  As   New  DataSet1TableAdapters.DETAILTableAdapter

        dt  =  da.GetDataByHoverKey(sHoverKey)
         Dim  sb  As   New  StringBuilder
        sb.Append( " <table width='100%'> " )
         For   Each  dr  As  DataRow  In  dt.Rows
            sb.Append( " <tr> " )
            sb.Append( " <td width='50%'> " )
            sb.Append( " <span style='font-weight:bold;'> "   +  dr.Item( 0 ).ToString()  +   " </span> " )
            sb.Append( " </td> " )
            sb.Append( " <td width='50%'> " )
            sb.Append( " <span style='font-weight:bold;'> "   +  dr.Item( 1 ).ToString()  +   " </span> " )
            sb.Append( " </td> " )
            sb.Append( " </tr> " )
         Next
        sb.Append( " </table> " )

         Return  sb.ToString
     End Function
End Class

 

 

5.Add a onmouseover event handler for the target Panel. In this handler function, we build a DIV element as the PopupMenu. Set the DIV’s id by the target’s ID. Call the WebServie method with the parameter HoverKey and TargetPanel’s ID. Create a HoverMenuBehavior by the Target Panel and PopupMenu.

 

代码

function  mouseOverHandler(e) {   
     if  ($find( " HoverMenuExtender_ "   +  e.id)) {   
         return ;   
    }   
     var  lableID  =  e.id.replace( " Panel1 " ,  " Label3 " );   
     var  hoverKey  =  $get(lableID).innerHTML;   
  
     // create a popup   
     var  popup  =  document.createElement( " div " );   
    popup.id  =  e.id  +   " _popup " ;   
    popup.className  =   " popupMenu " ;   
    document.body.appendChild(popup);   
    SoluTes_tHoverMenu.HoverMenuService.GetDataByHoverKey(hoverKey, SucceededCallbackWithContext, FailedCallback, e.id);   
  
    $create(AjaxControlToolkit.HoverMenuBehavior,   
    {  " HoverCssClass " :  " popupHover " ,   
         " PopDelay " :  25 ,   
         " PopupPosition " :  4 ,   
         " id " :  " HoverMenuExtender_ "   +  e.id,   
         " popupElement " : popup   
    },  null ,  null , e);   
}

 

6.In the success call back function, fill the corresponding PopupMenu with the returned value.

代码

//  This is the callback function invoked if the Web service   
//  succeeded.   
//  It accepts the result object as a parameter.   
function  SucceededCallbackWithContext(result, userContext, methodName) {   
     //  get the corresponding span to display feedback by using the context.   
     var  popupValue  =  $get(userContext  +   " _popup " )   
    popupValue.innerHTML  =  result;   
}   
  
//  This is the callback function invoked if the Web service   
//  failed.   
//  It accepts the error object as a parameter.   
function  FailedCallback(error) {   
     //  Display the error.       
    alert( " Service Error:  "   +  error.get_message());   
} 

 

7.Complete the CssClass and other script references.

代码

< style  type ="text/css" >   
     /* Hover Menu */ .popupMenu   
     {    
        width :  300px ;    
        position :  absolute ;    
        visibility :  hidden ;    
        background-color :  #F5F7F8 ;    
        opacity :  .9 ;    
        filter :  alpha(opacity=90) ;    
     }    
    .popupHover   
     {    
        background-image :  url(images/header-opened.png) ;    
        background-repeat :  repeat-x ;    
        background-position :  left top ;    
        background-color :  #F5F7F8 ;    
     }    
</ style >   
  
     < asp:ScriptManager  ID ="ScriptManager1"  runat ="server" >   
         < Services >   
             < asp:ServiceReference  Path ="~/HoverMenuService.asmx"   />   
         </ Services >   
         < Scripts >   
             < asp:ScriptReference Name = " AjaxControlToolkit.Common.Common.js "  Assembly = " AjaxControlToolkit "   / >  
             < asp:ScriptReference Name = " AjaxControlToolkit.ExtenderBase.BaseScripts.js "  Assembly = " AjaxControlToolkit "   / >  
             < asp:ScriptReference Name = " AjaxControlToolkit.HoverExtender.HoverBehavior.js "  Assembly = " AjaxControlToolkit "   / >  
             < asp:ScriptReference Name = " AjaxControlToolkit.HoverMenu.HoverMenuBehavior.js "  Assembly = " AjaxControlToolkit "   / >  
             < asp:ScriptReference Name = " AjaxControlToolkit.PopupExtender.PopupBehavior.js "  Assembly = " AjaxControlToolkit "   / >  
         </ Scripts >   
     </ asp:ScriptManager >  

 

 

Here is the whole code.

.aspx file

 

代码

<% @ Page Language = " vb "  AutoEventWireup = " false "  CodeBehind = " TestHoverMenuWithDetailedData.aspx.vb "   
    Inherits = " SoluTes_tHoverMenu.TestHoverMenuWithDetailedData "   %>   
  
<% @ Register Assembly = " AjaxControlToolkit "  Namespace = " AjaxControlToolkit "  TagPrefix = " cc1 "   %>   
<! 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 ></ title >   
     < style  type ="text/css" >   
         /* Hover Menu */ .popupMenu   
         {    
            width :  300px ;    
            position :  absolute ;    
            visibility :  hidden ;    
            background-color :  #F5F7F8 ;    
            opacity :  .9 ;    
            filter :  alpha(opacity=90) ;    
         }    
        .popupHover   
         {    
            background-image :  url(images/header-opened.png) ;    
            background-repeat :  repeat-x ;    
            background-position :  left top ;    
            background-color :  #F5F7F8 ;    
         }    
     </ style >   
</ head >   
< body >   
     < form  id ="form1"  runat ="server" >   
     < div >   
         < asp:ScriptManager  ID ="ScriptManager1"  runat ="server" >   
             < Services >   
                 < asp:ServiceReference  Path ="~/HoverMenuService.asmx"   />   
             </ Services >   
             < Scripts >   
                 < asp:ScriptReference Name = " AjaxControlToolkit.Common.Common.js "  Assembly = " AjaxControlToolkit "   / >  
                 < asp:ScriptReference Name = " AjaxControlToolkit.ExtenderBase.BaseScripts.js "  Assembly = " AjaxControlToolkit "   / >  
                 < asp:ScriptReference Name = " AjaxControlToolkit.HoverExtender.HoverBehavior.js "  Assembly = " AjaxControlToolkit "   / >  
                 < asp:ScriptReference Name = " AjaxControlToolkit.HoverMenu.HoverMenuBehavior.js "  Assembly = " AjaxControlToolkit "   / >  
                 < asp:ScriptReference Name = " AjaxControlToolkit.PopupExtender.PopupBehavior.js "  Assembly = " AjaxControlToolkit "   / >  
             </ Scripts >   
         </ asp:ScriptManager >   
         < asp:GridView  ID ="GridView1"  runat ="server"  AutoGenerateColumns ="False"  DataKeyNames ="ID"   
            DataSourceID ="SqlDataSource1"  BackColor ="Azure"  Width ="500px" >   
             < Columns >   
                 < asp:TemplateField >   
                     < ItemTemplate >   
                         < asp:Panel  ID ="Panel1"  runat ="server"  onmouseover ="mouseOverHandler(this);" >   
                             < table  width ="100%" >   
                                 < tr >   
                                     < td  width ="25%" >   
                                         < asp:Label  Font-Bold ="true"  ID ="Label1"  runat ="server"  Text ='<%#  HttpUtility.HtmlEncode(Convert.ToString(Eval("ID"))) % > ' />  
                                     </ td >   
                                     < td  width ="50%" >   
                                         < asp:Label  ID ="Label2"  runat ="server"  Text ='<%#  HttpUtility.HtmlEncode(Convert.ToString(Eval("USER"))) % > ' />  
                                     </ td >   
                                     < td  width ="25%" >   
                                         < asp:Label  ID ="Label3"  runat ="server"  Text ='<%#  Eval("CATEGORY") % > ' />  
                                     </ td >   
                                 </ tr >   
                             </ table >   
                         </ asp:Panel >   
                     </ ItemTemplate >   
                 </ asp:TemplateField >   
             </ Columns >   
         </ asp:GridView >   
         < asp:SqlDataSource  ID ="SqlDataSource1"  runat ="server"  ConnectionString ="<%$ ConnectionStrings:MasterAndDetailConnectionString %>"   
            ProviderName ="<%$ ConnectionStrings:MasterAndDetailConnectionString.ProviderName %>"   
            SelectCommand ="SELECT [ID], [USER], [CATEGORY] FROM [MASTER]" ></ asp:SqlDataSource >   
  
         < script  type ="text/javascript" >   
  
             function  pageLoad() {   
            }   
  
             function  mouseOverHandler(e) {   
                 if  ($find( " HoverMenuExtender_ "   +  e.id)) {   
                     return ;   
                }   
                 var  lableID  =  e.id.replace( " Panel1 " ,  " Label3 " );   
                 var  hoverKey  =  $get(lableID).innerHTML;   
  
                 // create a popup   
                 var  popup  =  document.createElement( " div " );   
                popup.id  =  e.id  +   " _popup " ;   
                popup.className  =   " popupMenu " ;   
                document.body.appendChild(popup);   
                SoluTes_tHoverMenu.HoverMenuService.GetDataByHoverKey(hoverKey, SucceededCallbackWithContext, FailedCallback, e.id);   
  
                $create(AjaxControlToolkit.HoverMenuBehavior,   
                {  " HoverCssClass " :  " popupHover " ,   
                     " PopDelay " :  25 ,   
                     " PopupPosition " :  4 ,   
                     " id " :  " HoverMenuExtender_ "   +  e.id,   
                     " popupElement " : popup   
                },  null ,  null , e);   
            }   
  
             //  This is the callback function invoked if the Web service   
             //  succeeded.   
             //  It accepts the result object as a parameter.   
             function  SucceededCallbackWithContext(result, userContext, methodName) {   
                 //  get the corresponding span to display feedback by using the context.   
                 var  popupValue  =  $get(userContext  +   " _popup " )   
                popupValue.innerHTML  =  result;   
            }   
  
             //  This is the callback function invoked if the Web service   
             //  failed.   
             //  It accepts the error object as a parameter.   
             function  FailedCallback(error) {   
                 //  Display the error.       
                alert( " Service Error:  "   +  error.get_message());   
            }   
       
         </ script >   
  
     </ div >   
     </ form >   
</ body >   
</ html >

 

 

 

.asmx file

代码

Imports  System.Web.Services   
Imports  System.Web.Services.Protocols   
Imports  System.ComponentModel   
  
'  To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.   
< System.Web.Script.Services.ScriptService() >  _   
< System.Web.Services.WebService( Namespace : = " http://tempuri.org/ " ) >  _   
< System.Web.Services.WebServiceBinding(ConformsTo: = WsiProfiles.BasicProfile1_1) >  _   
< ToolboxItem( False ) >  _   
Public   Class  HoverMenuService   
     Inherits  System.Web.Services.WebService   
  
     < WebMethod() >  _   
     Public   Function  GetDataByHoverKey( ByVal  sHoverKey  As   String )  As   String   
  
         Dim  dt  As   New  DataSet1.DETAILDataTable   
         Dim  da  As   New  DataSet1TableAdapters.DETAILTableAdapter   
  
        dt  =  da.GetDataByHoverKey(sHoverKey)   
         Dim  sb  As   New  StringBuilder   
        sb.Append( " <table width='100%'> " )   
         For   Each  dr  As  DataRow  In  dt.Rows   
            sb.Append( " <tr> " )   
            sb.Append( " <td width='50%'> " )   
            sb.Append( " <span style='font-weight:bold;'> "   +  dr.Item( 0 ).ToString()  +   " </span> " )   
            sb.Append( " </td> " )   
            sb.Append( " <td width='50%'> " )   
            sb.Append( " <span style='font-weight:bold;'> "   +  dr.Item( 1 ).ToString()  +   " </span> " )   
            sb.Append( " </td> " )   
            sb.Append( " </tr> " )   
         Next   
        sb.Append( " </table> " )   
  
         Return  sb.ToString   
     End Function   
End Class  

 

 

Have my suggestion helped?

The related thread URL:http://forums.asp.net/p/1504607/3572417.aspx#3572417

Best regards,

Zhi-Qiang Ni

转载于:https://www.cnblogs.com/Zhi-QiangNi/archive/2009/12/18/1627361.html