ListView Data Binding with DataSource|UI Control for ASP.NET AJAX, C#, VB.NET

ListView Data Binding with DataSource in ASP.NET

Home > How to > ListView Data Binding DataSource

Since most of the time developers need to add list view in their ASP.NET AJAX UI projects for displaying a number of items with predefined layout or customized one, it is quite natural that at times you might need to apply data binding for your listview control.

In this guiding page, we will provide you with a step by step introduction of how you can easily bind your listview control to data source in ASP.NET AJAX application. Currently we support several data binding scenarios for ASP.NET DataSource controls:

Easily bind your listview control to SqlDataSource;
Easily bind your listview control to LinqDataSource;
Easily bind your listview control to SqlDataSource;
Some other commonly used data sources are also supported.

Get Started for ListView Data Binding

In order to bind your listview control to one of the data sources introduced in the above list, all you need to do is simply set DataSourceID property and corresponding binding expressions.

DataSourceID is basic property which you should inevitably encounter when setting data binding for your control, like listview in this case. You can just set the DataSourceID of your designing listview to the ID of the Data Source control which you want to bind to. Simple as that.

Once the related DataSourceID is set properly, it is time for you to resort to corresponding ASP.NET binding expressions so that the desired value will display in the concerning listview field.

ListView Data Binding for LinqDataSource

LinqDataSource is one of the ASP.NET 3.5 DataSource supported by Kettic ListView UI control for Asp.NET AJAX. By binding your listview control to LinqDataSource, the Language Integrated Query (LINQ) get exposed to web developers and thus enabling the data quering and updating for your listview.

Below is a complete sample of aspx code snippet for ListView data binding to LinqDataSource. Please feel free to copy to your project or make modification before that.

<kettic:PerListView ID="PerListView1" DataSourceID="LinqDataSource1" runat="server"
            ItemPlaceholderID="ProductItemContainer" DataKeyNames="CategoryID">
            <ItemTemplate>
                <fieldset style="float: left; width: 280px; height:85px">
                    <legend>Category name:
                        <%# Eval("CategoryName") %></legend>
                    <table cellpadding="0" cellspacing="0">
                        <tr>
                            <td style="width: 75%">
                                <table cellpadding="0" cellspacing="0">
                                    <tr>
                                        <td>
                                            <%# Eval("Description")%>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                            <td align="right" style="width: 25%">
                                <kettic:PerBinaryImage ID="PerBinaryImage1" runat="server" AlternateText="Category Photo"
                                    Style="margin-left: 10px" ToolTip="Category Photo" Width="90px" Height="110px"
                                    ResizeMode="Fit" DataValue='<%# Eval("Picture") == DBNull.Value? new System.Byte[0]: Eval("Picture") %>'>
                                </kettic:PerBinaryImage>
                            </td>
                        </tr>
                    </table>
                </fieldset>
            </ItemTemplate>
        </kettic:PerListView>

<asp:LinqDataSource ID="LinqDataSource1" runat="server" ContextTypeName="PerAspNetAjaxControlsSample.LinqAndEntity.LinqToSql.NorthwindDataContext"
            TableName="Categories">
        </asp:LinqDataSource>

ListView Data Binding for EntityDataSource

The second sample we provide for you here is a complete aspx code snippet for Kettic ListView control data binding to EntityDataSource. In the demo, you can see easily that we have set the DataSourceID to EntityDataSource1 first, and after that we proceed with further data binding customization. Please copy to your application for evaluation and make any adjustment as you see fit.

<kettic:PerListView ID="PerListView2" runat="server" DataSourceID="EntityDataSource1"
            ItemPlaceholderID="ProductsHolder">
            <ItemTemplate>
                <div style="float: left">
                    <table cellpadding="0" cellspacing="0" style="width: 230px">
                        <tr>
                            <td style="width: 20%;">
                                Name:
                            </td>
                            <td style="width: 80%; padding-left: 5px;">
                                <%# Eval("ProductName") %>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                Quantity:
                            </td>
                            <td style="width: 80%; padding-left: 5px;">
                                <%# Eval("QuantityPerUnit") %>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                Price:
                            </td>
                            <td style="width: 80%; padding-left: 5px;">
                                <%# DataBinder.Eval(Container.DataItem, "UnitPrice", "{0:C}") %>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                Units:
                            </td>
                            <td style="width: 80%; padding-left: 5px;">
                                <%# Eval("UnitsInStock") %>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                Available:
                            </td>
                            <td style="width: 80%; padding-left: 5px;">
                                <%# ((bool)DataBinder.Eval(Container.DataItem,"Discontinued") == false ? "Yes" : "No") %>
                            </td>
                        </tr>

ASP.NET AJAX UI Controls

ASP.NET AJAX ListView UI Control

Overview Getting Started Templates

Features

Paging Sorting Selecting Grouping Filtering

Data Binding

DataSource Data

ASP.NET AJAX ToolBar UI Control ASP.NET AJAX TabControl UI Control ASP.NET AJAX Menu UI Control ASP.NET AJAX ToolTip UI Control