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
