顯示從數據庫檢索圖像（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，會怎麼樣？） 。

但是，我想我已經給了你一個粗略的計劃，應該採取什麼樣的行動在這種情況下。我不保證將其剪下並粘貼代碼，它只是用作插圖和指導，而不是完整的解決方案。