Task-Based Help / Data Binding the Gallery
Data Binding the Gallery

C1Gallery supports data binding, it can bind image URL, caption, and link fields, or bind any data in template. Data binding is allowed if the following properties are set:

In this example you'll data bind the gallery. Complete the following steps:

  1. In Source view, edit the <cc1:C1Gallery> markup so it appears like the following:

    <cc1:C1Gallery ID="C1Gallery1" runat="server" ShowTimer="True" Width="750px" Height="416px" ThumbsDisplay="4">

    </cc1:C1Gallery>

    This customizes the gallery control.

  2. Right-click the page and select View Code to switch to open the Code Editor.
  3. Add the following code to the initial class:

    To write code in Visual Basic

    Visual Basic
    Copy Code
    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. "
    

    To write code in C#

    C#
    Copy Code
    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. Add the following code to the Page_Load event:

    To write code in Visual Basic

    Visual Basic
    Copy Code
    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

    To write code in C#

    C#
    Copy Code
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack || IsCallback)
        {
            bind();
        }
    }
    
    
  5. Add the following code just below the Page_Load event within the main class:

    To write code in Visual Basic

    Visual Basic
    Copy Code
    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
    
    

    To write code in C#

    C#
    Copy Code
    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();
    }
    
    

    This code sets up the gallery's data binding.

  6. Add the following code within the main class:

    To write code in Visual Basic

    Visual Basic
    Copy Code
    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
    
    

    To write code in C#

    C#
    Copy Code
    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;
    }
    
    

    This code adds content to the gallery.

  7. Add the following class code just below the main class:

    To write code in Visual Basic

    Visual Basic
    Copy Code
    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
    
    

    To write code in C#

    C#
    Copy Code
    public class ContentGallery
    {
        public string Content
        { get; set; }
        public string ImgUrl
        { get; set; }
        public string LinkUrl
        { get; set; }
        public string Caption
        { get; set; }
    }
    
    

What You've Accomplished

Run the application and observe that the C1Gallery control is data bound and several images appear in the gallery control.