Quick Start: Create a ListView|UI Control for ASP.NET AJAX, C#, VB.NET

Create a Simple ListView in ASP.NET AJAX

Home > How to > ListView Getting Started

Listview is an outstanding and easy to use UI library control for ASP.NET AJAX application. In this guiding page, we will present you with some of the basic steps to integrate Kettic ListView control to your ASP.NET UI project. In general we will go through the following procedures to get it started.

Create an ASP.NET web application in the first place;
Then you need to add this ListView control to your web page;
Customize your listview properties and settings according to your requirements.

Once this Kettic ListView control is integrated into your program, you can find it so easy to customize your listview in a variety of ways, for which we have also provided detailed guidance respectively. For example, you can:

Control your item layout style for your listview by specifying a certain built-in templates;
Add all kinds of filter expressions for your listview to get desired results at ease;
Bind your listview to different types of data sources like LinqDataSource and EntityDataSource;
Control the overall look and feel of your listview and items by applying an amazing skin for it;
Easily perform paging, sorting, selecting and grouping features to your listview control.

Create An ASP.NET Web Application

In this section, we will create an ASP.NET web site first so that web developers can add and integrate listview library component to your program. Please view detailed steps below.

Open your Microsoft Visual Studio, for example, VS 2010, go to the File menu and select New Web Site;
Now in the pop up window, please select "ASP.NET Web Site" and enter a desired project name for it with corresponding file path. This should look like the sample screenshot below:

When it is done, an aspx page will appear and your ASP.NET web site is successfully created!

Add ListView Control to Web Page

In this section, we will simply add an AjaxPanel to your web page, and then add a listview control to the AjaxPanel. Only after this step is carried out can you proceed further with any customization and all.

Go to your MS Visual Studio Toolbox and drag an Ajax component to your default web page which you have created in the first step;
Again go to your Visual Studio Toolbox and drag your listview component and drop it to the AjaxPanel added in the previous step.

Customize ListView Properties

Now we are almost there! In this section, we will customize your listview further by data binding it to SQL data source and then add paging for it. Follow the steps below to learn how to do that. And of course, you can always add further customization by setting related properties!

Now go to the SmartTag of your PerListView. It should look like the screenshot below:

In the drop-down list which is labeled "Choose Data Source", please select "New data sourceâ¦", and then a window pops up which is a "Data Source Configuration Wizard". Please choose "SQL Database" in the Data Source Type page and click "OK".

Then click "New Connection" in the "Configure Data Source" page, as is shown in the image below:

After that, in the "Add Connection" page, select "Microsoft SQL Server Database File" for Data Source, and click "Browse" to locate the Northwind data file. Click "OK", then "Next" to finish.

Now it is to add the paging. Simply go to SmartTag and select "Enable Paging". It's done. Simple as that!

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