I have a listbox that displays a list of file names of photos. The idea is when the user clicks a file name, the thumbnail should appear. When I use a postback,, the correct path shows when I view the source, but the image control still displays the same
photo. So, then I figured I'd try client side with an onchange event for the listbox. Got the same thing. I'm doing the same thing a slightly different way on another page and it works but because I'm doing a few other things, I need to perform the task differently.
Here's the server side code. I've been poking around on various forums and I'm wondering if it doesn't have something to do with the browser cache. I haven't found a solution yet.
/// <summary>
/// Renders photo when an image file is selectes in
/// lstImagePhotos listbox.
/// </summary>
protected void RenderPhoto()
{
//Declare dimensions of image
int width;
int height;
double pct;
imgAssignedImage.ImageUrl = BuildPath();
//map path to path variable
string path = HttpContext.Current.Server.MapPath(imgAssignedImage.ImageUrl);
//Calculate image dimensions based on dimensions of
//original photo.
using (var img = System.Drawing.Image.FromFile(path))
{
//Get dimensions
width = img.Width;
height = img.Height;
//Landscape
if (width > height)
{
//Max width of div container
width = 200;
//Figure % ratio of width and apply it
//to height.
pct = (double)img.Height / img.Width;
height = (int)(width * pct);
int padding_top = 200 - (height / 2);
}
else
//Portrait
{
//Max height of div container
height = 200;
//Figure % ratio of height and apply it
//to width.
pct = (double)img.Width / img.Height;
width = (int)(height * pct); ;
}
//Set image dimensions
imgAssignedImage.Width = width;
imgAssignedImage.Height = height;
}
}
protected string BuildPath()
{
DataTable dt = GetGallerySessionData();
string path = dt.Rows[lstGalleries.SelectedIndex]["GalleryPath"].ToString();
dt = GetPhotosSessionData();
path = path + "/" + dt.Rows[lstPhotos.SelectedIndex]["FileName"].ToString();
return path;
}
Here's the client side javascript with the server side set up that creates an array of paths.
protected void BuildPhotoPaths()
{
DataTable dt = GetGallerySessionData();
List<string> photoList = new List<string>();
string path = dt.Rows[lstGalleries.SelectedIndex]["GalleryPath"].ToString() + "/";
path = path.Replace("~", "..");
dt = GetPhotosSessionData();
foreach (DataRow dr in dt.Rows)
{
photoList.Add(string.Concat("'", path, dr["FileName"].ToString(), "'"));
}
//Add javascript to literal control on master page
ltrPhotoPaths.Text = "<script type='text/javascript'>" +
String.Concat("var ltrPhotoPaths = new Array(", String.Join(",", photoList.ToArray()), ");") + "</script>";
}
function renderThumbnailImage() {
var index = findSelectedListBoxIndex("lstPhotos");
var img = document.getElementById("imgAssignedImage");
var tmp = document.createElement("tmpImg");
alert(img.src);
//var path = photoArray[index];
tmp.src = ltrPhotoPaths[index];
img.src = "http://localhost/tmp.src#" + new Date().getTime();
img.src = tmp.src
alert(img.src);
if (img.width > img.height) {
img.width = "200";
img.height = "133";
}
else {
img.width = "133";
img.height = "200";
}
}
Since you only provided part of the code, I created a case based on your needs.
If allowed, I recommend that you place the file name in the text attribute when binding listbox, and then the virtual path in the value.
By triggering the OnSelectedIndexChanged event of ListBox, different pictures are displayed according to the value of listbox selected item in the event (the method you provide RenderPhoto()).
For more details , you could refer to the following code:
Still getting the same issue. Here's my code change...
dt = GetPhotosPathForGallery(galleryID);
//If there is data, add it to the
//photos listbox
if (dt.Rows.Count > 0)
{
//Traverse through rows
//foreach (DataRow dr in dt.Rows)
//{
//lstPhotos.Items.Add(dr["FileName"].ToString());
//}
lstPhotos.DataTextField = "FileName";
lstPhotos.DataValueField = "FullFilePath";
lstPhotos.DataSource = dt;
lstPhotos.DataBind();
}
What comes up from the table and is in the SelectedValue is "~/Photos/Cornell_Hurd_1-30-2016/DSC0025.jpg"
The page source for the imageUrl is also the correct path but taking into account the folder structure
"../Photos/Cornell_Hurd_1-30-2016/DSC0025.jpg"
So, everthing should be working. The first picture does come up but selections don't render the new photo even though the path is correct. It's only the first photo and the picture doesn't change.
According to your description, I guess the question should still be on the imageUrl of the pictures.
Can you be sure that the urls of these pictures are correct?
I recommend that you use F10 to step by step debug the code behind and check the imageUrl for the current image in the OnSelectedIndexChanged event.
Or you can use F12, when you switch to click listbox, monitor the status of the image in the Network tab and whether the status code is green, you can refer following gif :
If these still not solve your issue, please provide your complete codes for us to test (with your imageurl details).
Best Regards,
YongQing.
MSDN Community Support
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
Here is the path of the first image rendered when the page loads from both the listbox and the image control. The paths must be correct because the first image shows up.
According to the picture you gave, the states of DSC_0013.jpg and DSC_0066.jpg are 200, which means that their URL is right, but in the preview tab, the two pictures themselves are the same, except that you define different names for them.
I hope you can confirm that your source is correct and that you can see the difference between the pictures, because there are no errors in the information you gave, except that the pictures look the same, which
may be why you click on the trigger picture and it doesn't seem to change.
If you know that you have two images that look different, you can test them again.
It is recommended that you use code behind to debug through breakpoints to confirm that every time you click on list item, you will enter the OnSelectedIndexChanged event and get different image urls each time,
but only if you ensure that the picture looks different.
Here is my test with breakpoints:
Best Regards,
YongQing.
MSDN Community Support
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
You right! Must be something wrong with my file upload logic. They are named differently but they are indeed the same picture. I have to take a look at that. I assumed it worked because I'm using the same logic for another page. I essentially just copied
and pasted it. Never would've thought that... Thanks...
Member
17 Points
124 Posts
Photo will not refresh in Image control
Aug 01, 2019 09:06 PM|oneillj|LINK
I have a listbox that displays a list of file names of photos. The idea is when the user clicks a file name, the thumbnail should appear. When I use a postback,, the correct path shows when I view the source, but the image control still displays the same photo. So, then I figured I'd try client side with an onchange event for the listbox. Got the same thing. I'm doing the same thing a slightly different way on another page and it works but because I'm doing a few other things, I need to perform the task differently.
Here's the server side code. I've been poking around on various forums and I'm wondering if it doesn't have something to do with the browser cache. I haven't found a solution yet.
/// <summary> /// Renders photo when an image file is selectes in /// lstImagePhotos listbox. /// </summary> protected void RenderPhoto() { //Declare dimensions of image int width; int height; double pct; imgAssignedImage.ImageUrl = BuildPath(); //map path to path variable string path = HttpContext.Current.Server.MapPath(imgAssignedImage.ImageUrl); //Calculate image dimensions based on dimensions of //original photo. using (var img = System.Drawing.Image.FromFile(path)) { //Get dimensions width = img.Width; height = img.Height; //Landscape if (width > height) { //Max width of div container width = 200; //Figure % ratio of width and apply it //to height. pct = (double)img.Height / img.Width; height = (int)(width * pct); int padding_top = 200 - (height / 2); } else //Portrait { //Max height of div container height = 200; //Figure % ratio of height and apply it //to width. pct = (double)img.Width / img.Height; width = (int)(height * pct); ; } //Set image dimensions imgAssignedImage.Width = width; imgAssignedImage.Height = height; } } protected string BuildPath() { DataTable dt = GetGallerySessionData(); string path = dt.Rows[lstGalleries.SelectedIndex]["GalleryPath"].ToString(); dt = GetPhotosSessionData(); path = path + "/" + dt.Rows[lstPhotos.SelectedIndex]["FileName"].ToString(); return path; }Here's the client side javascript with the server side set up that creates an array of paths.
protected void BuildPhotoPaths() { DataTable dt = GetGallerySessionData(); List<string> photoList = new List<string>(); string path = dt.Rows[lstGalleries.SelectedIndex]["GalleryPath"].ToString() + "/"; path = path.Replace("~", ".."); dt = GetPhotosSessionData(); foreach (DataRow dr in dt.Rows) { photoList.Add(string.Concat("'", path, dr["FileName"].ToString(), "'")); } //Add javascript to literal control on master page ltrPhotoPaths.Text = "<script type='text/javascript'>" + String.Concat("var ltrPhotoPaths = new Array(", String.Join(",", photoList.ToArray()), ");") + "</script>"; } function renderThumbnailImage() { var index = findSelectedListBoxIndex("lstPhotos"); var img = document.getElementById("imgAssignedImage"); var tmp = document.createElement("tmpImg"); alert(img.src); //var path = photoArray[index]; tmp.src = ltrPhotoPaths[index]; img.src = "http://localhost/tmp.src#" + new Date().getTime(); img.src = tmp.src alert(img.src); if (img.width > img.height) { img.width = "200"; img.height = "133"; } else { img.width = "133"; img.height = "200"; } }Jim
Contributor
2760 Points
784 Posts
Re: Photo will not refresh in Image control
Aug 02, 2019 06:49 AM|Yongqing Yu|LINK
Hi oneillj,
Since you only provided part of the code, I created a case based on your needs.
If allowed, I recommend that you place the file name in the text attribute when binding listbox, and then the virtual path in the value.
By triggering the OnSelectedIndexChanged event of ListBox, different pictures are displayed according to the value of listbox selected item in the event (the method you provide RenderPhoto()).
For more details , you could refer to the following code:
Here is my datasource to bind listbox:
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script type="text/javascript"> </script> </head> <body> <form id="form1" runat="server"> <div> <asp:ListBox ID="ListBox1" runat="server" SelectionMode="Single"AutoPostBack="true" OnSelectedIndexChanged="ListBox1_SelectedIndexChanged" > </asp:ListBox> <asp:Image ID="imgAssignedImage" runat="server" /> </div> </form> </body> </html>
protected void Page_Load(object sender, EventArgs e) { if(!IsPostBack) { BindList(); } } protected void BindList() { string connectionString = ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString; SqlConnection connection = new SqlConnection(connectionString); SqlDataAdapter sda = new SqlDataAdapter(); sda.SelectCommand = new SqlCommand("select * from ImageInfo", connection); DataSet ds = new DataSet(); sda.Fill(ds); ListBox1.DataTextField = "FileName"; ListBox1.DataValueField = "Url"; ListBox1.DataSource = ds.Tables[0]; ListBox1.DataBind(); } protected void ListBox1_SelectedIndexChanged(object sender, EventArgs e) { string path = ListBox1.SelectedValue.ToString(); RenderPhoto(path); } protected void RenderPhoto(string path1) { //Declare dimensions of image int width; int height; double pct; imgAssignedImage.ImageUrl = path1; //map path to path variable string path = HttpContext.Current.Server.MapPath(imgAssignedImage.ImageUrl); //Calculate image dimensions based on dimensions of //original photo. using (var img = System.Drawing.Image.FromFile(path)) { //Get dimensions width = img.Width; height = img.Height; //Landscape if (width > height) { //Max width of div container width = 200; //Figure % ratio of width and apply it //to height. pct = (double)img.Height / img.Width; height = (int)(width * pct); int padding_top = 200 - (height / 2); } else //Portrait { //Max height of div container height = 200; //Figure % ratio of height and apply it //to width. pct = (double)img.Width / img.Height; width = (int)(height * pct); ; } //Set image dimensions imgAssignedImage.Width = width; imgAssignedImage.Height = height; } }The result of this work demo:
If it's not the result you expected, I hope you can provide all the code for me to test.
Best Regards,
YongQing.
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
Member
17 Points
124 Posts
Re: Photo will not refresh in Image control
Aug 05, 2019 09:45 PM|oneillj|LINK
Yongqing,
Still getting the same issue. Here's my code change...
dt = GetPhotosPathForGallery(galleryID); //If there is data, add it to the //photos listbox if (dt.Rows.Count > 0) { //Traverse through rows //foreach (DataRow dr in dt.Rows) //{ //lstPhotos.Items.Add(dr["FileName"].ToString()); //} lstPhotos.DataTextField = "FileName"; lstPhotos.DataValueField = "FullFilePath"; lstPhotos.DataSource = dt; lstPhotos.DataBind(); }Jim
Contributor
2760 Points
784 Posts
Re: Photo will not refresh in Image control
Aug 06, 2019 01:15 AM|Yongqing Yu|LINK
Hi oneillj,
According to your description, do you have any errors when you switch clicks?
I recommend that you use F12 to see if the console tab has any error message, and if so, I hope you can provide us with a reference.
In addition, the most likely reason is the problem of your image path. Can I see what your FullFilePath stores?
And can you tell us the hierarchical relationship between these pictures and the page you are currently running?
Best Regards,
YongQing.
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
Member
17 Points
124 Posts
Re: Photo will not refresh in Image control
Aug 06, 2019 02:18 AM|oneillj|LINK
What comes up from the table and is in the SelectedValue is "~/Photos/Cornell_Hurd_1-30-2016/DSC0025.jpg"
The page source for the imageUrl is also the correct path but taking into account the folder structure
"../Photos/Cornell_Hurd_1-30-2016/DSC0025.jpg"
So, everthing should be working. The first picture does come up but selections don't render the new photo even though the path is correct. It's only the first photo and the picture doesn't change.
Do you think it might be a cache problem?
Jim
Contributor
2760 Points
784 Posts
Re: Photo will not refresh in Image control
Aug 06, 2019 06:07 AM|Yongqing Yu|LINK
Hi oneillj,
No, that's not the reason.
According to your description, I guess the question should still be on the imageUrl of the pictures.
Can you be sure that the urls of these pictures are correct?
I recommend that you use F10 to step by step debug the code behind and check the imageUrl for the current image in the OnSelectedIndexChanged event.
Or you can use F12, when you switch to click listbox, monitor the status of the image in the Network tab and whether the status code is green, you can refer following gif :
If these still not solve your issue, please provide your complete codes for us to test (with your imageurl details).
Best Regards,
YongQing.
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
Member
17 Points
124 Posts
Re: Photo will not refresh in Image control
Aug 06, 2019 11:10 PM|oneillj|LINK
Here is the path of the first image rendered when the page loads from both the listbox and the image control. The paths must be correct because the first image shows up.
Here are the image links to the console. They are on my FB page and have been made public so, you should be able to see them. Let me know if you can't.
https://www.facebook.com/photo.php?fbid=2466848086670646&set=pcb.2466848290003959&type=3&theater
https://www.facebook.com/photo.php?fbid=2466848100003978&set=pcb.2466848290003959&type=3&theater
Here are the same controls after another image has been clicked on in the listbox
Here are the links...
https://www.facebook.com/photo.php?fbid=2466848093337312&set=pcb.2466848290003959&type=3&theater
https://www.facebook.com/photo.php?fbid=2466848143337307&set=pcb.2466848290003959&type=3&theater
Jim
Contributor
2760 Points
784 Posts
Re: Photo will not refresh in Image control
Aug 07, 2019 06:37 AM|Yongqing Yu|LINK
Hi oneillj,
According to the picture you gave, the states of DSC_0013.jpg and DSC_0066.jpg are 200, which means that their URL is right, but in the preview tab, the two pictures themselves are the same, except that you define different names for them.
I hope you can confirm that your source is correct and that you can see the difference between the pictures, because there are no errors in the information you gave, except that the pictures look the same, which may be why you click on the trigger picture and it doesn't seem to change.
If you know that you have two images that look different, you can test them again.
It is recommended that you use code behind to debug through breakpoints to confirm that every time you click on list item, you will enter the OnSelectedIndexChanged event and get different image urls each time, but only if you ensure that the picture looks different.
Here is my test with breakpoints:
Best Regards,
YongQing.
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
Member
17 Points
124 Posts
Re: Photo will not refresh in Image control
Aug 07, 2019 08:44 PM|oneillj|LINK
You right! Must be something wrong with my file upload logic. They are named differently but they are indeed the same picture. I have to take a look at that. I assumed it worked because I'm using the same logic for another page. I essentially just copied and pasted it. Never would've thought that...
Thanks...
Jim