Hi ashish007,
Check this example. Now please take its reference and correct your code based on the key column in database.
HTML
<asp:DataList ID="dlImages" runat="server" RepeatLayout="Table" RepeatColumns="4" RepeatDirection="Horizontal"
OnLoad="dlImages_Load">
<ItemTemplate>
<table>
<tr>
<td>
<asp:Image ID="imagepost" runat="server" ImageUrl='<%#Eval("Path") %>' CssClass="imag" />
<asp:Button ID="btnShow" Text="" runat="server" OnClick="OnShow" Style="display: none;" />
<asp:DataList ID="dlPostImages" runat="server" RepeatLayout="Table" RepeatColumns="4" RepeatDirection="Horizontal">
<ItemTemplate>
<asp:Image ID="imagepost" runat="server" ImageUrl='<%#Eval("Path") %>' CssClass="imag" />
</ItemTemplate>
</asp:DataList>
</td>
</tr>
</table>
</ItemTemplate>
</asp:DataList>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
function OpenDisplayAll(ele) {
$(ele).closest('td').find('[id*=btnShow]').trigger('click');
}
</script>
Namespaces
C#
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
VB.Net
Imports System.Configuration
Imports System.Data
Imports System.Data.SqlClient
Code
C#
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
string query = "SELECT TOP 4 '~/'+Path as 'Path' FROM tblFilePathTest ORDER BY Id";
BindDataList(dlImages, GetData(query));
}
}
protected void dlImages_Load(object sender, EventArgs e)
{
if (dlImages.Items.Count <= 4)
{
(dlImages.Items[dlImages.Items.Count - 1].FindControl("imagepost") as Image).Attributes.Add("onclick", "OpenDisplayAll(this)");
(dlImages.Items[dlImages.Items.Count - 1].FindControl("imagepost") as Image).Attributes.Add("style", "cursor:pointer");
}
}
protected void OnShow(object sender, EventArgs e)
{
string query = "SELECT '~/'+Path as 'Path' FROM tblFilePathTest ORDER BY Id";
DataListItem item = (sender as Button).NamingContainer as DataListItem;
DataList dlPost = (item.FindControl("dlPostImages") as DataList);
BindDataList(dlPost, GetData(query));
dlPost.Visible = true;
}
private void BindDataList(DataList dataList, DataTable dt)
{
dataList.DataSource = dt;
dataList.DataBind();
}
private DataTable GetData(string query)
{
string conString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
using (SqlConnection con = new SqlConnection(conString))
{
SqlCommand cmd = new SqlCommand(query);
using (SqlDataAdapter sda = new SqlDataAdapter())
{
cmd.Connection = con;
sda.SelectCommand = cmd;
using (DataTable dt = new DataTable())
{
sda.Fill(dt);
return dt;
}
}
}
}
VB.Net
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
If Not Me.IsPostBack Then
Dim query As String = "SELECT TOP 4 '~/'+Path as 'Path' FROM tblFilePathTest ORDER BY Id"
BindDataList(dlImages, GetData(query))
End If
End Sub
Protected Sub dlImages_Load(ByVal sender As Object, ByVal e As EventArgs)
If dlImages.Items.Count <= 4 Then
TryCast(dlImages.Items(dlImages.Items.Count - 1).FindControl("imagepost"), Image).Attributes.Add("onclick", "OpenDisplayAll(this)")
TryCast(dlImages.Items(dlImages.Items.Count - 1).FindControl("imagepost"), Image).Attributes.Add("style", "cursor:pointer")
End If
End Sub
Protected Sub OnShow(ByVal sender As Object, ByVal e As EventArgs)
Dim query As String = "SELECT '~/'+Path as 'Path' FROM tblFilePathTest ORDER BY Id"
Dim item As DataListItem = TryCast((TryCast(sender, Button)).NamingContainer, DataListItem)
Dim dlPost As DataList = (TryCast(item.FindControl("dlPostImages"), DataList))
BindDataList(dlPost, GetData(query))
dlPost.Visible = True
End Sub
Private Sub BindDataList(ByVal dataList As DataList, ByVal dt As DataTable)
dataList.DataSource = dt
dataList.DataBind()
End Sub
Private Function GetData(ByVal query As String) As DataTable
Dim conString As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
Using con As SqlConnection = New SqlConnection(conString)
Dim cmd As SqlCommand = New SqlCommand(query)
Using sda As SqlDataAdapter = New SqlDataAdapter()
cmd.Connection = con
sda.SelectCommand = cmd
Using dt As DataTable = New DataTable()
sda.Fill(dt)
Return dt
End Using
End Using
End Using
End Function
