0

画像リストをバインドするために GridView を使用したいと考えていました。これは既に実行できますが、グリッドの幅を制御する必要があります。

それがテーブルの場合、次のように簡単になります。

<table>
    <tr>
        <td>Image 1</td>
        <td>Image 2</td>
        <td>Image 3</td>
    </tr>
    <tr>
        <td>Image 4</td>
        <td>Image 5</td>
        <td>Image 6</td>
    </tr>
    <tr>
        <td>Image 7</td>
        <td>Image 8</td>
        <td>Image 9</td>
    </tr>
</table>

「グリッドビュー」に実際の列などを持たないようにしたいのですが、データベースからのテキスト記述子が下にあるだけの写真です。これはリピーター制御の方が良いですか？

4

3 に答える 3

1

コントロールを使用しDataListます。コントロールにはと DataList呼ばれる非常に便利なプロパティがあり、必要なことを行うことができます。RepeatColumnsRepeatLayout

マークアップ:

<asp:DataList ID="DataList1" runat="server" RepeatColumns="3">
    <ItemTemplate>
    <img src="<%#Eval("url") %>" />
    </ItemTemplate>
</asp:DataList>

サンプルクラス:

public class Sample
{
    public string url { get; set; }
}

バインディング DataList :

protected void Page_Load(object sender, EventArgs e)
{
    List<Sample> samples = new List<Sample>();
    samples.Add(new Sample() { url = "http://www.google.com/images/srpr/logo4w.png" });
    samples.Add(new Sample() { url = "http://www.google.com/images/srpr/logo4w.png" });
    samples.Add(new Sample() { url = "http://www.google.com/images/srpr/logo4w.png" });
    samples.Add(new Sample() { url = "http://www.google.com/images/srpr/logo4w.png" });
    samples.Add(new Sample() { url = "http://www.google.com/images/srpr/logo4w.png" });
    samples.Add(new Sample() { url = "http://www.google.com/images/srpr/logo4w.png" });

    this.DataList1.DataSource = samples;
    this.DataList1.DataBind();

}

Result : 2 行 3 列の HTML テーブルで、それぞれに Google 画像が表示されます。

<table id="Table1" cellspacing="0" style="border-collapse: collapse;">
    <tr>
        <td>
            <img src="http://www.google.com/images/srpr/logo4w.png" />
        </td>
        <td>
            <img src="http://www.google.com/images/srpr/logo4w.png" />
        </td>
        <td>
            <img src="http://www.google.com/images/srpr/logo4w.png" />
        </td>
    </tr>
    <tr>
        <td>
            <img src="http://www.google.com/images/srpr/logo4w.png" />
        </td>
        <td>
            <img src="http://www.google.com/images/srpr/logo4w.png" />
        </td>
        <td>
            <img src="http://www.google.com/images/srpr/logo4w.png" />
        </td>
    </tr>
</table>
于 2013-04-03T21:04:27.590 に答える
0

リストビューのアイテムテンプレート内でデータリストまたはリピーターを使用でき、リストビューのレイアウトテンプレートで任意のレイアウト、div ベース、テーブル、またはソートされていないリストを作成できます

于 2013-04-04T06:00:21.653 に答える
0

あなたの質問の私の理解では、画像を表以外の形式で出力したいと考えています。

DataListコントロールには、生活を楽にする機能が組み込まれています。すなわち、RepeatColumns、およびRepeatLayout。@Hanletの答えはこれを非常によく説明しています。あなたの質問に対する私の理解から、彼の答えの問題は、彼が表として出力する方法しか示していないことです。前に説明したように、これはあなたが探しているものではありません。は、別の方法で出力を表示DataList できRepeatLayout="Flow"ます。このアプローチの潜在的な問題は、レイアウトが固定されていることです。表示方法を変更することはできません。<span>と<br />タグを使用してデータを表示します。これは CSS を使用してスタイルを設定できますが、それでも多少の制限があります。Flow代わりに選択した場合、Hanletの回答からの出力は次のようになりますTable:

<div>
    <span id="DataList1">
       <span>
          <img src="http://www.google.com/images/srpr/logo4w.png" />
       </span>
       <span>
          <img src="http://www.google.com/images/srpr/logo4w.png" />
       </span>
       <span>
          <img src="http://www.google.com/images/srpr/logo4w.png" />
       </span>
    <br />
       <span>
          <img src="http://www.google.com/images/srpr/logo4w.png" />
       </span>
       <span>
          <img src="http://www.google.com/images/srpr/logo4w.png" />
       </span>
       <span>
          <img src="http://www.google.com/images/srpr/logo4w.png" />
       </span>
    </span>
 </div>

Repeaterそうは言っても、が提供するレイアウトを無制限に制御したい場合は、これを行う方法があります。2つを使用Repeaters：

aspx コード:

<asp:Repeater ID="rptRows" runat="server" OnItemDataBound="rptRows_ItemDataBound"> 
    <ItemTemplate>
        <asp:Repeater ID="rptItems" runat="server">
            <ItemTemplate>
                <img width="30px" src="<%#Eval("url") %>" />
            </ItemTemplate>
        </asp:Repeater>
        </br>
       </ItemTemplate>
</asp:Repeater>

コード ビハインド:

public class ImageEntity
{
    public string url { get; set; }
}

public partial class DataListSample : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        List<Tuple<ImageEntity, ImageEntity, ImageEntity>> listTuples = new List<Tuple<ImageEntity, ImageEntity, ImageEntity>>();
        listTuples.Add(new Tuple<ImageEntity, ImageEntity, ImageEntity>(new ImageEntity() { url = "http://www.google.com/images/srpr/logo4w.png" }, new ImageEntity() { url = "http://www.google.com/images/srpr/logo4w.png" }, new ImageEntity() { url = "http://www.google.com/images/srpr/logo4w.png" }));
        listTuples.Add(new Tuple<ImageEntity, ImageEntity, ImageEntity>(new ImageEntity() { url = "http://www.google.com/images/srpr/logo4w.png" }, new ImageEntity() { url = "http://www.google.com/images/srpr/logo4w.png" }, new ImageEntity() { url = "http://www.google.com/images/srpr/logo4w.png" }));
        listTuples.Add(new Tuple<ImageEntity, ImageEntity, ImageEntity>(new ImageEntity() { url = "http://www.google.com/images/srpr/logo4w.png" }, new ImageEntity() { url = "http://www.google.com/images/srpr/logo4w.png" }, new ImageEntity() { url = "http://www.google.com/images/srpr/logo4w.png" }));
        listTuples.Add(new Tuple<ImageEntity, ImageEntity, ImageEntity>(new ImageEntity() { url = "http://www.google.com/images/srpr/logo4w.png" }, new ImageEntity() { url = "http://www.google.com/images/srpr/logo4w.png" }, new ImageEntity() { url = "http://www.google.com/images/srpr/logo4w.png" }));
        this.rptRows.DataSource = listTuples;
        this.rptRows.DataBind();
    }

    protected void rptRows_ItemDataBound(object sender, RepeaterItemEventArgs e)
    {
        if (e.Item.ItemType == ListItemType.AlternatingItem || e.Item.ItemType == ListItemType.Item)
        {
            Repeater rptItems = (Repeater)e.Item.FindControl("rptItems");
            Tuple<ImageEntity, ImageEntity, ImageEntity> items = (Tuple<ImageEntity, ImageEntity, ImageEntity>)e.Item.DataItem;
            rptItems.DataSource = new List<ImageEntity>() { items.Item1, items.Item2, items.Item3 };
            rptItems.DataBind();
        }
    }
}

基本的に、ここで行っているのは、URL のリストを List of に分割することですTuples。の長さはList、外側の「行」の数ですRepeater。のエンティティの数はTuple、内側の Repeater の「列」の数です。

Repeaterアイテムをアウター( )にバインドするたびrptRows_ItemDataBoundに、インナーのデータソースをRepeater新しく生成された URL エンティティのリスト( ) に設定しますImageEntity。

これが十分に明確であるかどうか教えてください。不明な点があれば喜んで拡大して明確にします。

于 2013-04-03T23:35:54.773 に答える