显示从数据库检索的图像（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 image显示它们。 首先，您非常需要至少基本的JS知识来了解正在发生的事情。 我看到您已经在使用jQuery。 如果遇到错误，则应该检查jQuery库是否正确包含在您的网站中（例如http://www.dotnetcurry.com/ShowArticle.aspx?ID=231 ）。 您还应该根据所使用的浏览器并计划与之兼容来使用浏览器开发人员工具（例如Firebug，Chrome Developer工具，IE中的F12等）。

对于您的问题，您可以做的是使用AJAX调用来调用服务器方法LoadImagesFromDB（ 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;
    }

现在，您需要将服务器返回的结果（URL字符串数组）保存在客户端的JavaScript变量中。 您可以做到这一点，例如在文档上使用jQuery的ready事件。 您要做的是：触发getImages（）并在imagesUrlsReceived中用结果填充images变量。

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是images数组中图像的从0开始的索引。 值得一提的是，应不早于从服务器下载的URL填充images变量时调用imageSlider函数。 否则，images变量保持为空。

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

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