ComponentOne Gallery for ASP.NET Web Forms
Task-Based Help / Data Binding the Gallery
In This Topic
    Data Binding the Gallery
    In This Topic
    Show All
    Hide All

    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.