Technical Blog: AJAX Control ToolKit

Showing posts with label AJAX Control ToolKit. Show all posts

Wednesday, November 7, 2012

NoBot Control – Ajax ToolKit Control

Introduction :

The name itself specifies it offers protection from bots(robots or any automated software which can submit forms and give reply for messages as humans do). Generally we see using CAPTCHA to prevent entries from ROBOT , we can use this NoBot Control to achieve the same.

Uses :

1)To enhances the site security.( It performing various checks when a form is submitted )
2)To check spam and to prevent hacking to some extent.
3)To perform checks like CAPTCHA.

Attributes :

ResponseMinimumDelaySeconds - Minimum number of seconds to wait before which a postback is considered valid. If postback occurs before this minimum number of seconds , then NoBot state will be "ResponseTooSoon"
CutoffWindowSeconds - It specifies length of cut off window which tracks postbacks within the time specified using this attribute.
CutoffMaximumInstances - Maximum number of postbacks that could occur within in CutOffwindowSeconds.If number of postbacks increases by the number specified in "CutoffMaximumInstances" with in the time limit specified by "CutoffWindowSeconds" , then NoBot State will return "InvalidAddressTooActive"
OnGenerateChallengeAndResponse - Event handler to return NoBot State response.

NoBot Example :

Aspx Code :

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="NoBotControl.aspx.cs" Inherits="Ajax_Controls_Examples_NoBotControl" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>NoBot Control Example</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <ajaxToolkit:ToolkitScriptManager ID="Sc1" runat="server">
        </ajaxToolkit:ToolkitScriptManager>
        <asp:Label ID = "Label1" runat="server" Text="NoBot Message:" Font-Bold="True"></asp:Label>
        <asp:Label ID="Label2" runat="server" Font-Bold="True" ForeColor="Red" ></asp:Label>
        <br /><br />
        <asp:Button ID="btnCheck" runat="server" Text="Check" OnClick="btnCheck_Click" />
        <ajaxToolkit:NoBot ID="NoBot1" runat="server" CutoffWindowSeconds="15"
            ResponseMinimumDelaySeconds="3" CutoffMaximumInstances="4" />
    </div>
    </form>
</body>
</html>

Code Behind :

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using AjaxControlToolkit;

public partial class Ajax_Controls_Examples_NoBotControl : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{

    }
    protected void btnCheck_Click(object sender, EventArgs e)
    {
        NoBotState nbs;
        if (NoBot1.IsValid(out nbs))
        {
            Label2.Text = nbs.ToString();
        }
        else
        {
            Label2.Text = nbs.ToString();
        }
    }
}

Output :

If all the checks are correct , then NoBotState will return “Valid” Message.

If within the time specified in "ResponseMinimumDelaySeconds" i.e 3 sec , if end user clicks on button more than once , it returns "InvalidResponseTooSoon".

“CutoffMaximumInstances” specifies number of post backs that can occur within time specified in "CutoffWindowSeconds" , so if end user clicks button more than 4 times
within 15 sec , then it returns "InValidAddressTooActive" message.

TabContainer Example – Ajax ToolKit Control

TabContainer :

To present tabbed UI , TabControl can be used.If you have a page that has lot of content to present then we can break it into tabs.TabContainer contains many TabPanels each of which represents a tab.

Important attributes of TabContainer control are :

OnActiveTabChanged : This event is fired when active (current ) tab is changed.It is a server side event.
OnClientActiveTabChanged : It is also fired when current tab is changed.It is client side event. we need to write javascript for this.
Scrollbar : used to specify alignment of Scrollbar for tab container.It takes Horizontal , vertical , both , none and auto values.

TabPanel :

TabPanel has HeaderTemplate and Content Template.Header Template is optional and can be used to specify header.
We can use either HeaderTemplate or HeaderText attribute to specify header for a tab.
All the content under a tab should be specified within ContentTemplate tag.

TabContainer Example :

This example shows how to create tabs using TabContainer control. We can also write some events when tabs are changed which I will illustrate in next example.

Aspx Code :

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="TabContainer.aspx.cs" Inherits="Ajax_Controls_Examples_TabContainer" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

        <ajaxToolkit:TabContainer ID="TabContainer1" runat="server" ScrollBars="Horizontal" >

            <ajaxToolkit:TabPanel ID="TabPanel1" runat="server">
                <HeaderTemplate >Tab1</HeaderTemplate>
                <ContentTemplate>Content of Tab1</ContentTemplate>
            </ajaxToolkit:TabPanel>

            <ajaxToolkit:TabPanel ID="TabPanel2" runat="server">
                <HeaderTemplate >Tab2</HeaderTemplate>
                <ContentTemplate>Content of Tab2</ContentTemplate>
            </ajaxToolkit:TabPanel>

            <ajaxToolkit:TabPanel ID="TabPanel3" runat="server">
                <HeaderTemplate >Tab3</HeaderTemplate>
                <ContentTemplate>Content of Tab3</ContentTemplate>
            </ajaxToolkit:TabPanel>

            <ajaxToolkit:TabPanel ID="TabPanel4" runat="server">
                <HeaderTemplate >Tab4</HeaderTemplate>
                <ContentTemplate>Content of Tab4</ContentTemplate>
            </ajaxToolkit:TabPanel>

        </ajaxToolkit:TabContainer>
    </div>
    </form>
</body>
</html>

Output:

Another TabContainer Example with events when tab is changed . For this we need to make use of “OnActiveTabChanged” or “OnClientActiveTabChaned” event of this control.

Aspx Code :

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="TabContainer.aspx.cs" Inherits="Ajax_Controls_Examples_TabContainer" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>TAB CONTAINER EXAMPLE</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <ajaxToolkit:ToolkitScriptManager ID="Sc1" runat="server">
        </ajaxToolkit:ToolkitScriptManager>
       <asp:Label ID="lblMsg" runat="server" Font-Bold="True" ForeColor="Red"></asp:Label>
        <br />        <br />
        <ajaxToolkit:TabContainer ID="TabContainer1" runat="server" ScrollBars="Horizontal"
            OnActiveTabChanged ="TabChanged_Event" AutoPostBack="true">
            <ajaxToolkit:TabPanel ID="TabPanel1" runat="server">
                <HeaderTemplate >Tab1</HeaderTemplate>
                <ContentTemplate>Content of Tab1</ContentTemplate>
            </ajaxToolkit:TabPanel>
            <ajaxToolkit:TabPanel ID="TabPanel2" runat="server">
                <HeaderTemplate >Tab2</HeaderTemplate>
                <ContentTemplate>Content of Tab2</ContentTemplate>
            </ajaxToolkit:TabPanel>
            <ajaxToolkit:TabPanel ID="TabPanel3" runat="server">
                <HeaderTemplate >Tab3</HeaderTemplate>
                <ContentTemplate>Content of Tab3</ContentTemplate>
            </ajaxToolkit:TabPanel>
            <ajaxToolkit:TabPanel ID="TabPanel4" runat="server">
                <HeaderTemplate >Tab4</HeaderTemplate>
                <ContentTemplate>Content of Tab4</ContentTemplate>
            </ajaxToolkit:TabPanel>
        </ajaxToolkit:TabContainer>
    </div>
    </form>
</body>
</html>

Code Behind:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class Ajax_Controls_Examples_TabContainer : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{

    }
    protected void TabChanged_Event(object sender, EventArgs e)
    {
        lblMsg.Text = "TAB CHANGED";

}
}

Output :

Tuesday, October 16, 2012

PagingBulletedListExtender Example

Sample Example using PagingBulletedListExtender

Output

“PagingBulletedListExtender” Example which fetches list of state names from the database and displays it in alphabetical order with paging .

Aspx Code:

Code Behind:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.Sql;
using System.Data.SqlClient;
using System.Configuration;
using System.Data;

public partial class Ajax_Controls_Examples_PagingBulletedListExtender : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        GetData();
    }
    protected void GetData()
    {
        DataTable DtStates = new DataTable();
        SqlConnection Con = new SqlConnection(ConfigurationManager.ConnectionStrings["MyConString"].ToString());
        Con.Open();

SqlCommand Cmd = new SqlCommand("Get_StateCodes" , Con);
Cmd.CommandType = CommandType.StoredProcedure;

SqlDataAdapter Adp = new SqlDataAdapter(Cmd);
Adp.Fill(DtStates);

BulletedList1.DataSource = DtStates;
BulletedList1.DataBind();

}
}

Output :

NumericUpDownExtender Example

Sample Example using NumericUpDownExtender – AJAX ToolKit Control

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="NumericUpDownExtender.aspx.cs"
Inherits="Ajax_Controls_Examples_NumericUpDownExtender" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

        <asp:TextBox id="txtCounter" runat="server"></asp:TextBox>
        <ajaxToolkit:NumericUpDownExtender ID="NumericUpDownExtender1" runat="server"
            TargetControlID="txtCounter" Minimum="1" Maximum="10" Width="130">
        </ajaxToolkit:NumericUpDownExtender>
    </div>
    </form>
</body>
</html>

Output

We can use NumericUpDownExtender not only for incrementing numbers but also with characters using its “RefValues” attribute. We need to specify comma separated values .

NumericUpDownExtender Example using RefValues attribute:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="NumericUpDownExtender.aspx.cs"
Inherits="Ajax_Controls_Examples_NumericUpDownExtender" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Numeric up Down Extender</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <ajaxToolkit:ToolkitScriptManager ID="Sc1" runat="server">
        </ajaxToolkit:ToolkitScriptManager>
        <asp:TextBox id="txtCounter" runat="server"></asp:TextBox>
        <ajaxToolkit:NumericUpDownExtender ID="NumericUpDownExtender1" runat="server"
            TargetControlID="txtCounter" RefValues="Red;Blue;Green;Yellow;" Width="130">
        </ajaxToolkit:NumericUpDownExtender>
    </div>
    </form>
</body>
</html>

Ouput :

MutuallyExclusiveCheckBoxExtender Example

Sample Example using MutuallyExclusiveCheckBoxExtender – AJAX ToolKit Control

Aspx Code:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="MutuallyExclusiveCheckBoxExtender.aspx.cs"
Inherits="Ajax_Controls_Examples_MutuallyExclusiveCheckBoxExtender" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Mutually Exclusive CheckBox Extender Control Example</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <ajaxToolkit:ToolkitScriptManager ID="Sc1" runat="server">
        </ajaxToolkit:ToolkitScriptManager>
        <asp:Label ID="lblText" runat="server" Text="Select an Option" ForeColor="Red" >
        </asp:Label>
        <br /><br />
        <asp:CheckBox ID="CheckBox1" runat="server" Text="Hyderabad" />
        <ajaxToolkit:MutuallyExclusiveCheckBoxExtender ID="M1" runat="server"
             TargetControlID="CheckBox1" Key="Cities">
        </ajaxToolkit:MutuallyExclusiveCheckBoxExtender>
        <br />
        <asp:CheckBox ID="CheckBox2" runat="server" Text="Chennai" />
        <ajaxToolkit:MutuallyExclusiveCheckBoxExtender ID="M2" runat="server"
             TargetControlID="CheckBox2" Key="Cities">
        </ajaxToolkit:MutuallyExclusiveCheckBoxExtender>
        <br />
        <asp:CheckBox ID="CheckBox3" runat="server" Text="Bangalore" />
        <ajaxToolkit:MutuallyExclusiveCheckBoxExtender ID="M3" runat="server"
             TargetControlID="CheckBox3" Key="Cities">
        </ajaxToolkit:MutuallyExclusiveCheckBoxExtender>
        <br />
        <asp:CheckBox ID="CheckBox4" runat="server" Text="Delhi" />
        <ajaxToolkit:MutuallyExclusiveCheckBoxExtender ID="M4" runat="server"
             TargetControlID="CheckBox4" Key="Cities">
        </ajaxToolkit:MutuallyExclusiveCheckBoxExtender>
        <br />
    </div>
    </form>
</body>
</html>

Output:

ListSearchExtender Example

ListSearchExtender Example using DropDownList

Aspx Code :

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ListSearchExtender.aspx.cs"
Inherits="Ajax_Controls_Examples_ListSearchExtender" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>LIST SEARCH EXTENDER CONTROL EXAMPLE</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <ajaxToolkit:ToolkitScriptManager ID="SC1" runat="server">
    </ajaxToolkit:ToolkitScriptManager>
    <br />    <br />    <br />
    <asp:DropDownList ID="ddlCities" runat="server">
    <asp:ListItem Text="Select Your City" Value="0"></asp:ListItem>
    <asp:ListItem Text="Hyderabad" Value="1"></asp:ListItem>
    <asp:ListItem Text="Chennai" Value="2"></asp:ListItem>
    <asp:ListItem Text="Bangalore" Value="3"></asp:ListItem>
    <asp:ListItem Text="Mumbai" Value="4"></asp:ListItem>
    <asp:ListItem Text="Kerala" Value="5"></asp:ListItem>
    </asp:DropDownList>
    <ajaxToolkit:ListSearchExtender ID="Ls1" runat="server"
         TargetControlID="ddlCities">
    </ajaxToolkit:ListSearchExtender>
    </div>
    </form>
</body>
</html>

Output :

As soon as end user clicks on the DropDownList the text “Type to Search” will appear. User can type text to search for an item in the list.If that item is present in the list it will be selected.

ListSearchExtender Example using ListBox

Aspx Code :

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ListSearchExtender.aspx.cs"
Inherits="Ajax_Controls_Examples_ListSearchExtender" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>LIST SEARCH EXTENDER CONTROL EXAMPLE</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <ajaxToolkit:ToolkitScriptManager ID="SC1" runat="server">
    </ajaxToolkit:ToolkitScriptManager>
    <br />    <br />    <br />

    <asp:ListBox ID="LstCities" runat="server">
    <asp:ListItem Text="Hyderabad" Value="1"></asp:ListItem>
    <asp:ListItem Text="Chennai" Value="2"></asp:ListItem>
    <asp:ListItem Text="Bangalore" Value="3"></asp:ListItem>
    <asp:ListItem Text="Mumbai" Value="4"></asp:ListItem>
    <asp:ListItem Text="Kerala" Value="5"></asp:ListItem>
    </asp:ListBox>
     <ajaxToolkit:ListSearchExtender ID="ListSearchExtender1" runat="server"
         TargetControlID="LstCities">
    </ajaxToolkit:ListSearchExtender>
    </div>
    </form>
</body>
</html>

Output :

As soon as end user clicks on the ListBox the text “Type to Search” will appear. User can type text to search for an item in the list.If that item is present in the list it will be selected.

MaskedEditExtender Example

Sample Example of MaskedEditExtender Control

Aspx Code :

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="MaskedEditExtender.aspx.cs"
Inherits="Ajax_Controls_Examples_MaskedEditExtender" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>MASKED EDIT EXTENDER CONTROL EXAMPLE</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <ajaxToolkit:ToolkitScriptManager ID="Sc1" runat="server">
        </ajaxToolkit:ToolkitScriptManager>
        Enter Number:<asp:TextBox ID="TxtNum" runat="server"></asp:TextBox>
        <ajaxToolkit:MaskedEditExtender ID="MaskEditExtender1" runat="server"
             TargetControlID="TxtNum" MaskType="Number" Mask="999">
        </ajaxToolkit:MaskedEditExtender>
      </div>
    </form>
</body>
</html>

Output :

When TextBox gets focus it shows the format of the text to be entered. like in the above example Mask value is “999” , so it shows ---. if it is “99/99/9999” then it shows –/—/----

In the above example Mask value is “999” , which means it allows only 3 digits to be entered in the textbox. If user enters only less than 3 digits then it takes 0 ‘s by default. if user leaves the textbox empty , it will not return any error as there is no validation for empty input.

To put validation for empty input , we can use “MaskedEditValidator” Control.

Here there is another example of “MaskedEditExtender” to take date input in the textbox.For this we specify the date format in the Mask attribute as “99/99/9999” . We can use ‘-‘ delimiter also to specify date format. (99-99-9999)

Aspx Code :

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="MaskedEditExtender.aspx.cs"
Inherits="Ajax_Controls_Examples_MaskedEditExtender" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>MASKED EDIT EXTENDER CONTROL EXAMPLE</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <ajaxToolkit:ToolkitScriptManager ID="Sc1" runat="server">
        </ajaxToolkit:ToolkitScriptManager>
        Enter Date:<asp:TextBox ID="txtDate" runat="server"></asp:TextBox>
        <ajaxToolkit:MaskedEditExtender ID="MaskedEditExtender1" runat="server"
             TargetControlID="txtDate" MaskType="Date" Mask="99/99/9999">
        </ajaxToolkit:MaskedEditExtender>
    </div>
    </form>
</body>
</html>

Output :

Tuesday, September 25, 2012

Accordion Control Example – AJAX Control

It allows you to define multiple panes but displays only one pane at a time. It is a king of CollapsiblePanel Control. To define multiple panes in Accordion Control , we have to make use of “AccordionPane” Control. Each pane has its own template for its header and content.

Important attributes of this control are :

SelectedIndex : needs to specify Index of the pane that should be visible by default. (mandatory attribute for Accordion Control)

CssClass : specify a css class name that represents style for accordion control.

HeaderCssClass : specify a css class name that represents style for headers of AccordionPane Control.

ContentCssClass : specify a css class name that represents style for contents of AccordionPane Control

Example – Accordion Control

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Accordion Control.aspx.cs" 
Inherits="Ajax_Controls_Examples_Accordion_Control" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional
//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Accordion Control</title>
    <style type="text/css">
.accordion
{
    padding: 5px;
    font-family: 'Times New Roman' , Times, serif;
    font-size: medium;
    font-weight: normal;
    font-style: normal;
    font-variant: normal;
    color: #000000;
    background-color: #FFFFFF;
    position: absolute;
    width: 200px;
    height: 173px;
            top: 40px;
            left: 10px;
        }

.accordionheader
{
    font-family: 'Times New Roman' , Times, serif;
    font-size: large;
    font-weight: bold;
    font-style: normal;
    color: #000000;
    border: thin dotted #000000;
    padding: inherit;
    background-color: #CC6600;
    width: 200px;
    height: 30px;
}
.accordionContent
{
    font-family: 'Times New Roman' , Times, serif;
    font-size: small;
    font-weight: bold;
    font-style: italic;
    color: #800000;
    background-color: #FFFFCC;
     width: 200px;
}


</style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <ajaxToolkit:ToolkitScriptManager ID="Sc1" runat="server">
        </ajaxToolkit:ToolkitScriptManager>
        <ajaxToolkit:Accordion id="Accordion1" runat="server" SelectedIndex="0"
             HeaderCssClass="accordionheader" ContentCssClass="accordionContent" 
             CssClass="accordion">
        <Panes>
        <ajaxToolkit:AccordionPane ID="Pane1" runat="server">
        <Header>
            <asp:Label ID="lblHd1" runat="server" Text="Accordion Control"></asp:Label>
            
        </Header>
        <Content>
            It allows you to define multiple panes
            but displays only one pane at a time.
            It is a king of CollapsiblePanel Control.
            To define multiple panes in Accordion Control
            , we have to make use of “AccordionPane” Control.
             Each pane has its own template for its header and content.
        </Content>
        </ajaxToolkit:AccordionPane>
        
        <ajaxToolkit:AccordionPane id="pane2" runat="server">
            <Header>
                <asp:Label ID="Label1" runat="server" Text="Accordion Pane"></asp:Label>
            </Header>
            <Content>
             It allows you to define multiple panes
            but displays only one pane at a time.
            It is a king of CollapsiblePanel Control.
            To define multiple panes in Accordion Control
            , we have to make use of “AccordionPane” Control.
             Each pane has its own template for its header and content.
            </Content>
        </ajaxToolkit:AccordionPane>
        <ajaxToolkit:AccordionPane ID="Pane3" runat="server">
            <Header>
              <asp:Label ID="Label3" runat="server" Text="Header Styles"></asp:Label>
            </Header>
            <Content>
            It allows you to define multiple panes
            but displays only one pane at a time.
            It is a king of CollapsiblePanel Control.
            To define multiple panes in Accordion Control
            , we have to make use of “AccordionPane” Control.
             Each pane has its own template for its header and content.
            </Content>
            
        </ajaxToolkit:AccordionPane>
        </Panes>           
        </ajaxToolkit:Accordion>
    </div>
    </form>
</body>
</html>

Output :

1)Output on page load

2)output on click of “Accordion Pane” tab

3)output on click of “Header Styles” tab.

HoverMenuExtender Example – Ajax Control

Introduction :

It shows the hidden control when user hovers on the target control. We can say tooltip displayed for links as an example of this control.

Two main attributes we need to specify for this control are “TargetcontrolId” and “PopupControlid”.

TargetControlId: Control on which user hovers to see the hidden control.

PopupControlId: hidden control which is visible after user hovers on the target control.

We can specify “PopupDelay” , “offsetX” , “OffsetY” for the hidden control .

Example – HoverMenuExtender

Create a label and on mouse hover on that label , show panel as popup.

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>HoverMenuExtender</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <ajaxToolkit:ToolkitScriptManager ID="Sc1" runat="server">
        </ajaxToolkit:ToolkitScriptManager>
        <asp:Label ID="lblMsg" runat="server" Text="Click Me!!"
            ForeColor="Blue" Font-Underline="True" >
        </asp:Label>
        <asp:Panel ID="Pn1" runat="server" BorderColor="Red" BorderWidth="2">
            <asp:Label ID="lblPopUp" runat="server" 
                Text ="This is a label not a Hyperlink!!!!" >
             </asp:Label>
        </asp:Panel>
        <ajaxToolkit:HoverMenuExtender ID="HoverMenuExtender1" runat="server"
             TargetControlID="lblMsg" PopupControlID="Pn1"
             PopupPosition="Right" OffsetX="20" OffsetY="20">
        </ajaxToolkit:HoverMenuExtender>
    </div>
    </form>
</body>
</html>

Output :

DropShadowExtender – Ajax Control

It is used to add a shadow for any control.

Code to add Shadow to an Image Control using DropShadowExtender :


<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>DropShadow - Ajax Control</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <ajaxToolkit:ToolkitScriptManager ID="Sc1" runat="server">
        </ajaxToolkit:ToolkitScriptManager>
        <asp:Image ID="ImgDisplay" runat="server" ImageUrl="~/Images/3.jpeg"
             Width="200" Height="200"/>
        <ajaxToolkit:DropShadowExtender ID="DropShadowExtender1" runat="server"
             TargetControlID="ImgDisplay" Rounded="true" Width="10">
        </ajaxToolkit:DropShadowExtender>
    </div>
    </form>
</body>
</html>

Output :

PasswordStrength Example - AJAX Control

Introduction :

This control evaluates the strength of the password entered and also displays a message to the end user about the password strength .

Example – PasswordStrength


<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>PasswordStrengthControl Extender</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <ajaxToolkit:ToolkitScriptManager ID="Sc1" runat="server">
        </ajaxToolkit:ToolkitScriptManager>
        
        Enter Password:<asp:TextBox ID="txtPassword" runat="server" TextMode="Password" >
        </asp:TextBox>
        <br />
        <br />
        <ajaxToolkit:PasswordStrength ID="PasswordStrength1" runat="server"
            TargetControlID="txtPassword" >
        </ajaxToolkit:PasswordStrength>
            
    
    </div>
    </form>
</body>
</html>

Output :

AutoCompleteExtender – AJAX Control

Introduction :

It is a feature that helps end user when typing for a word in a search box. We can say Google Search box as live example for this. When we start typing “java” in the search box , it gives a list of all searches (that we made earlier or other user had made ) containing “Java” as prefix. Now a days this feature is available in almost all the search engine sites.

This feature extends the functionality of the textbox.

Important attributes of this control , that needs to be specified are

TargetControlID : Textbox ID to which autocomplete functionality needs to be added.

ServiceMethod : Functions which fetches data based on the text (takes prefix) typed in the database.

Example – AutoCompleteExtender :

Step 1 : Register AjaxControlToolkit.

<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="ajaxToolkit" %>

Step 2 : Add ToolKitScriptManager to the page.

<ajaxToolkit:ToolkitScriptManager ID="Sc1" runat="server">
        </ajaxToolkit:ToolkitScriptManager>

Step 3: Add textbox and AutoCompleteExtender to the page. Assign textbox ID to “TargetControlID” attribute. Define some SeriveMethod and set “EnableCaching” to true.

If we set “EnableCaching” to true , then no need to define any functionality for ServiceMethod . Whatever user types in the textbox will be shown as autocomplete text. Suppose say user first types “aa” and submits and next when he start typing a , it will show “aa” as a dropdown list under the textbox.

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>AutoComplete Extender</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <ajaxToolkit:ToolkitScriptManager ID="Sc1" runat="server">
        </ajaxToolkit:ToolkitScriptManager>
        Enter some text:<asp:TextBox ID="txtdata" runat="server">
        </asp:TextBox>
        <br /> <br />
        <asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClick="btnSubmit_Click" />
        <asp:Button ID="btnClear" runat="server" Text="Clear" OnClick="btnClear_Click"/>
        <ajaxToolkit:AutoCompleteExtender ID="AutoCompleteExtender1" 
            runat="server" TargetControlID="txtdata" 
            ServiceMethod="DisplayText" 
            EnableCaching="true" >
        </ajaxToolkit:AutoCompleteExtender>
    </div>
    </form>
</body>
</html>

 protected void btnSubmit_Click(object sender, EventArgs e)
    {
        Response.Write("Page is Submitted");

    }
    protected void btnClear_Click(object sender, EventArgs e)
    {
        txtdata.Text = "";

    }
    
    public string[] DisplayText(string PrefixText, int Count, string ContextKey)
    {
        return new string[] { string.Empty };        
    }

Output :

Technical Blog

Wednesday, November 7, 2012

NoBot Control – Ajax ToolKit Control

TabContainer Example – Ajax ToolKit Control

Tuesday, October 16, 2012

PagingBulletedListExtender Example

NumericUpDownExtender Example

MutuallyExclusiveCheckBoxExtender Example

ListSearchExtender Example

MaskedEditExtender Example

Tuesday, September 25, 2012

Accordion Control Example – AJAX Control

HoverMenuExtender Example – Ajax Control

DropShadowExtender – Ajax Control

PasswordStrength Example - AJAX Control

AutoCompleteExtender – AJAX Control

Labels

About Me

Total Pageviews