Datalist click Image

Question

Hello,

I have bind many images in Datalist control now i want to click on any one image from datalist and show in to an asp:image control,in asp.net,please help me how can i do this??

Looking forward for your kind response.

Thx.

Naresh Avari · Answer

Here I am modifying your code: RepeatDirection="Horizontal" OnItemCommand="DataList1_ItemCommand"> ' Visible="false"> ' Width="107" Height="107" CommandName="imgClick" /> and in Code behind: protected void DataList1_ItemCommand(object source, DataListCommandEventArgs e) { if (e.CommandName == "imgClick") { string imgURL = ((Label)e.Item.FindControl("lblImgName")).Text; Response.Redirect("dailydealsdetail.aspx?imgurl=" + imgURL); } }

Dorababu Meka · Answer

Didn't get you on initial start up does the data list available on page ... show me your design code and code behind code or attach them

Neha Sharma · Answer

Hello Dorababu M Sir, now as i do click on datalist's any image it ll work but my datalist is not showing on my page now :/ ? please guide me. Looking forward for your reponse. Thx.

Abhijit barua · Answer

without master page like this $(' ').addimagezoom() with master page...once run then c at view source...u will get the id different way of img control copy and and put above in place img.

Dorababu Meka · Answer

Check the attachment and find out it is working fine for me with master page. Run by making the start up page as Default.aspx with your necessary changes

Neha Sharma · Answer

If i go with a simple page its working fine expect zooming here is my code: .magnifyarea { /* CSS to add shadow to magnified image. Optional */ box-shadow: 5px 5px 7px #818181; -webkit-box-shadow: 5px 5px 7px #818181; -moz-box-shadow: 5px 5px 7px #818181; filter: progid:DXImageTransform.Microsoft.dropShadow(color=#818181, offX=5, offY=5, positive=true); background: white; } jQuery(document).ready(function ($) { $('#img').addimagezoom() }) ' ImageUrl=' '>

Dorababu Meka · Answer

Do this in web page jQuery(document).ready(function ($) { $("# ").addimagezoom() }) and place these in master page

Neha Sharma · Answer

Yes,i am using master page or when i work with a simple page it's working fine. thx

Dorababu Meka · Answer

Do you have master page for it ? If not create a Default page and copy paste this .magnifyarea { /* CSS to add shadow to magnified image. Optional */ box-shadow: 5px 5px 7px #818181; -webkit-box-shadow: 5px 5px 7px #818181; -moz-box-shadow: 5px 5px 7px #818181; filter: progid:DXImageTransform.Microsoft.dropShadow(color=#818181, offX=5, offY=5, positive=true); background: white; } jQuery(document).ready(function ($) { $('#img').addimagezoom() }) ' ImageUrl=' '> In code also protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { GetData(); } } public void GetData() { MySqlConnection con = new MySqlConnection(ConfigurationManager.ConnectionStrings["sqlcon"].ConnectionString); MySqlCommand cmd = new MySqlCommand("select * from tblImages", con); con.Open(); MySqlDataAdapter da = new MySqlDataAdapter(cmd); DataSet ds = new DataSet(); da.Fill(ds); DataList1.DataSource = ds.Tables[0].DefaultView; DataList1.DataBind(); img.ImageUrl = ds.Tables[0].Rows[0][1].ToString(); } protected void DataList1_ItemCommand(object source, DataListCommandEventArgs e) { if (e.CommandName == "ViewDetails") { // Response.Redirect("ViewDetails.aspx?Id=" + e.CommandArgument.ToString()); MySqlConnection con = new MySqlConnection(ConfigurationManager.ConnectionStrings["sqlcon"].ConnectionString); MySqlCommand cmd = new MySqlCommand("select * from tblImages where Id='" + e.CommandArgument.ToString() + "'", con); con.Open(); MySqlDataAdapter da = new MySqlDataAdapter(cmd); DataSet ds = new DataSet(); da.Fill(ds); img.ImageUrl = ds.Tables[0].Rows[0][1].ToString(); } } As I am having MYSQL database I used Mysql rename them to Sql it you are using SQL. Check out my video file for the working scenario

Neha Sharma · Answer

Hello sir, thx for your reply, \first i need to open and run your application, but as i open that it says following error,please have a look over this image: fro your reply. Thx

Dorababu Meka · Answer

Can you tell what didn't work in that

Dorababu Meka · Answer

For me it is working fine Neha Sharma do one thing create a new application and test it with the following table CREATE TABLE `tblimages` ( `Id` int(11) NOT NULL AUTO_INCREMENT, `Image1` varchar(550) DEFAULT NULL, PRIMARY KEY (`Id`) ) Insert data in to that as follow in place of Image1 ~/Images/1.jpg ~/Images/2.jpg ~/Images/3.jpg Then create Image folder in your newly created application and add some jpg Images to that folder and rename them with 1,2,3 and then test my code and let me know

Neha Sharma · Answer

Hello Dorababu M Sir, Thx for your kidn help, But its not working exaclty. :( Looking forward for your kind response. Thanks.

Dorababu Meka · Answer

Check out my attachment and do the necessary change as per your requirement. Sample Image with desired functionalty

Neha Sharma · Answer

Yes Dorababu M Sir. Please help me. Thanks.

Dorababu Meka · Answer

Do you need that zoom option too

Abhijit barua · Answer

Hello Neha, That day u ask one question i think flyout image like jabong.com. So, what u r looking u can do using jquery. u download jquery 6 - Resize,zoom popup custom position, fadein, fadeout effects From http://www.mind-projects.it/projects/jqzoom/demos.php#demo1

Neha Sharma · Answer

Hello Dorababu M, Yes,i am binding images from database,my table containing path+imagename and a folder is saving the image. Hope you ll again solve my problem for more i want to make a section like this on my page for product's sub Images: http://www.jabong.com/Plain-Purple-Tunic-85437.html?&rt=in.retargeting.sociomantic.sm_retarget.sm_retarget.sm_retarget&utm_source=sociomantic&utm_medium=retarget&utm_campaign=sm_retarget# THANKS.

Dorababu Meka · Answer

Are you binding the images from database or from a specified folder. check this article http://www.aspsnippets.com/Articles/Image-Gallery-using-ASP.Net-DataList-Control-Part-II---Image-Slideshow.aspx

Neha Sharma · Answer

When i use your given code or method its says: Invalid postback or callback argument. Event validation is enabled using in configuration or in a page. For security purposes, this feature verifies that arguments to postback or callback events originate from the server control that originally rendered them. If the data is valid and expected, use the ClientScriptManager.RegisterForEventValidation method in order to register the postback or callback data for validation.

Neha Sharma · Answer

Hello Naresh Avari, Thx for your reply, It's not working for me i don't need to go on any other page,i want on the same page. Looking forward for your kind response. Thx

Naresh Avari · Answer

Hi Neha, Here I am giving one example: DataList with onItemCommand event and ImageButton with CommandName=imgClick: Products List '> ' Width="150" Height="120" CommandName="imgClick"/> Code Behind: protected void dList_ItemCommand(object source, DataListCommandEventArgs e) { if (e.CommandName == "imgClick") { Response.Write("Image Clicked"); } } Hope this helps you....

Neha Sharma · Answer

Hello Naresh Avari, Thx, for your kind reply Please elaborate me more, here is my code, not working: RepeatColumns="4" RepeatDirection="Horizontal" oninit="DataList1_Init"> "> " Width="107px" Height="107px" style="border:0;margin:0;padding:0;visibility:inherit;" border="0"> --%> "> " Width="107px" Height="107px" style="border:0;margin:0;padding:0;visibility:inherit;" border="0" onclick="LoadDiv(this.src, this)">