显示从数据库检索图像（C＃和JS）

Question

我看到已经有很多像我的主题，但经过一些研究和努力，我仍然没有找到一个可以帮助解决我的具体问题。

我已经编写了从数据库中检索图像引用的C＃代码。此代码似乎按预期工作。我还编写了应该使用提到的引用在JS页面上放置“src”的som JS代码。 JS代码肯定是问题，因为它没有做我想做的事情。我不知道如何运行这个JS代码，因为它应该在页面加载时运行，而不是在用户单击按钮或链接时运行。 的代码如下：

的htm代码：

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">  
    <script src="JS/ImageFromDB/ImageDBHandler.js" type="text/javascript"></script> 
    <asp:Literal ID="literal" runat="server"></asp:Literal> 
</asp:Content> 
    <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server"> 
     <div id="slideshow"> 
     <img id="imageView" src="" alt="" class="active" runat="server" /> 
     </div> 
    </asp:Content> 

服务器端代码：

public string LoadImagesFromDB() 
    { 
     Sql sql = new Sql(); 
     string query = "SELECT Location FROM GalleryImages"; 
     MySqlCommand cmd = sql.Command(query); 
     DataTable dt = sql.DataTable(cmd); 

     string images= "<script type=\"text/javascript\">var images= ["; 

     foreach (DataRow row in dt.Rows) 
     { 
      images+= "\"" + HttpUtility.UrlDecode(row["Location"].ToString()) + "\","; 
     } 

     images = billeder.Substring(0, billeder.Length - 1); 
     images += "];</script>"; 

     return images; 
    } 

和JS代码： 而这正是一切分崩离析我想。我不知道如何编写JS代码，以便它能够完成这项工作。 'images [this.length]的结果类似于： 'http：www.host.com/Folder/imageFile.jpg'。我很确定这是错误的，但我不知道该写什么。我很惊讶，图像[this.length]不返回一个数字（长度，当然这将是无用的）。

function imageSlider() {   
    $("#imageView").attr("src", images[this.length]); 
} 

---------------------------------以防万一------- ----------------------------

这里是html页面的c＃类。这个类调用从数据库进行查询的类。

private WebLogic logic = new WebLogic(); 

    public void GetImageForView() 
     { 
      string images= logic.LoadImagesFromDB(); 
      literal.Text = images; 
    //  imageView.Src = HttpUtility.UrlDecode(images); 
     } 

我真的希望你们的专家能够帮助我，我一直在为此奋斗了3天。 在此先感谢

Answer 1

您的方法似乎混乱。根据我的理解，您想要下载指向图像的网址列表，然后使用imageView图像来显示它们。首先，你至少需要基本的JS知识来理解发生了什么。我看到你已经在使用jQuery。如果遇到错误，您应该检查jQuery库是否已正确包含在您的网站中（例如http://www.dotnetcurry.com/ShowArticle.aspx?ID=231）。根据您正在使用的浏览器和计划兼容的浏览器（例如Firebug，Chrome开发人员工具，IE中的F12等），您还应该对浏览器开发工具很友善。

你可以做什么，关于你的问题，是调用你的服务器方法LoadImagesFromDB使用AJAX调用（http://weblogs.asp.net/karan/archive/2010/09/12/calling-server-side-method-using-jquery-ajax.aspx）。负责这种呼叫的功能可能看起来像这样，例如，

var getImages = function() { 
        $.ajax({ 
         type: "POST", 
         url: "YourPage.aspx/LoadImagesFromDB", 
         data: "{}", 
         contentType: "application/json; charset=utf-8", 
         dataType: "json", 
         async: true, 
         cache: false, 
         success: imagesUrlsReceived 
        }); 
        return false; 
       }; 

下一步需要什么修改服务器端的方法：它必须是静态的，它必须与[的WebMethod]属性装饰。更重要的是，你不包括脚本标签等。你应该返回的是一个包含你的url的字符串数组（我没有检查你的url创建过程，你可以验证这是否会自己生成正确的链接）。它可能类似于下面的代码：

public static string[] LoadImagesFromDB() 
    { 
     Sql sql = new Sql(); 
     string query = "SELECT Location FROM GalleryImages"; 
     MySqlCommand cmd = sql.Command(query); 
     DataTable dt = sql.DataTable(cmd); 

     string[] images = new string[dt.Rows.Count]; 

     for(int i = 0; i < dt.Rows.Count;i++) 
     { 
      images[i] = HttpUtility.UrlDecode(dt.Rows[i]["Location"].ToString()); 
     } 

     return images; 
    } 

现在你需要节省客户端的JavaScript变量从服务器（URL字符串数组）返回的结果。你可以这样做，例如在文档上使用jQuery的ready事件。你所做的是：你触发getImages（），在imagesUrlsReceived中填充图像变量和结果。

var images = []; 

var imagesUrlsReceived = function(results) { 
    if (results === undefined) { 
     alert('Something went wrong while returning results from server!'); 
     return; 
    } 

    for (var i in results) { 
     images.push(results[i]); 
    } 
}; 

$(document).ready(function() { 
    getImages(); 
}); 

而现在是最重要的部分。你的电话（至少在这个小信息），说明

function imageSlider() {   
    $("#imageView").attr("src", images[this.length]); 
} 

现在没有多少意义。您应该阅读关于范围和这在JavaScript中（例如http://javascriptplayground.com/blog/2012/04/javascript-variable-scope-this/）。我想你想从图片列表中显示一张图片。为了显示例如从列表中第一张图片，你可以做这样的：

function showFirstImage() {   
    $("#imageView").attr("src", images[0]); 
} 

当然，这也不是我们可以想到的最通用的解决方案，这就是为什么我们可以这样实现：

function imageSlider(imageNum) {   
    $("#imageView").attr("src", images[imageNum]); 
} 

哪里imageNum是图像数组中图像的基于0的索引。值得一提的是imageSlider函数应该在图像变量被从服务器下载的URL填充之前调用。否则图像变量保持空白。

除了我所描绘的内容之外，还有很多事情要做。你应该注意可能的错误（如果我传递字符串而不是数字作为imageNum，如果imageNum为null或未定义，或者imageNum超出范围，例如小于0或大于images.length，会怎么样？） 。

但是，我想我已经给了你一个粗略的计划，应该采取什么样的行动在这种情况下。我不保证将其剪下并粘贴代码，它只是用作插图和指导，而不是完整的解决方案。