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:
 |
Read more »
Posts
