Gallery for ASP.NET Web Forms
ギャラリーのデータバインディング
タスク別ヘルプ > ギャラリーのデータバインディング
全て展開
すべて折りたたむ

C1Galleryは、画像 URL、キャプション、およびリンクフィールドをバインドしたり、任意のデータをテンプレートにバインドしたりできるデータバインディングをサポートします。 データバインディングでは、以下のプロパティを任意に設定できます。

この例では、ギャラリーにデータをバインドします。 以下の手順を実行します。

  1. ソースビューで、次のように <cc1:C1Gallery>マークアップを編集します。
    ソースビュー
    コードのコピー
    <cc1:C1Gallery ID="C1Gallery1" runat="server" ShowTimer="True" Width="750px" Height="416px" ThumbsDisplay="4">
    </cc1:C1Gallery>

    これはギャラリーコントロールをカスタマイズします。

  2. ページを右クリックして［コードの表示］を選択し、切り替えてコードエディタを開きます。
  3. 次のコードを初期クラスに追加します。

    Visual Basic コードの書き方

    Visual Basic
    コードのコピー 
    Private Const TEXT As String = "{0} Vestibulum venenatis faucibus eros, vitae vulputate ipsum tempor ut. Donec ut ligula a metus volutpat sagittis. Duis sodales, lorem nec suscipit imperdiet, sapien metus tempor nibh, dapibus pulvinar lorem lacus molestie lacus. "

    C# コードの書き方

    C#
    コードのコピー 
    private const string TEXT = "{0} Vestibulum venenatis faucibus eros, vitae vulputate ipsum tempor ut. Donec ut ligula a metus volutpat sagittis. Duis sodales, lorem nec suscipit imperdiet, sapien metus tempor nibh, dapibus pulvinar lorem lacus molestie lacus. ";

  4. 次のコードを Page_Load イベントに追加します。

    Visual Basic コードの書き方

    Visual Basic
    コードのコピー 
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
       If Not IsPostBack OrElse IsCallback Then
            bind()
        End If
End Sub

    C# コードの書き方

    C#
    コードのコピー 
    protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack || IsCallback)
    {
        bind();
    }
}
  5. メインクラス内の Page_Load イベントの直下に次のコードを追加します。

    Visual Basic コードの書き方

    Visual Basic
    コードのコピー 
    Private Sub bind()
    Dim list1 As List(Of ContentGallery) = GetDataSource("http://lorempixum.com/200/150/sports/{0}", "http://lorempixum.com/750/300/sports/{0}")
    C1Gallery1.DataSource = list1
    C1Gallery1.DataImageUrlField = "ImgUrl"
    C1Gallery1.DataLinkUrlField = "LinkUrl"
    C1Gallery1.DataCaptionField = "Caption"
    C1Gallery1.DataBind()
End Sub

    C# コードの書き方

    C#
    コードのコピー 
    private void bind()
{
    List list1 = GetDataSource("http://lorempixum.com/200/150/sports/{0}", "http://lorempixum.com/750/300/sports/{0}");
    C1Gallery1.DataSource = list1;
    C1Gallery1.DataImageUrlField = "ImgUrl";
    C1Gallery1.DataLinkUrlField = "LinkUrl";
    C1Gallery1.DataCaptionField = "Caption";
    C1Gallery1.DataBind();
}

    このコードはギャラリーのデータバインディングを設定します。

  6. 次のコードをメインクラスに追加します。

    Visual Basic コードの書き方

    Visual Basic
    コードのコピー 
    Private Function GetDataSource(urlFormatStr As String, linkFormatStr As String) As List(Of ContentGallery)
    Dim list As New List(Of ContentGallery)()
    For i As Integer = 1 To 10
        list.Add(New ContentGallery() With { _
        .Content = String.Format(TEXT, String.Format("{0}.The picture one, ", i.ToString())), _
        .LinkUrl = String.Format(linkFormatStr, i.ToString()), _
        .ImgUrl = String.Format(urlFormatStr, i.ToString()), _
        .Caption = String.Format("Pic {0}", i.ToString()) _
        })
    Next
    Return list
End Function

    C# コードの書き方

    C#
    コードのコピー 
    private List GetDataSource(string urlFormatStr, string linkFormatStr)
{
    List list = new List();
    for (int i = 1; i < 11; i++)
    {
        list.Add(new ContentGallery()
        {
            Content = string.Format(TEXT, string.Format("{0}.The picture one, ", i.ToString())),
            LinkUrl = string.Format(linkFormatStr, i.ToString()),
            ImgUrl = string.Format(urlFormatStr, i.ToString()),
            Caption = string.Format("Pic {0}", i.ToString())
        });
    }
    return list;
}

    このコードはギャラリーにコンテンツを追加します。

  7. 次のクラスコードをメインクラスの直下に追加します。

    Visual Basic コードの書き方

    Visual Basic
    コードのコピー 
    Public Class ContentGallery
Public Property Content() As String
        Get
            Return m_Content
        End Get
        Set(value As String)
            m_Content = Value
        End Set
End Property
Private m_Content As String
    Public Property ImgUrl() As String
        Get
            Return m_ImgUrl
        End Get
        Set(value As String)
            m_ImgUrl = value
        End Set
End Property
Private m_ImgUrl As String
Public Property LinkUrl() As String
        Get
            Return m_LinkUrl
        End Get
        Set(value As String)
            m_LinkUrl = value
        End Set
End Property
Private m_LinkUrl As String
Public Property Caption() As String
        Get
            Return m_Caption
        End Get
        Set(value As String)
            m_Caption = value
        End Set
End Property
Private m_Caption As String
End Class

    C# コードの書き方

    C#
    コードのコピー 
    public class ContentGallery
{
    public string Content
    { get; set; }
    public string ImgUrl
    { get; set; }
    public string LinkUrl
    { get; set; }
    public string Caption
    { get; set; }
}

このトピックの作業結果

アプリケーションを実行し、C1Gallery コントロールのデータがバインドされ、ギャラリーコントロールにいくつかの画像が表示されます。

 

 

Copyright © GrapeCity, Inc. All rights reserved.