Display (Show) ASP.Net DataList Item Details in Modal Popup on MouseHover using jQuery

Last Reply 2 months ago By pandeyism

Posted 2 months ago

Dear sir,

I have a Datalist in the Datalist have a image button. when user mouse over the image I need it's price in popup.

I searched in internet but couldn't find it. Kindly help me.

You are viewing reply posted by: pandeyism 2 months ago.
Posted 2 months ago

Hi rajeesh,

Refer below sample.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <style type="text/css">
        body
        {
            font-family: Arial;
            font-size: 10pt;
        }
        img
        {
            height: 160px;
            width: 160px;
        }
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" src="http://cdn.rawgit.com/elevateweb/elevatezoom/master/jquery.elevateZoom-3.0.8.min.js"></script>
    <script type="text/javascript" src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js'></script>
    <link rel="stylesheet" href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css'
        media="screen" />
    <script type="text/javascript">
        $(function () {
            $("#DataList1 Table").mouseover(function () {
                var price = $(this).find("input:hidden").val();
                $("#MyPopup .modal-body").html("Price is : " + price);
                $("#MyPopup").modal("show");
                return false;
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <asp:DataList ID="DataList1" runat="server" RepeatColumns="2" CellPadding="4">
        <ItemTemplate>
            <table border="0" cellpadding="0" cellspacing="0" width="120px">
                <tr>
                    <td align="center">
                        <img src='<%# ResolveUrl(Eval("ImageUrl").ToString()) %>' alt="" />
                        <asp:HiddenField ID="hfPrice" runat="server" Value='<%#Eval("Price") %>' />
                    </td>
                </tr>
            </table>
        </ItemTemplate>
    </asp:DataList>
    <div id="MyPopup" class="modal fade" role="dialog">
        <div class="modal-dialog">
            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">
                        &times;</button>
                    <h4 class="modal-title">
                    </h4>
                </div>
                <div class="modal-body">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-dismiss="modal">
                        Close</button>
                </div>
            </div>
        </div>
    </form>
</body>
</html>

Namespaces

C#

using System.Data;

VB.Net

Imports System.Data

Code

C#

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        DataTable dt = new DataTable();
        dt.Columns.AddRange(new DataColumn[] { new DataColumn("ImageName"), new DataColumn("Price"), 
            new DataColumn("ImageUrl"),
            new DataColumn("ZoomImageUrl")
    });
        dt.Rows.Add("Hydrangeas", 10, "~/Images/Small/Hydrangeas.jpg");
        dt.Rows.Add("Jellyfish", 20, "~/Images/Small/Jellyfish.jpg");
        dt.Rows.Add("Koala", 30, "~/Images/Small/Koala.jpg");
        dt.Rows.Add("Penguins", 40, "~/Images/Small/Penguins.jpg");
        DataList1.DataSource = dt;
        DataList1.DataBind();
    }
}

VB.Net

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    If Not Me.IsPostBack Then
        Dim dt As DataTable = New DataTable()
        dt.Columns.AddRange(New DataColumn() {New DataColumn("ImageName"), New DataColumn("Price"), New DataColumn("ImageUrl"), New DataColumn("ZoomImageUrl")})
        dt.Rows.Add("Hydrangeas", 10, "~/Images/Small/Hydrangeas.jpg")
        dt.Rows.Add("Jellyfish", 20, "~/Images/Small/Jellyfish.jpg")
        dt.Rows.Add("Koala", 30, "~/Images/Small/Koala.jpg")
        dt.Rows.Add("Penguins", 40, "~/Images/Small/Penguins.jpg")
        DataList1.DataSource = dt
        DataList1.DataBind()
    End If
End Sub

Screenshot