How to Show Data Dynamically when clicked on Image button

Question

When user click on any ImageButton then in side panel the respective data should display like festival name and details in two labels

 

 

Code:

 

 

EventsDisplay.aspx

 

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPageHeaderFooter.master" AutoEventWireup="true" CodeFile="EventsDisplay.aspx.cs" Inherits="_Default" %>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolderHeaderFooter" Runat="Server">

<table style="text-align:left">

<tr>

<td colspan="2" style="width:100%; height:20%">

<div>

<asp:Panel ID="PanelEventsInfo" runat="server" BackColor="#996633" BorderStyle="Double" Height="50px">

<table style="text-align:left">

<tr>

<td><h3></h3></td>

</tr>

</table>

</asp:Panel>

</div>

</td>

</tr>

<tr>

<td style="width:100%; height:80%">

<div>

<asp:Panel ID="PanelEventPhoto" runat="server" BackColor="#666633" BorderStyle="Double" Width="500px">

<asp:Image ID="ImageGetImagefromEvents" runat="server"/>

</asp:Panel>

</div>

</td>

<td style="width:100%; height:80%">

<div>

<asp:Panel ID="PanelEventsPhotoDetails" runat="server" BackColor="#666633" BorderStyle="Double" Width="500px">

<table style="text-align:left">

<tr>

<td>

<h3>Event Name : <asp:Label ID="LabelEventName" runat="server" Text=""></asp:Label></h3>

</td>

</tr>

<tr>

<td>

<h3>Event Details : <asp:Label ID="LabelEventDetails" runat="server" Text=""></asp:Label></h3>

</td>

</tr>

</table>

</asp:Panel>

</div>

</td>

</tr>

</table>

</asp:Content>

 EventDispaly.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.Configuration;

using System.Data;

using System.Data.SqlClient;

using System.IO;

public partial class _Default : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

ImageUploads();

}

private void ImageUploads()

{

foreach (string StrFileName in Directory.GetFiles(Server.MapPath("~/Organisational Local Data/Images/")))

{

ImageButton imageButton = new ImageButton();

FileInfo fileinfo = new FileInfo(StrFileName);

imageButton.ImageUrl = "~/Organisational Local Data/Images/" + fileinfo.Name;

imageButton.Width = Unit.Pixel(100);

imageButton.Height = Unit.Pixel(100);

imageButton.Style.Add("padding", "5px");

imageButton.Click += new ImageClickEventHandler(imageButton_Click);

PanelEventPhoto.Controls.Add(imageButton);

}

}

private void ImageNameandDetails(string EventNames, string EventDetail)

{

LabelEventName.Text = EventNames;

LabelEventDetails.Text = EventDetail;

}

private void imageButton_Click(object sender, ImageClickEventArgs e)

{

FileName("1.jpg");

FileName("2.jpg");

FileName("3.jpg");

FileName("4.jpg");

FileName("5.jpg");

FileName("6.jpg");

}

private void FileName(string ImageName)

{

if (ImageName=="1.jpg")

{

FileName("1");

ImageNameandDetails("Happy Dussehra", "Holiday for 3 Days. One day Before and After the Festival.");

}

if (ImageName == "2.jpg")

{

FileName("2");

ImageNameandDetails("Happy Diwali", "Holiday for 7 Days. Three day Before and After the Festival.");

}

if (ImageName == "3.jpg")

{

FileName("3");

ImageNameandDetails("Happy Genesh Chaturthi", "Holiday for 3 Days. On First, Fifth and Ninth Day of the Festival.");

}

if (ImageName == "4.jpg")

{

FileName("4");

ImageNameandDetails("Happy Republic Day", "Holiday for 1 Days. On Festival Day Only.");

}

if (ImageName == "5.jpg")

{

FileName("5");

ImageNameandDetails("Happy Independence Day", "Holiday for 1 Days. On Festival Day Only.");

}

if (ImageName == "6.jpg")

{

FileName("6");

ImageNameandDetails("Happy Holi", "Holiday for 2 Days. On Festival Day and the Day After Only.");

}

}

}