How to use HoverMenuExtender control on ASP.NET Website

On By
Hi Friend, Today we will learn "How to use HoverMenuExtender control on ASP.NET Website". This will work when you move mouse pointer over the target control.I will explain it with an example. It display a pop-up menu when you move mouse pointer over the target control. In HoverMenuExtender control , you can also specify the position the pop-up panel in the web page. This control is similar to PopupControlExtender control because both controls display a pop-up  window to show the additional content. It is very useful to display a context menu or you want to provide tips automatically when an ASP.NET control receives focus. If you are not install Ajax Control Kit on your visual studio, You can Install it From here 
There are some important properties of HoverMenuExtender control as given below:-
1.) TargetControl ID :- It sets the ID of the control to which the extender control is attached.
2.) PopupControl ID :- It sets the ID of the pop-up control that is displayed when the mouse hover over the target control.
3.) PopupPosition :- It sets the position of the pop-up relative to the target control.
4.) HoverCssClass :- It sets the css class that is to be applied to the target control when the hover menu pop-up is displayed.
5.) Animation :-  It sets the animations to be applied to the HoverMenuExtender control.
6.) Offset X/Offset Y:- It sets the number of pixels  to the offset the pop-up from it default position.
7.) PopDelay :- It sets the time for the pop- up to remain visible when mouse moves away from the target control.
There are some steps to Implement the whole concepts on visual studio as given below:-
Step 1 :- First open your  visual studio --> file --> New --> Website --> Select ASP.NET  Empty Website --> OK --> Now open Solution Explorer --> Add a New Web Form (Default.aspx).
Step 2 :- Now drag and drop ToolkitScripManager , ImageButton control ,Panel control and CheckBoxList control  --> Add some some Values into CheckBoxList control(Go properties--> Click Items --> after that press Add) . 

Step 3 :- Now Open Source File --> Drag ad Drop HoverMenuExtender Control from toolbox as shown below.
Step 4 :- If You are facing any type of problems , See below Source codes as given below:-
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="asp" %>

<!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>
</head>
<body>
    <form id="form1" runat="server">
    <div style="background-color: #FFFF66">
        <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
        </asp:ToolkitScriptManager>
        <br />
        <asp:ImageButton ID="ImageButton1" runat="server" Height="43px" 
            ImageUrl="~/image/image.jpg" Width="160px" 
            style="background-color: #FF99CC" />
            <asp:UpdatePanel ID="up1" runat="server"><ContentTemplate>
        <asp:Panel ID="Panel1" runat="server" Height="295px" Width="305px">
            <asp:Image ID="Image1" runat="server" ImageUrl="~/image/my.jpg" Width="278px" />
            <asp:CheckBoxList ID="CheckBoxList1" runat="server">
                <asp:ListItem>C# Language</asp:ListItem>
                <asp:ListItem>ASP.NET</asp:ListItem>
                <asp:ListItem>ADO.NET</asp:ListItem>
                <asp:ListItem>SQL SERVER</asp:ListItem>
                <asp:ListItem>MVC</asp:ListItem>
                <asp:ListItem>WPF</asp:ListItem>
                <asp:ListItem>WCF</asp:ListItem>
                <asp:ListItem>LINQ</asp:ListItem>
                <asp:ListItem>JQuery</asp:ListItem>
                <asp:ListItem>AJAX</asp:ListItem>
            </asp:CheckBoxList>
        </asp:Panel></ContentTemplate>
        <Triggers>
   <asp:AsyncPostBackTrigger ControlID="CheckBoxList1" />
   </Triggers>
            </asp:UpdatePanel>
        <br />
        <asp:HoverMenuExtender ID="HoverMenuExtender1" runat="server" 
        TargetControlID="ImageButton1" PopupControlID="Panel1" 
        PopupPosition="Right" OffsetX="5" OffsetY="5" PopDelay="35">
        </asp:HoverMenuExtender>
    </div>
    </form>
</body>
</html>
Note:- Here I have bind two main Id 
  • CheckBoxList ID
  • ImageButton ID
Which is already shown Step 3.
Step 5 :- Now Run the Application (Press F5) --> Move Your mouse over Imagebutton control --> You will see following output as shown below:-

For More...
Subscribe through email and get Free updates in inbox
Please like and share this post with your friends...

You May Also Like...

0 comments:

Post a Comment

Powered by Blogger.