-2

Webページに画像要素を作成しました。データベースから画像のURLを抽出していて、画像要素のURLをそれぞれ5秒間隔でこれらの値に設定したいと考えています。

どうすればこれを達成できますか？

これが私のサンプルコードです...

RollingScreenBAL bal = new RollingScreenBAL();
DetailsForSlideShow[] details = bal.GetDetailsForSlideShow(username);
foreach (DetailsForSlideShow detail in details)
{
    imgSlideShow.Attributes["src"] = ResolveUrl(detail.GraphUrl);
    Thread.Sleep(detail.TimeInterval);
}

上記のコードにより、データベースから取得した最初の値に対してのみ画像のURLを設定できます。

4

2 に答える 2

0

すべての画像リンクをデータテーブルにロードして、セッションに入れることができます。次に、ajax更新パネルとajaxタイマーをWebページに追加します。タイマー間隔を5000に設定し、各コールバックで1行のテーブルを読み取ります。

于 2012-11-10T15:53:50.337 に答える
0

あなたが説明していることは、拡張された永続的な通信を使用するサーバーからの「プッシュロジック」を備えたクライアントサーバーのように見えます。これは、Webで作業を開始することはできません。最後に、ページ処理中にスリープイベントを使用する場合、特定の理由（つまり、特定のリソースが利用可能になるのを待つ）がない限り、常に良い考えとは限りません。ajax更新パネルを使用している場合でも、イベントをトリガーするのは常にクライアントであり、サーバーにつながります。

スライドショーを作成するには、多くのオプションがあります。そのうちの2つを紹介しますが、すぐに使用できるプラグインを使用することもできます。ウェブ上にはたくさんの例があり、それらを検索するだけです。

1-迅速で汚い解決策ですが、画像の数が少ないことを願っています。dbコンテンツに基づいてjavascript配列を作成し、単純なスライドショーjavascript用に静的に作成されたかのように使用し、SetIntervaljs関数を使用して変更させることができます。

c＃コード：

//
// ... this is your code
//
RollingScreenBAL bal = new RollingScreenBAL();
DetailsForSlideShow[] details = bal.GetDetailsForSlideShow(username);

string script = "var myimg = new Array();\n";
int i=0;
foreach (DetailsForSlideShow detail in details)
{
  script += "myimg[" + i.ToString() + "] = \"" + ResolveUrl(detail.GraphUrl) + "\";\n";
}
Page.ClientScript.RegisterClientScriptBlock(typeof(string), "arraykey", script, true);

ウェブページ：

[...]
<div id="mydiv"><img src="" alt="" /></div>
[...]

これにより、Webページが次のようにレンダリングされます。

var myimg = new Array();
myimg[0] = "/path/img0.jpg";
myimg[1] = "/path/img1.jpg";
myimg[2] = "/path/img2.jpg";
[...]

後でjavascriptで使用/循環できるもの：

var curimg=0;
function slideshow() {
    document.getElementById("mydiv").getElementsByTagName("img")[0].src = myimg[curimg];
    curimg++;
    if(curimg >= myimg.length) curimg=0;  //Restart from first image
}

次に、HTMLの最後に（または本文のonloadイベントで）スクリプトを使用してスライドショーを開始します

  setTimeout(slideshow, 5000);

注：前に示したように、c＃RegisterClientScriptBlockでこのスクリプトを生成/追加することもできます。毎回、「arraykey」の値を変更するだけです。詳細はこちら： http： //msdn.microsoft.com/it-it/library/bahh2fef%28v=vs.80%29.aspx

2-より良い解決策は、jqueryのajaxメソッドを使用して、ac＃webメソッドから「次の画像」を取得することです。

ウェブページ：

[...]
<div id="mydiv"><img src="" alt="" /></div>
[...]

javascriptコード：

function slideshow() {
  $.ajax({
    type: "GET",
    contentType: "application/json; charset=utf-8",
    url: "/ajax.aspx/GetNextImage",
    dataType: "json",
    success: function (data) {
      //this changes the image on the web page
      $('#mydiv img').attr("src", data.d);

      //fires another sleep/image cycle
      setTimeout(slideshow(), 5000);
    },
    error: function (result) {
      alert(result.message);
    }
  });
}

$(document).ready(function () {
  //Kicks the slideshow
  slideshow();
});

csコード：

[WebMethod]
public static string GetNextImage()
{
  //
  // ... this is your code
  //
  RollingScreenBAL bal = new RollingScreenBAL();
  DetailsForSlideShow[] details = bal.GetDetailsForSlideShow(username);

  //Someway get next image you need to display
  //So I assume you get 1 record only (from DB?)
  DetailsForSlideShow detail = details[0];

  //Last you can save last sent image name or index as per user...
  //I.e. you could use a Session variable, or move also this logic
  //to client side
  [...]

  //Send back to jquery call the image url
  return ResolveUrl(detail.GraphUrl);
}

注：jqueryとは何かがわからない場合は、Webで検索してください。これは、javascriptを使用するのに大いに役立つと確信しています。

于 2012-11-10T22:32:46.763 に答える