Introduction: In this
article I try to explain how to zoom the image on mouse hover in asp.net
Datalist control using magnify Jquery.
Description:
In
the previous article I have explained Pagination in asp.net Listview controlusing Datapager and Add dynamically created controls to webpage and read theirvalues in asp.net.
I
have created a table for products (Tb_Product).
Table
having the data.
I am going to display the products detail in
datalist control. I am using the magnify zoom Jquery plugin which zoom the
image inside. Download the Bootstarp magnify Jquery. After downloading it link
the Jquery and CSS to webform.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="js/bootstrap-magnify.min.js"></script>
<link rel="stylesheet" href="css/bootstrap-magnify.css">
After
that darg and drop the control to webform.
Complete
Html Markup of Webform
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="js/bootstrap-magnify.min.js"></script>
<link rel="stylesheet" href="css/bootstrap-magnify.css">
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:DataList ID="dlproducts" runat="server" DataKeyField="Id">
<HeaderTemplate>
<table width="100%">
<thead><td><b>Product Name</b></td><td><b>Description</b></td><td> </td><td><b>Price</b></td></thead>
</HeaderTemplate>
<ItemTemplate>
<tr><td style="width:20%;><asp:Label ID="lblname"
runat="server"
Text='<%# Eval("ProductName") %>'></asp:Label></td>
<td style="width:30%;"><asp:Label ID="lbldescription"
runat="server"
Text='<%# Eval("ProductDescription") %>'></asp:Label></td>
<td style="width:20%;"><img
src='<%# ResolveUrl(Eval("Productimg").ToString())
%>' width="400" height="250" data-toggle="magnify" />
</td>
<td style="width: 10%;><asp:Label ID="lblprice"
runat="server"
Text='<%# Eval("Price") %>'></asp:Label>
</td></tr>
</ItemTemplate>
</asp:DataList>
</div>
</form>
</body>
</html>
Add
namespace
C#:-
using
System.Data;
using
System.Data.SqlClient;
using
System.Configuration;
VB:-
Imports
System.Data
Imports
System.Data.SqlClient
Imports
System.Configuration
Now
write the code to bind the datalist.
C#:-
SqlConnection
con = new SqlConnection(ConfigurationManager.ConnectionStrings["connection"].ToString());
protected void Page_Load(object
sender, EventArgs e)
{
if
(!IsPostBack)
{
BindDatalist();
}
}
public void BindDatalist()
{
try
{
SqlDataAdapter
adp = new SqlDataAdapter("Select * from Tb_Product", con);
DataTable
dt = new DataTable();
adp.Fill(dt);
if
(dt.Rows.Count > 0)
{
dlproducts.DataSource = dt;
dlproducts.DataBind();
}
}
catch (Exception ex)
{
}
}
VB:-
Private
con As New SqlConnection(ConfigurationManager.ConnectionStrings("connection").ToString())
Protected Sub Page_Load(sender As
Object, e As
System.EventArgs) Handles
Me.Load
If Not IsPostBack Then
BindDatalist()
End If
End Sub
Public Sub BindDatalist()
Try
Dim
adp As New SqlDataAdapter("Select
* from Tb_Product", con)
Dim
dt As New DataTable()
adp.Fill(dt)
If
dt.Rows.Count > 0 Then
dlproducts.DataSource = dt
dlproducts.DataBind()
End
If
Catch
ex As Exception
End Try
End Sub
Build,
run the project and see the result.
Result:-
If you are face any problem to implement this you can download it.
In this article we have learn how to zoom the image on mousehover in asp.net datalist control suing magnify Jquery (C#,VB). I hope you enjoyed this article.
No comments:
Post a Comment