example of ajax control "HoverMenu" using asp.net






HoverMenu.aspx


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="HoverMenu.aspx.cs" Inherits="HoverMenu" %>

<%@ 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>
    <asp:ToolkitScriptManager ID="ScriptManager1" runat="server"></asp:ToolkitScriptManager>
   
        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
            BackColor="#DEBA84" BorderColor="#DEBA84" BorderStyle="None" BorderWidth="1px"
            CellPadding="3" CellSpacing="2">
            <RowStyle BackColor="#FFF7E7" ForeColor="#8C4510" />
        <Columns>
            <asp:BoundField DataField="pro_id" HeaderText="Product ID" />
            <asp:BoundField DataField="pro_name" HeaderText="Product Name" />
            <asp:BoundField DataField="pro_price" HeaderText="Product price" />
            <asp:TemplateField>
                <ItemTemplate>
                    <asp:Image ID="Image1" runat="server" ImageUrl='<%#Eval("pro_image") %>' Width="60px" Height="60px" />
               
                <asp:HoverMenuExtender runat="server" PopupControlID="popupImage"
                 TargetControlID="Image1"
                 OffsetX="10" OffsetY="5"
                 PopupPosition="Right"
                 PopDelay="100" HoverDelay="100">
                </asp:HoverMenuExtender>
                <asp:Panel runat="server" id="popupImage" BorderColor="#628BD7"
                 BorderStyle="Solid" BorderWidth="7px">
                 <asp:Image ID="mainImage" runat="server" ImageUrl='<%#Eval("pro_image") %>' Width="200px" Height="200px" />
                </asp:Panel>
                </ItemTemplate>
            </asp:TemplateField>
           
        </Columns>
            <FooterStyle BackColor="#F7DFB5" ForeColor="#8C4510" />
            <PagerStyle ForeColor="#8C4510" HorizontalAlign="Center" />
            <SelectedRowStyle BackColor="#738A9C" Font-Bold="True" ForeColor="White" />
        <HeaderStyle BackColor="#A55129" Font-Bold="True" ForeColor="White" />
        </asp:GridView>
       
    </div>
    </form>
</body>
</html>





HoverMenu.aspx.cs



using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;

public partial class HoverMenu : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        string con = @"Data Source=SQLDB;Initial Catalog=Demo;User ID=DemoD;Password=Demo1@";
        string q = "select pro_id,pro_name,pro_image,pro_price from pi_product";
        SqlConnection conn = new SqlConnection(con);
        //connection open
        conn.Open();
        //sql command to execute query from database
        SqlCommand cmd = new SqlCommand(q, conn);
        cmd.ExecuteNonQuery();
        SqlDataAdapter da = new SqlDataAdapter(cmd);
        DataSet ds = new DataSet();
        da.Fill(ds);
        //Binding data to gridview
        GridView1.DataSource = ds;
        GridView1.DataBind();
        conn.Close();
    }
}


0 comments :