AJAXHoverMenuExtender with ASP.NET

Today i am going to discuss, how to use AJAXHoverMenuExtender with ASP.NET. There are javascript available for onmouseover function which shows some text or something like menus. Today I am going to implement the same on serverside by using ajax functionality. There are number of tools available with ajax for our requirement I am going to use AjaxHoverMenuExtender - it show the menus or some text onmouseover of control or image or text.

First Create AjaxEnabled Website - so it automatically include AJAX Controls on your toolbox.

Place the ScriptManager on your page.

 <ajax:ScriptManager ID="ScriptManager1" runat="server">
        </ajax:ScriptManager>

Then Drag the Hyperlink and AjaxHoverMenuExtender on the Design page.

<asp:HyperLink ID="Hyperlink1" runat="server" Text="Session Mode"               NavigateUrl="~/Description.aspx"></asp:HyperLink>

 <ajaxToolkit:HoverMenuExtender ID="hme2" runat="Server" TargetControlID="Hyperlink1"
            PopupControlID="Panel1" PopupPosition="Center" OffsetX="-25" OffsetY="15"
/>

Main Properties of AjaxHoverMenuExtender

TargetControlID - Specify the server ControlID where you going to show the popup text.

PopupControlId -  Specify the ControlD which shows the popup while onmouseover of the

text of link.

PopupPosition - Center , Left , Right .

OffSetX , OffSetY - specify the X and Y position on that page according to the parent
Control.

Now i have to define the PopUp so this will be shown while mouseover.So here I used the panel which contains Datalist inside Where I bind the data from DB.

<asp:Panel ID="Panel1" runat="server" Width="600px">
            <asp:DataList ID="Dtl_Unit" CellPadding="1" CellSpacing="1"
ShowHeader="False" BorderWidth="0px"
                runat="server" DataKeyField="ServicesSubId" DataSourceID="Sqd_Unit" 

RepeatColumns="5">
                <ItemTemplate>
                    <table border="0">
                        <tr>
                            <td>
                                     <asp:HyperLink ID="Hyperlink2"  runat="server" 

NavigateUrl='<%#"Description.aspx?SId="+Eval("sessionmodeID") %>'
Text='<%#Eval("sessionmodeName")%>'></asp:HyperLink>
                            </td>

                        </tr>
                    </table>
                </ItemTemplate>
                <ItemStyle BorderWidth="0px"  />
            </asp:DataList>
            <asp:SqlDataSource ID="Sqd_Unit" runat="server" ConnectionString="<%$ 

ConnectionStrings:ConnectionString %>"
                SelectCommand="SELECT [sessionmodeID], [sessionmodeName] FROM 

[SessionTable]">
            </asp:SqlDataSource>
        </asp:Panel>

Output: