How do you pass array to javascript function from asp.net page?

[emblewembl]

I'm building a photo viewer website and i've got a page loading with thumbnails showing for each image in a specified folder. If you click on a thumbnail you see the picture in full size. I want to add next and back buttons to the page so the user can just keep clicking the next button to see each photo in turn displayed at full size, rather than having to click on each thumbnail. I need the 'loadNextImage' function to run in javascript so that the whole page doesn't have to reload but i need to pass it an array of the images so it knows at any given time which image is currently loaded at full size and therefore which image to load next. The images will have random names so I can't rely on the next image number being 1 greater than the current one!

How do i pass the array of image references from my asp.net code to a javascript function or variable?

i love chocolate

 

[theniteowl]

The easiest thing to do is use a bit of ASP code at the top of the page to dynamically generate the array as the page loads.

I have not use .NET but you can use something like this ASP code to retrieve a list of images in a specified folder and store it in a Javascript array.
The code below is a combination of two different bits of code I use and I have not tested it so it might need work still but I think it should work for you or at least give you a place to start.

NOTE: This code reads in the actual file names from the folder specified so you do not have to hard code them into your script. It requires read permissions to the specified folder but that is not usually a problem as long as the folder is on the same web server.

<%
  Dim fso
  Set fso = Server.CreateObject("Scripting.FileSystemObject")
  Dim rootFolder
  Set rootFolder = fso.GetFolder("\\myserver\inetpub\[URL unfurl="true"]wwwroot\myfolder\images\")[/URL]
  Dim files
  Set files = rootFolder.Files
  First = True
  outstr = ""
  For Each file in files
    If file.Type = "GIF Image" OR file.type = "JPG Image" Then
      If First = False Then
        outstr = outstr & ", " 
      Else
        First = False
      End If
      outstr = outstr & "'" & file.Name & "'"
    End If
  Next
  Response.Write "<SCR" & "IPT type=""text/JavaScript"">" & vbCrlf
  Response.Write "var myarray = new Array(" & outstr & ");" & vbCrLf
  Response.Write "</SCR" & "IPT>" & vbCrlf
  Set files = Nothing
  Set rootFolder = Nothing
  Set fso = Nothing
%>

Stamp out, eliminate and abolish redundancy!

 

[adam0101]

Haven't tested this, but this method should work.

For Each item in myArray
  Page.RegisterArrayDeclaration("myArray", item.toString())
Next

You could also Response.Write it out or set the "text" property of a Literal control. There are many ways.

Adam

http://adameslinger.blogspot.com/

 

[emblewembl]

Ok in the end I have figured this out myself..... but I don't feel like it's a very pretty solution so if anyone has any thoughts/suggestions i'd be glad to hear them. In my asp.net code behind page i loop through every image in the specified folder and build a string of comma separated references. I then apply this string to an asp:label control on the web page. My javascript function then references this label by id and splits the string by commas. The thing that leaves it messy is that i have to leave the labels visibility to true or javascript can't seem to 'see' it so i set the forecolour to match the background - not ideal. Works ok though!

i love chocolate

 

[theniteowl]

What was wrong with the method I posted above? It took care of reading every GIF or JPG filename into a Javascript array that you could work with directly. No need to store it in a label then split the label out into an array or deal with visibility issues on the label.

Not having seen your code it sounds like what I posted above was exactly what you needed and a lot simpler than what you ended up with. And it would be easy to modify my code above to actually pre-load the images into the array and reference them there instead of having to read them in fresh every time the user selects a different image.



Paranoid? ME?? Who wants to know????

 

[robherc]

ok, if you're loading all of the image thumbnails already (and the thumbnail image names can be easily translated into the large images' names), you could do something like this(note: I know no ASP, so I'm just going to show you the HTML to generate and hope you can figure out how to generate it):

Sorry, ran out of time on my lunch break....will add another post with my finished HTML and JavaScript for you as soon as I get a chance; but I'm about 99% sure it'll do what you want once I finish it.




I hope this helps;
Rob Hercules

 

[emblewembl]

Hey theniteowl, paranoid? Surely not I didn't use your code because it's in classic asp and I'm using asp.net - i'm not quite sure if response.write works with .net??? Can you enlighten me on this? Anyway I'd be really interested to know how you can preload and reference each image as currently it is taking a while to load the big images when you click the next button.......

i love chocolate

 

[theniteowl]

I have no experience with .net but I would expect all of the functionality to still be there if somewhat altered.
It should be fairly easy to modify the code to fit .net but in any event the method is fairly straightforward even if you were to rewrite it.

As far as pre-loading the images it is a matter of creating an image object then assigning a src value to the object.
To preload multiple images it is best to create an array of image objects.

Here is an article on preloading images that explains it pretty well and shows how to use other events in combination with the preloading.

http://builder.com.com/5100-6371-5214317.html

The way I envision doing this is using server-side script to first generate the javascript array then read each filename and write out the javascript commands to create the image object in the array. It's not much different than the code I posted above it just uses the filename to add a new image object into the array rather than just storing the name. Saves a few steps over reading in a list of names then looping through the list of names to create the image objects.



Paranoid? ME?? Who wants to know????