Create a Tab|UI Control for ASP.NET AJAX, C#, VB.NET

Tab Getting Started in ASP.NET AJAX

Home > How to > TabControl Getting Start

In this page, we will provide you with step by step guidance on how to integrate Kettic tab control into your Visual C# or Visual Basic .NET ASP.NET AJAX web to create a custom tab. This page will only focus on the simple steps to create a basic tab, if you need to adjust the properties further, you can check out the recommended user manuals for customization.

Before you view the coming sections for tab control integration and customization, please verify that you have installed:

Microsoft .NET Framework 4.0, 4.5 or above version
Microsoft Visual Studio 2010, Visual Studio 2012 or Visual Studio 2013 version

Create an ASP.NET Web Application

In this section, we will provide you with guidance to create a simple Visual C# or Visual Basic .NET ASP.NET web application, which can be used to add a tab later on.

Open up your Microsoft Visual Studio 2010 File menu, and then select "New | Web Site".
In the pop up window, please select "ASP.NET Web Site" and then input a file name and location path as you like it.
Now an ASP.NET web site is successfully created in your MS Visual Studio!

Integrate Tab Control into Web Page

Now in this section, we will show you how to easily integrate Kettic tab control into your ASP.NET web application with a simple drag and drop. Please read the steps below to learn how.

Go to your Microsoft Visual Studio ToolBox, drag an AjaxPanel component and then drop it to the target web page which you have created in the previous section.
Now drag the Kettic tab control from your VS ToolBox and drop to the AjaxPanel that you have added in the previous step.
Now it is done. You have successfully added Kettic tab control into your AJAX web application.

Tab Control Customization in ASP.NET

The guidance above illustrates how to integrate and add a basic tab into your ASP.NET AJAX web application. And in this section, we will show you how to easily customize your tab control properties to create a custom tab.

First please click on your tab control's SmartTag in the Design View of the default web page.
Now please click on the Edit Item, and a property window will pop up.
In this property window, you can customize all kinds of properties for your tab as you wish.
After your customization, you can simply save the changes and then run the application to view the result.

We also provide detailed tab element guiding page for your reference, which includes detailed introduction to all the properties for a tab, such as Text, Value, and so on. You can go to specific tutorial page to learn more about it.

ASP.NET AJAX UI Controls

ASP.NET AJAX TabControl UI Control

Overview

Getting Started

Elements Templates

Features

Drag to Reorder Scrolling Data Binding

Client Prpgramming

TabControl Event

Server Prpgramming

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