Question

我正在尝试制作一个图片库，图片淡入淡出。我已经覆盖了那部分，但到目前为止，我在.aspx页面中对图像URL进行了硬编码。我不想要这个，我需要它是动态的。

 <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>

这使得图像淡入淡出，这很好，但正如您所看到的，我在这个例子中对图像进行了硬编码。我不能将它用于我的申请。

我想做的是以下内容：我想将List<string>（代码隐藏）传递给jQuery脚本，该脚本将遍历列表并替换图像的源URL。

我只想在jQuery脚本中执行类似的操作（伪代码）：

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

我尝试过使用<%=%>服务器标签，等等但无济于事。我已经阅读了很多东西，但是对于我想要达到的目标而言，它们看起来都过于复杂了。

Answer 1

为什么每个人都强迫你使用AJAX？无需在单独的HTTP请求中加载图像列表。我假设您的代码来自某些aspx页面。因此，您可以在此Pages的类（我们称之为GetImages()）中提供一个公共方法，该类返回一个看起来像JavaScript数组的字符串。即。

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

然后在你的JavaScript代码中（也放在这个页面的aspx文件中）你可以用经典的ASP语法调用Page的类的公共方法：

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

最终会打印出来：

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

这是我相信你期望的结果。

Answer 2

您可以将 Web方法添加到可由AJAX调用的aspx页面（代码隐藏）中。您的代码隐藏方法将以JSON格式返回包含图像URL的字符串（以便JQuery知道如何迭代它开箱即用）。

看看这个帖子，了解如何在aspx代码后面的文件中创建一个web方法。我通过asp.net MVC做到了......虽然......更直接

Calling an ASP.NET server side method via jQuery

Answer 3

//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>

尝试初始加载图像。然后在填充图像后调用它们的功能。

Answer 4

您可以使用AJAX并在Javascript中调用webservice来返回您的图像列表，如下所示：

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.
    }
});
}

访问/遍历jQuery中的C＃列表

4 个答案: