1

私のようなトピックがすでにたくさんあるようですが、調査と努力の結果、特定の問題を解決するのに役立つトピックはまだ見つかりません。

データベースから画像参照を取得する C# コードを作成しました。このコードは期待どおりに動作するようです。また、前述の参照を使用してhtmlページに「src」を配置する必要があるsom JSコードも作成しました。私がやろうとしていることをしないので、JSコードは確かに問題です。ユーザーがボタンやリンクをクリックしたときではなく、ページの読み込み時に実行する必要があるため、この JS コードを実行する方法がわかりません。コードは次のとおりです。

HTML コード:

<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日間連続で苦労しています。前もって感謝します

4

1 に答える 1

2

あなたのアプローチは混沌としているようです。私が理解していることから、画像を指す URL のリストをダウンロードし、imageView 画像を使用してそれらを表示したいと考えています。まず第一に、何が起こっているのかを理解するには、少なくとも基本的な JS の知識が非常に必要です。すでに jQuery を使用していることがわかりました。エラーが発生した場合は、jQuery ライブラリが Web サイトに適切に含まれているかどうかを確認する必要があります (例: http://www.dotnetcurry.com/ShowArticle.aspx?ID=231 )。また、使用しているブラウザーと互換性を計画しているブラウザーに応じて、ブラウザー開発者ツールに慣れる必要があります (例: Firebug、Chrome 開発者ツール、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 のスコープと 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 は、images 配列内のイメージの 0 ベースのインデックスです。言及する価値があるのは、imageSlider 関数は、images 変数がサーバーからダウンロードされた URL で満たされる前に呼び出されてはならないということです。それ以外の場合、images 変数は空のままです。

私がスケッチしたこととは別に、ここでやるべきことはたくさんあります。起こりうるエラーに注意する必要があります (imageNum として数値の代わりに文字列を渡す場合、imageNum が null または未定義の場合、または imageNum が範囲外 (0 未満または images.length より大きいなど) の場合はどうなりますか?) .

しかし、この場合、どのような行動を取るべきかについては、大まかな計画を示したと思います。これがカット アンド ペースト コードであることを保証するものではありません。完全な解決策ではなく、説明とガイダンスとしての役割を果たします。

于 2013-08-05T08:05:11.727 に答える