Introduction

Here I will explain about uses of 3-Tier architecture and how to create or implement 3-tier architecture for our project in asp.net 
Description
1.    What is the use of 3-tier architecture and why we go for that architecture? 
2.    First we need to know what 3-Tier architecture is. 
3.    How to create 3-Tier architecture for our project?

 Uses of 3-Tier Architecture
  
1.    To make application more understandable. 
2.    Easy to maintain, easy to modify application and we can maintain good look of architecture.
3.    If we use this 3-Tier application we can maintain our application in consistency manner.   
Basically 3-Tier architecture contains 3 layers
1.    Application Layer or Presentation Layer 
2.    Business Access Layer(BAL) or Business Logic Layer(BLL) 
3.    Data Access Layer(DAL)
Here I will explain each layer with simple example that is User Registration
Application Layer or Presentation Layer
Presentation layer contains UI part of our application i.e., our aspx pages or input is taken from the user. This layer mainly used for design purpose and get or set the data back and forth. Here I have designed my registration aspx page like this

This is Presentation Layer for our project Design your page like this and double click on button save now in code behind we need to write statements to insert data into database this entire process related to Business Logic Layer and Data Access Layer.
Now we will discuss about Business Access Layer or Business Logic Layer 
Business Access Layer (BAL) or Business Logic Layer (BLL)
This layer contains our business logic, calculations related with the data like insert data, retrieve data and validating the data. This acts as a interface between Application layer and Data Access Layer
Now I will explain this business logic layer with my sample
I have already finished form design (Application Layer) now I need to insert user details into database if user click on button save. Here user entering details regarding Username, password, Firstname, Lastname, Email, phone no, Location. I need to insert all these 7 parameters to database. Here we are placing all of our database actions into data access layer (DAL) in this case we need to pass all these 7 parameters to data access layers.
In this situation we will write one function and we will pass these 7 parameters to function like this
String Username= InserDetails (string Username, string Password, string Email, string Firstname, string Lastname, string phnno, string Location)
If we need this functionality in another button click there also we need to declare the parameters like string Username, string Password like this rite. If we place all these parameters into one place and use these parameters to pass values from application layer to data access layer by using single object to whenever we require how much coding will reduce think about it for this reason we will create entity layer or property layer this layer comes under sub of group of our Business Logic layer
Don't get confuse just follow my instructions enough
How we have to create entity layer it is very simple 
Right click on your project web application---> select add new item ----> select class file in wizard ---> give name as BEL.CS because here I am using this name click ok
 Open the BEL.CS class file declare the parameters like this in entity layer 
Don’t worry about code it’s very simple for looking it’s very big nothing is there just parameters declaration that’s all check I have declared whatever the parameters I need to pass to data access layer I have declared those parameters only 
BEL.CS

#region Variables
/// <summary>
/// User Registration Variables
/// </summary>
private string _UserName;
private string _Password;
private string _FirstName;
private string _LastName;
private string _Email;
private string _Phoneno;
private string _Location;
private string _Created_By;
#endregion
/// <summary>
/// Gets or sets the <b>_UserName</b> attribute value.
/// </summary>
/// <value>The <b>_UserName</b> attribute value.</value>
public string UserName
{
get
{
return _UserName;
}
set
{
_UserName = value;
}
}
/// <summary>
/// Gets or sets the <b>_Password</b> attribute value.
/// </summary>
/// <value>The <b>_Password</b> attribute value.</value>
public string Password
{
get
{
return _Password;
}
set
{
_Password = value;
}
}
/// <summary>
/// Gets or sets the <b>_FirstName</b> attribute value.
/// </summary>
/// <value>The <b>_FirstName</b> attribute value.</value>
public string FirstName
{
get
{
return _FirstName;
}
set
{
_FirstName = value;
}
}
/// <summary>
/// Gets or sets the <b>_LastName</b> attribute value.
/// </summary>
/// <value>The <b>_LastName</b> attribute value.</value>
public string LastName
{
get
{
return _LastName;
}
set
{
_LastName = value;
}
}
/// <summary>
/// Gets or sets the <b>_Email</b> attribute value.
/// </summary>
/// <value>The <b>_Email</b> attribute value.</value>
public string Email
{
get
{
return _Email;
}
set
{
_Email = value;
}
}
/// <summary>
/// Gets or sets the <b>_Phoneno</b> attribute value.
/// </summary>
/// <value>The <b>_Phoneno</b> attribute value.</value>
public string Phoneno
{
get
{
return _Phoneno;
}
set
{
_Phoneno = value;
}
}
/// <summary>
/// Gets or sets the <b>_Location</b> attribute value.
/// </summary>
/// <value>The <b>_Location</b> attribute value.</value>
public string Location
{
get
{
return _Location;
}
set
{
_Location = value;
}
}
/// <summary>
/// Gets or sets the <b>_Created_By</b> attribute value.
/// </summary>
/// <value>The <b>_Created_By</b> attribute value.</value>
public string Created_By
{
get
{
return _Created_By;
}
set
{
_Created_By = value;
}
Our parameters declaration is finished now I need to create Business logic layer how I have create it follow same process for add one class file now give name called BLL.CS. Here one point don’t forget this layer will act as only mediator between application layer and data access layer based on this assume what this layer contains. Now I am writing the following BLL.CS(Business Logic layer)

#region Insert UserInformationDetails
/// <summary>
/// Insert UserDetails
/// </summary>
/// <param name="objUserBEL"></param>
/// <returns></returns>
public string InsertUserDetails(BEL objUserDetails)
{
DAL objUserDAL = new DAL();
try
{
return objUserDAL.InsertUserInformation(objUserDetails);
}
catch (Exception ex)
{
throw ex;
}
finally
{
objUserDAL = null;
}
}
#endregion
Here if you observe above code you will get doubt regarding these
what is
BEL objUserDetails
DAL objUserDAL = new DAL();
and how this method comes
return objUserDAL.InsertUserInformation(objUserDetails);
Here BEL objUserDetails means we already created one class file called BEL.CS with some parameters have you got it now I am passing all these parameters to Data access Layer by simply create one object for our BEL class file 
What is about these statements I will explain about it in data access layer
DAL objUserDAL = new DAL();
return objUserDAL.InsertUserInformation(objUserDetails);
this DAL related our Data access layer. Check below information to know about that function and Data access layer
Data Access Layer(DAL)
Data Access Layer contains methods to connect with database and to perform insert,update,delete,get data from database based on our input data
I think it’s to much data now directly I will enter into DAL
Create one more class file like same as above process and give name as DAL.CS
Write the following code in DAL class file

//SQL Connection string
string ConnectionString = ConfigurationManager.AppSettings["LocalConnection"].ToString();
#region Insert User Details
/// <summary>
/// Insert Job Details
/// </summary>
/// <param name="objBELJobs"></param>
/// <returns></returns>
public string InsertUserInformation(BEL objBELUserDetails)
{
SqlConnection con = new SqlConnection(ConnectionString);
con.Open();
SqlCommand cmd = new SqlCommand("sp_userinformation", con);
cmd.CommandType = CommandType.StoredProcedure;
try
{
cmd.Parameters.AddWithValue("@UserName",objBELUserDetails.UserName);
cmd.Parameters.AddWithValue("@Password", objBELUserDetails.Password);
cmd.Parameters.AddWithValue("@FirstName", objBELUserDetails.FirstName);
cmd.Parameters.AddWithValue("@LastName", objBELUserDetails.LastName);
cmd.Parameters.AddWithValue("@Email", objBELUserDetails.Email);
cmd.Parameters.AddWithValue("@PhoneNo", objBELUserDetails.Phoneno);
cmd.Parameters.AddWithValue("@Location", objBELUserDetails.Location);
cmd.Parameters.AddWithValue("@Created_By", objBELUserDetails.Created_By);
cmd.Parameters.Add("@ERROR", SqlDbType.Char, 500);
cmd.Parameters["@ERROR"].Direction = ParameterDirection.Output;
cmd.ExecuteNonQuery();
string strMessage = (string) cmd.Parameters["@ERROR"].Value;
con.Close();
return strMessage;
}
catch (Exception ex)
{
throw ex;
}
finally
{
cmd.Dispose();
con.Close();
con.Dispose();
}
}
#endregion
Here if you observe above functionality I am getting all the parameters by simply creating BEL objBELUserDetails. If we create one entity file we can access all parameters through out our project by simply creation of one object for that entity class based on this we can reduce redundancy of code and increase re usability
Observe above code have u seen this function before? in BLL.CS i said i will explain it later got it in DAL.CS I have created one function InsertUserInformation and using this one in BLL.CS by simply creating one object of DAL in BLL.CS.
Here you will get one doubt that is why BLL.CS we can use this DAL.CS directly into our code behind  we already discuss Business logic layer provide interface between DAL and Application layer by using this we can maintain consistency to our application.
Now our Business Logic Layer is ready and our Data access layer is ready now how we can use this in our application layer write following code in your save button click like this

protected void btnsubmit_Click(object sender, EventArgs e)
{
string Output = string.Empty;
if (txtpwd.Text == txtcnmpwd.Text)
{
BEL objUserBEL = new BEL();
objUserBEL.UserName = txtuser.Text;
objUserBEL.Password = txtpwd.Text;
objUserBEL.FirstName = txtfname.Text;
objUserBEL.LastName = txtlname.Text;
objUserBEL.Email = txtEmail.Text;
objUserBEL.Phoneno = txtphone.Text;
objUserBEL.Location = txtlocation.Text;
objUserBEL.Created_By = txtuser.Text;
BLL objUserBLL = new BLL();
Output = objUserBLL.InsertUserDetails(objUserBEL);
}
else
{
Page.RegisterStartupScript("UserMsg", "<Script language='javascript'>alert('" + "Password mismatch" + "');</script>");
}
lblErrorMsg.Text = Output;
}
Here if you observe I am passing all parameters using this BEL(Entity Layer) and we are calling the method InsertUserDetails by using this BLL(Business Logic Layer)
Now run your applciation test with debugger you can get idea clearly

MaskedEdit Sample

|

MaskedEdit Demonstration
 
Enter a Number (format: 9,999,999.99):

Tip: Type '.' to switch

Enter Time (format: 99:99:99):

Tip: Type 'A' or 'P' to switch AM/PM

Enter Date (format: 99/99/9999):

Tip: The date format is mm/dd/yyyy for this example and a Calendar is also available for date selection

Enter Date and Time (format: 99/99/9999 99:99:99)

MaskedEdit Description
 
MaskedEdit is an ASP.NET AJAX extender that attaches to a TextBox control to restrict the kind of text that can be entered. MaskedEdit applies a "mask" to the input that permits only certain types of characters/text to be entered. The supported data formats are: Number, Date, Time, and DateTime. MaskedEdit uses the culture settings specified in the CultureName property. If none is specified the culture setting will be the same as the page: English (United States).

MaskedEdit Properties 
 
The number control above is initialized with this code. The italic properties are optional.
<ajaxToolkit:MaskedEditExtender
    TargetControlID="TextBox2" 
    Mask="9,999,999.99"
    MessageValidatorTip="true" 
    OnFocusCssClass="MaskedEditFocus" 
    OnInvalidCssClass="MaskedEditError"
    MaskType="Number" 
    InputDirection="RightToLeft" 
    AcceptNegative="Left" 
    DisplayMoney="Left"
    ErrorTooltipEnabled="True"/>
  • MaskType - Type of validation to perform:
    None - No validation
    Number - Number validation
    Date - Date validation
    Time - Time validation
    DateTime - Date and time validation
  • Mask Characters and Delimiters
    9 - Only a numeric character
    L - Only a letter
    $ - Only a letter or a space
    C - Only a custom character (case sensitive)
    A - Only a letter or a custom character
    N - Only a numeric or custom character
    ? - Any character

    / - Date separator
    : - Time separator
    . - Decimal separator
    , - Thousand separator
    \ - Escape character
    { - Initial delimiter for repetition of masks
    } - Final delimiter for repetition of masks

    Examples:
    9999999 - Seven numeric characters
    99\/99 - Four numeric characters separated in the middle by a "/"

  • AcceptAMPM - True to display an AM/PM symbol
  • AcceptNegative - True if the negative sign (-) is allowed
    None - Do not show the negative sign
    Left - Show the negative sign on the left of the mask
    Right - Show the negative sign on the right of the mask
  • AutoComplete - True to automatically fill in empty mask characters not specified by the user
    MaskType=Number - Empty mask characters will be filled with zeros
    MaskType=Time - Empty mask characters will be filled with the current time
    MaskType=Date - Empty mask characters will be filled with the current date
    MaskType=DateTime - Empty mask characters will be filled with the current date/time
  • AutoCompleteValue - Default character to use when AutoComplete is enabled
  • Century - Default century used when a date mask only has two digits for the year
  • ClearMaskOnLostFocus - True to remove the mask when the TextBox loses focus
  • ClearTextOnInvalid - True to clear the TextBox when invalid text is entered
  • ClipboardEnabled- True to allow copy/paste with the clipboard
  • ClipboardText - Prompt text to use when a clipboard paste is performed
  • DisplayMoney - Specifies how the currency symbol is displayed
    None - Do not show the currency symbol
    Left - Show the currency symbol on the left of the mask
    Right - Show the currency symbol on the right of the mask
  • ErrorTooltipCssClass - CSS class for the tooltip message
  • ErrorTooltipEnabled - True to show a tooltip message when the mouse hovers over an invalid TextBox
  • Filtered - Valid characters for mask type "C" (case-sensitive)
  • InputDirection - Text input direction
    LeftToRight - Left to Right
    RightToLeft - Right to left
  • MessageValidatorTip - Message displayed when editing in TextBox
  • PromptChararacter - Prompt character for unspecified mask characters
  • UserDateFormat - Custom date format
  • UserTimeFormat - Custom time format

  • OnFocusCssClass - CSS class used when the TextBox receives focus
  • OnFocusCssNegative - CSS class used when the TextBox gets focus with a negative value
  • OnBlurCssNegative - CSS class used when the TextBox loses focus with a negative value
  • OnInvalidCssClass - CSS class used when the text is not valid.

  • CultureName - Name of culture to use (overrides the default page culture)
  • CultureAMPMPlaceholder - Culture override
  • CultureCurrencySymbolPlaceholder - Culture override
  • CultureDateFormat - Culture override
  • CultureDatePlaceholder - Culture override
  • CultureDecimalPlaceholder - Culture override
  • CultureThousandsPlaceholder - Culture override
  • CultureTimePlaceholder - Culture override
MaskedEdit Validator Description
 
MaskedEditValidator is a custom validator which attaches to the MaskedEdit extender and its associated TextBox and verifies that the input text matches the pattern specified in the MaskedEdit extender. Once associated with a validation group, server- and client-side validation can be performed and used to display messages. 
 
MaskedEditValidator Properties
 
The control above is initialized with this code. The italic properties are optional.
<ajaxToolkit:MaskedEditValidator
    ControlExtender="MaskedEditExtender2"
    ControlToValidate="TextBox2" 
    IsValidEmpty="False" 
    MaximumValue="12000" 
    EmptyValueMessage="Number is required"
    InvalidValueMessage="Number is invalid"
    MaximumValueMessage="Number > 12000"
    MinimumValueMessage="Number < -100"
    MinimumValue="-100" 
    EmptyValueBlurredText="*" 
    InvalidValueBlurredMessage="*" 
    MaximumValueBlurredMessage="*" 
    MinimumValueBlurredText="*"
    Display="Dynamic" 
    TooltipMessage="Input a number: -100 up to 12.000"/>
  • ControlToValidate - ID of the TextBox to validate
  • ControlExtender - ID of the MaskedEditExtender attached to the TextBox

  • AcceptAMPM - Whether or not AM/PM is accepted on times.
    The default value is false.
  • ClientValidationFunction - Client script used for custom validation
  • InitialValue - Initial value of the TextBox
  • IsValidEmpty - True if the TextBox can be empty
  • MaximumValue - Maximum value of the input
  • MinimumValue - Minimum value of the input
  • ValidationExpression - Regular expression used to validate the input

  • TooltipMessage - Message displayed when the TextBox has focus with an empty value
  • EmptyValueMessage - Message displayed when empty and TextBox has focus
  • EmptyValueBlurredText - Message displayed when empty and TextBox does not have focus
  • InvalidValueMessage - Message displayed when invalid and TextBox has focus
  • InvalidValueBlurredMessage - Message displayed when invalid and TextBox does not have focus
  • MaximumValueMessage - Message displayed when maximum value exceeded and TextBox has focus
  • MaximumValueBlurredMessage - Message displayed when maximum value exceeded and TextBox does not have focus
  • MinimumValueMessage - Message displayed when minimum value exceeded and TextBox has focus
  • MinimumValueBlurredText - Message displayed when minimum value exceeded and TextBox does not have focus
MaskedEdit Known Issues 
 
Opera's keyboard handling implementation causes the "." key to map to "Del" and the "Ins" key to map to "-".

Twitter Sample

|

Twitter Demonstration
 
Displays status messages (tweets) for a Twitter account:



Displays status messages (tweets) for a Twitter account using a custom LayoutTemplate and StatusTemplate:

Displays Twitter search results for 'Ajax Control Toolkit':

Twitter Description 
 
The Twitter control is an ASP.NET AJAX control that enables you to display Twitter status messages (tweets) from Twitter.com. This control has two modes: Profile and Search. In Profile mode, you can display the latest tweets from a particular user by supplying the user's Twitter screen name. In Search mode, you can display all tweets which match a search query.

Twitter limits the number of times that you can interact with their API in an hour. Twitter recommends that you cache results on the server (https://dev.twitter.com/docs/rate-limiting). By default, the Twitter control caches results on the server a duration of 5 minutes. You can modify the cache duration by assigning a value (in seconds) to the Twitter control's CacheDuration property.

The Twitter control wraps a standard ASP.NET ListView control. You can customize the appearance of the Twitter control by modifying its LayoutTemplate, StatusTemplate, AlternatingStatusTemplate, and EmptyDataTemplate.


Twitter Properties 
 
<ajaxToolkit:Twitter 
            Mode="Profile"
            ScreenName="ScottGu" 
            runat="server" />
  • Mode - either Profile or Search mode.
  • ScreenName - required in Profile mode. The Twitter user to display.
  • Search - required in Search mode. The search to perform. You can build complex queries with search operators
  • Count - number of status messages (tweets) to display. The default value is 5.
  • CacheDuration - amount of time to cache results from Twitter in seconds. The default value is 300 seconds.
  • IncludeRetweets - in Profile mode, indicates whether retweets are displayed.
  • IncludeReplies - in Profile mode, indicates whether replies are displayed.
  • LayoutTemplate - template which contains the HTML for the root container of the ListView content.
  • StatusTemplate - template which contains each status message (tweet).
  • AlternatingStatusTemplate - template which is applied for alternating status messages (tweets).
  • EmptyDataTemplate - template which displays content when there are no tweets.
  • Title - enables you to display title text in the header. In Profile mode, the default value is the full user name.
  • Caption - enables you to display caption text in the header. In Profile mode, the default value is the user screen name.

ComboBox Sample

|

ComboBox Demonstration
 
<ajaxToolkit:ComboBox ID="ComboBox1" runat="server"
     AutoPostBack="False"
     DropDownStyle="DropDown"
     AutoCompleteMode="SuggestAppend"
     CaseSensitive="False"
     CssClass=""
     ItemInsertLocation="Append" ... >


ComboBox Description 
 
ComboBox is an ASP.NET AJAX control that, like the AutoCompleteExtender, combines the flexibility of a TextBox with a list of options that users are able to choose from. It borrows many of its properties, behaviors, and naming conventions from the Windows Forms ComboBox control, and is derived from the same base class as the ListBox, BulletedList, and DropDownList web controls. In fact, a ComboBox is best described as a DropDownList that can be typed directly into like a TextBox.

Working with a ComboBox in code is also a lot like working with a DropDownList. It has all of the same properties and events as a DropDownList, with a few additional ComboBox-specific properties and events. Firstly, it can be configured to either prevent or allow user-typed text that does not match an item in the list. When user-typed text does match an item in the list, the ComboBox can also be configured to auto-complete the text based on the first matched item in the list, to show the list and highlight the first matched item, or to do both simultaneously. When user-typed text does not match an item in the list, the ComboBox raises ItemInserting and ItemInserted events which can be handled during postback. Other than these special behaviors, the ComboBox behaves essentially like a DropDownList.

The ComboBox is intended as a supplement to, rather than a replacement for, the AutoCompleteExtender. Though there are many scenarios where either could be used to satisfy the same user interface requirements, there are scenarios where one control could offer particular advantages or disadvantages compared to the other:
  • Data Binding - The ComboBox can bind to data source controls like SqlDataSource and ObjectDataSource, and to runtime objects that implement IListSource, IEnumerable, or IDataSource. Like the DropDownList, the ComboBox also has an Items collection that can be manipulated declaratively and/or programmatically. The AutoCompleteExtender can only get its item list from a web service or page method. When it is possible and more convenient to bind to a data source control, runtime object, or declared item list, the ComboBox may be a better choice than the AutoCompleteExtender.
  • Restricting User-Typed Text - Another feature of the ComboBox is that it can restrict input so that an item in the list is always selected after a postback (as long as the Items collection is not empty). The AutoCompleteExtender allows users to type anything into the TextBox being extended, even if the typed text doesn't match any options returned by the extender's ServiceMethod. A ComboBox may be a better fit for user interfaces which require a predetermined item be selected from the list (like a foreign key input).
  • Composite Items - Items in a ComboBox, like items in a DropDownList, have both Text and Value properties. The only user input value offered by the AutoCompleteExtender is the Text property of the TextBox being extended. If the items in your list can be modeled with different Text and Value properties, the ComboBox may provide a better match for the data items being listed (again, foreign keys can be a good example of this).
  • Long Item Lists / Multiple Input Controls - All of the items in a ComboBox's list will be rendered to the web page it exists in. The AutoCompleteExtender, on the other hand, retrieves items from its ServiceMethod after the page is rendered. When your ComboBox contains a rather long list of items, or when you have a relatively large number of ComboBoxes on the same page (or within the same UpdatePanel), load times could be slowed down significantly. When ComboBoxes perform slowly because of the amount of markup they must render to the browser, an AutoCompleteExtender can be used instead to increase performance.
  • Partial Auto-Completion - The auto-complete feature of the ComboBox will only match items that start with the first user-typed character. An AutoCompleteExtender's ServiceMethod, on the other hand, can be configured to match items where the user-typed text lies somewhere after the first character in the item. A ComboBox cannot be used in application scenarios that require items to be "partially matched" like this.
  • Multiple Item Selection - The ComboBox, like the DropDownList, will only allow one item to be selected at a time. The AutoCompleteExtender can be configured to allow users to select multiple items simultaneously (using the AutoCompleteExtender's DelimiterCharacters property), like a ListBox or CheckBoxList. When users must have the ability to submit multiple items in a single postback, the AutoCompleteExtender should be used instead of the ComboBox.
ComboBox Properties 
 
The control above is initialized with this code. The italic properties are optional:
<ajaxToolkit:ComboBox ID="ComboBox1" runat="server" 
    DropDownStyle="DropDown" 
    AutoCompleteMode="None"
    CaseSensitive="false"
    RenderMode="Inline"
    ItemInsertLocation="Append"
    ListItemHoverCssClass="ComboBoxListItemHover"
      <asp:ListItem>...</asp:ListIem>
      ...
</ajaxToolkit:ComboBox>
  • DropDownStyle - Determines whether the user is allowed to enter text that does not match an item in the list, and whether the list is always displayed. If "DropDownList" is specified, users are not allowed to enter text that does not match an item in the list. When "DropDown" (the default value) is specified, any text is allowed. If "Simple" is specified, any text is allowed and the list is always displayed regardless of the AutoCompleteMode property value.
  • AutoCompleteMode - Determines how the ComboBox automatically completes the text that is typed into it. When "Suggest" is specified, the ComboBox will show the list, highlight the first matched item, and if necessary, scroll the list to show the highlighted item. If "Append" is specified, the ComboBox will append the remainder of the first matched item to the user-typed text and highlight the appended text. When "SuggestAppend" is specified, both of the above behaviors are applied. If "None" (the default value) is specified, the ComboBox's auto-complete behaviors are disabled.
  • CaseSensitive - Specifies whether user-typed text is matched to items in the list in a case-sensitive manner. The default is "false".
  • RenderMode - Specifies whether the ComboBox is rendered as an "Inline" or "Block" level HTML element. The default is "Inline".
  • ItemInsertLocation - Determines whether to "Append" or "Prepend" new items when they are inserted into the list, or whether to insert them in an "Ordinal" manner (alphabetically) based on the item Text or Value. The default is "Append".
  • ListItemHoverCssClass - When specified, replaces the default styles applied to highlighted items in the list with a custom css class.
  • ListItem - One or more child controls used to declare items that will be added to the ComboBox list. When bound to a data source, all declared ListItems will be removed unless the AppendDataBoundItems property is set to "true".
ComboBox Known Issues
 
When ListItemHoverCssClass is specified and the ComboBox list is scrollable, highlighting a list item will cause the scrollbar to flicker when using the Internet Explorer web browser. To avoid this issue, do not specify the ListItemHoverCssClass property.

ComboBox Theming 
 
You can change the look and feel of the ComboBox using the ComboBox CssClass property. The ComboBox has a predefined set of CSS classes that can be overridden. It has a default style which is embedded as a WebResource and is a part of the Toolkit assembly that has styles set for all the sub-classes. You can find the default styles in the Toolkit solution in the "AjaxControlToolkit\ComboBox\ComboBox.css" file. If your CssClass does not provide values for any of those then it falls back to the default value. In the example above the default style is displayed when "[Empty String]" is selected as the CssClass. To customize the same the user would have to set the CssClass property to the name of the CSS style and define the styles for the individual classes so that the various elements in a ComboBox control can be styled accordingly. For example, if the CssClass property was set to "CustomComboBoxStyle", this is how the css to style the border and background color would look:
.CustomComboBoxStyle .ajax__combobox_textboxcontainer input {
    background-color: #ADD8E6;
    border: solid 1px Blue;
    border-right: 0px none;
}
.CustomComboBoxStyle .ajax__combobox_buttoncontainer button {
    background-color: #ADD8E6;
    border: solid 1px Blue;
}
        
ComboBox Css classes
  • .ajax__combobox_inputcontainer: A table element that contains and positions the ComboBox's button and text box input elements. Child Css classes: ajax__combobox_textboxcontainer, ajax__combobox_buttoncontainer.
  • .ajax__combobox_textboxcontainer: The table cell that contains the ComboBox's text box input element.
  • .ajax__combobox_buttoncontainer: The table cell that contains the ComboBox's button element.
  • .ajax__combobox_itemlist: The ul element that contains the ComboBox's list item (li) elements.