AJAX Control ToolKit ComboBox Extender Control Tutorial
Working with the ComboBox in an AJAX controlled Environment, this is an interactive control that enables the end user to choose his or her own choice and it be recorded without utilizing a postback. As you will see it works similarly to a Dropdown list as well.
ComboBox is an ASP.NET AJAX control that combines the flexibility of a TextBox with a list of options that users are able to choose from. 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.
Working with AJAX Control Toolkit is so much fun, it allows you to drag and drop elements you would otherwise have to Code out and thus saves us coders so much time. Next thing know you have a fully enabled AJAX website with Forms & other great features such as the ComboBox Extender control.
We chose Server Intellect for its dedicated servers, for our web hosting. They have managed to handle virtually everything for us, from start to finish. And their customer service is stellar.
Let’s get to work, In the Design view Lets Drag & drop a few fun tools.
· Add a New WebForm to this project and name it ComboBox.aspx
· Then Add a ScriptManager to the page.
· Then Add a ComboBox extender, a button and a label to the page.
The markup of the page will look like
As you can see on your page we have added a few controls. Below I am going to put the Markup but I will let you figure this one out on your own, The Purpose of this tutorial is so you Learn AJAX, After All we are the best place to Learn AJAX and source for AJAX Tutorials.
<%@ Page Language="C#" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
protected void btnSubmit_Click(object sender, EventArgs e)
{
lblSelection.Text = "You picked " + ComboBox1.SelectedItem.Text;
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Combo Box</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<cc1:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</cc1:ToolkitScriptManager>
Describe how spicy you like your food:
<br />
<cc1:ComboBox ID="ComboBox1" runat="server">
<asp:ListItem Text="Mild" Value="0" />
<asp:ListItem Text="Medium" Value="1" />
<asp:ListItem Text="Hot" Value="2" />
</cc1:ComboBox>
<asp:Button ID="btnSubmit" Text="Submit" Runat="server" OnClick="btnSubmit_Click" />
<hr />
<asp:Label ID="lblSelection" Runat="server" />
</div>
</form>
</body>
</html>
Load the page in browser looks like as follows
You can select one of the pre-existing options from the ComboBox like a DropDownList control.
However, you also have the option of entering a new choice that is not in the existing list like a TextBox control.
Regardless of whether you pick a pre-existing item or you enter a custom item, when you submit the form, your choice appears in the label control. When you submit the form, the btnSubmit_Click handler executes and updates the label
Thanks for Reading and being a part of AJAXTutorials.com Again if you have any questions comments or concerns please feel free to write below in our comment box, or if you’d like to see a Particular AJAX Tutorial then please direct yourself to the Suggest Tutorial Section.
Also If you're looking for a really good web host, try Server Intellect - we found the setup procedure and control panel, very easy to adapt to and their IT team is awesome!
