javascript - 显示从数据库中检索到的图像(C# 和 JS)

Question

我看到已经有很多主题与我的相似，但经过一番研究和努力，我仍然没有找到有助于解决我的特定问题的主题。

我编写了从数据库中检索图像引用的 C# 代码。此代码似乎按预期工作。我还编写了 som JS 代码，应该使用提到的引用在 html 页面上放入“src”。 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'。我很确定这是错误的，但我不知道在那里写什么。我很惊讶 images[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

你的方法看起来很困惑。据我了解，您想下载指向图像的 url 列表，然后使用 imageView 图像显示它们。首先，您至少需要基本的 JS 知识才能理解正在发生的事情。我看到您已经在使用 jQuery。如果遇到错误，您应该检查 jQuery 库是否正确包含在您的网站中(例如 http://www.dotnetcurry.com/ShowArticle.aspx?ID=231)。您还应该根据您正在使用和计划兼容的浏览器来熟悉浏览器开发工具(例如 Firebug、Chrome 开发工具、IE 中的 F12 等)。

关于您的问题，您可以做的是使用 AJAX 调用 (http://weblogs.asp.net/karan/archive/2010/09/12/calling-server-side-method-using-jquery-ajax.aspx) 调用您的服务器方法 LoadImagesFromDB。负责此类调用的函数可能如下所示，例如

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] 属性修饰。更重要的是，您不包括脚本标签等。您应该返回的只是一个包含您的网址的字符串数组(我没有检查您的网址创建过程，您可以自行验证这是否生成了正确的链接)。它可能类似于以下代码:

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

现在您需要将服务器返回的结果(URL 字符串数组)保存在客户端的 JavaScript 变量中。你可以这样做，例如在文档上使用 jQuery 的就绪事件。您要做的是:触发 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 中阅读 scope 和 this (例如 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 函数的调用时间不得早于 images 变量填充从服务器下载的 URL 时。否则图像变量保持为空。

除了我草拟的内容外，这里还有很多事情要做。您应该注意可能的错误(如果我将字符串而不是数字作为 imageNum 传递，如果 imageNum 为空或未定义，或者 imageNum 超出范围，例如小于 0 或大于 images.length 怎么办？) .

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