access/iterate over a C# list in jQuery

Question

i am trying to make an image gallery with pictures fading in and out. I already have that part covered, but so far im hard coding the image url's in my .aspx page. I don't want this, i need it to be dynamic.

 <script type="text/javascript">
    $(function() 
    {   var img = $("img.x");
        $(img).hide().eq(0).show();
        var cnt = img.length
        setInterval(imgRotate, 5000);
        function imgRotate() {
            $(img).eq((img.length++) % cnt).fadeOut("slow",
        function() {
            $(img).eq((img.length) % cnt).fadeIn("slow");
        });
        }
    });        
</script>
<body>
<form id="form1" runat="server">
<div>
         <img class="x" alt="Image1" src="Desert.jpg"/>
         <img class="x" alt="Image1" src="Lighthouse.jpg"/>            
</div>
</form>

this makes the images fade in and out, which is good, but as you can see, i've hardcoded the images in this example. I can't use this for my application.

What i want to do is the following: i want to pass a List<string> (codebehind) to the jQuery script that will just iterate over the list and replace the source url of the image.

i just want to do something like this in the jQuery script (pseudo-code):

int counter = 0;
var img = ListFromCodeBehind[counter];
//do some fading stuff
count++;

i've tried using <%=%> server tags, and so forth but to no avail. I've read lots of things but they all seem overly complicated for what i'm trying to achieve..

Can you use an ajax() request to get the urls for the images and in the success() function iterate through the urls and apply them to the src of your img element? — The Internet, Jul 26 '12 at 15:30

score 2 · Accepted Answer · answered Jul 26 '12 at 15:47

Why is everybody forcing you to use AJAX? There is no need to load image list in separate HTTP request. I assume your code comes from some aspx page. Therefore you can provide a public method in this Pages's class (lets call it GetImages()) that returns a string that looks like JavaScript array. I.e.

public string GetImages()
{
    return "['Desert.jpg', 'Lighthouse.jpg']";
}

Then in you JavaScript code (that is placed in this Page's aspx file as well) you can call public method of Page's class with classic ASP syntax:

int counter = 0;
var ListFromCodeBehind = <%= this.GetImages() %>;
var img = ListFromCodeBehind[counter];
//do some fading stuff
count++;

which will finally print:

var ListFromCodeBehind = ['Desert.jpg', 'Lighthouse.jpg'];

and this is the result I believe you expect.

after some more trouble, my solution didn't really fit either, so i tried things over again and used your example. thanks. — Thousand, Jul 27 '12 at 19:46

score 0 · Answer 2 · edited May 23 '17 at 11:48

You can add a Web Method into your aspx page (code behind) that can be called by AJAX. Your code behind method will return a string that contains the URL to the images, in a JSON format (so that JQuery knows how to iterate though it out of the box).

Have a look at this thread to have an idea of how to create a web method in an aspx code behind file. I'd do it via asp.net MVC though...much more straightforward

Calling an ASP.NET server side method via jQuery

score 0 · Answer 3 · answered Jul 26 '12 at 15:39

0

//Controller
[HttpGet]
public JsonResult GetImageURLS() 
{
    var urls = GetUrls();
    return Json(new { urls = urls }, JsonRequest.AllowGet); 
}

//js file
$.ajax({ url : '/GetImageURLS/', success : function(e) { if (e && e.urls) {  
    var $images = $(".images");
    for (var i in e.urls) {
     $images.append('<img src="' + i.url + '" class="x" ' + ' alt="' + i.alt + '" /> ';
    }
  });

//html
<div class="images">

</div>

Try this for initial load of the images. Then call your function on them after the images are populated.

answered Jul 26 '12 at 15:39

The Internet

7,959
10
54
89

Ohhhhhhhhh I thought this was MVC. I won't touch web forms with a 10 foot pole. This should help you. http://stackoverflow.com/questions/5364343/asp-net-web-forms-json-return-result – The Internet Jul 26 '12 at 15:43
The js should still work. but I would use the WebRequest method described in the link above. – The Internet Jul 26 '12 at 15:54

Atomic Star · Answer 4 · 2012-07-26T15:46:45.660

You can use AJAX and call a webservice in your Javascript to return your image list as follows:

function LoadImages() {

var url;
url = "WebServices/wsImages.asmx/GetImageList"

$.ajax({
    type: "POST",
    url: url,
    contentType: "application/json; charset=utf-8",
    error: function (XMLHttpRequest, textStatus, errorThrown) {
        alert(textStatus);
    },
    success: function (response) {
        var imgList = response.d;
        //Loop through image list etc.
    }
});
}

access/iterate over a C# list in jQuery

4 Answers4