Thursday, December 26, 2013

Example of AJAX Control




AnimationExtender control
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ACT" %>



<ACT:AnimationExtender ID="AnimationExtender1" runat="server" TargetControlID="txtDescription">
                        <Animations>
                   <OnLoad>
                      <Sequence>
                         <Pulse Duration="0.5" Iterations="0" />
                      </Sequence>
                   </OnLoad>
                </Animations>
                        </ACT:AnimationExtender>

ValidatorCalloutExtender


<asp:TextBox ID="txtDescription" runat="server" TextMode="MultiLine"></asp:TextBox>
                    <asp:RequiredFieldValidator CssClass="Validation" ID="RequiredFieldValidatorDescription" runat="server" ErrorMessage="Description Required" ControlToValidate="txtDescription" ValidationGroup="submit"></asp:RequiredFieldValidator>
                        <ACT:ValidatorCalloutExtender ID="ValidatorCalloutExtender1" runat="server" TargetControlID="RequiredFieldValidatorDescription">
                        </ACT:ValidatorCalloutExtender>



HtmlEditorExtender


<ACT:HtmlEditorExtender ID="HtmlEditorExtender1" runat="server" TargetControlID="txtDescription">
                        </ACT:HtmlEditorExtender>


SliderExtender


<body>
    <form id="form1" runat="server">
    <div>
        <cc2:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
        </cc2:ToolkitScriptManager>
        <script type="text/javascript">
            function pageLoad(sender, e) {
                var obj = $find("<%=sliderVolume.ClientID %>");
                obj.add_valueChanged(function () {
                    SetV(obj.get_Value());
                });
            }
            function SetV(VolumeValue) {
                ASPNetMedia.Audio('<%=Audio1.ClientID %>').SetVolume(VolumeValue);
            }


        </script>
        <asp:TextBox ID="TextBox2" runat="server" Width="80" Visible="true"></asp:TextBox>
        <asp:TextBox ID="TextBox1" runat="server"
            Text="50"></asp:TextBox>
        <cc2:SliderExtender ID="sliderVolume" runat="server" Maximum="100" Minimum="0" TargetControlID="TextBox1"
            Orientation="Horizontal" RaiseChangeOnlyOnMouseUp="False" Length="100" BoundControlID="TextBox2">
        </cc2:SliderExtender>
    </div>
    </form>
</body>

RoundedCornersExtender

<ACT:RoundedCornersExtender ID="RoundedCornersExtender1" runat="server" TargetControlID="txtDescription" Radius="20" Corners="All" Color="Cornsilk">
                        </ACT:RoundedCornersExtender>


ColorPickerExtender

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



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



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

 <script runat="server"> 

      

</script>

<script type="text/javascript">

    function selectedColorChanged(sender) {

        sender.get_element().style.color = "#" + sender.get_selectedColor();

        sender.get_element().style.backgroundColor = "#" + sender.get_selectedColor();

        document.getElementById('Label1').style.color = "#" + sender.get_selectedColor();

    } 

</script>

<html xmlns="http://www.w3.org/1999/xhtml">

<head id="Head1" runat="server">

    <title></title>



</head>

<body>

    <form id="form1" runat="server">

    <div>

    <h2 style="color:blue; font-style:italic;">Ajax ColorPickerExtender Example: How To Use PopupButtonID</h2> 

        <hr width="600" align="left" color="LightBlue" /> 

        <asp:ScriptManager  

            ID="ScriptManager1" 

            runat="server" 

            > 

        </asp:ScriptManager> 

        <br /><br /> 

        <asp:Label  

            ID="Label1" 

            runat="server" 

            Text="click here to cahnge text color." 

            Font-Size="XX-Large" 

            Font-Names="Comic Sans MS" 

            ForeColor="purple" 

            > 

        </asp:Label> 

   

       

        <asp:TextBox ID="TextBox1" runat="server"  Height="18px" Width="20px"  BackColor="purple" ForeColor="purple"></asp:TextBox>

        <asp:ColorPickerExtender ID="TextBox1_ColorPickerExtender" runat="server"

            Enabled="True" TargetControlID="TextBox1" OnClientColorSelectionChanged="selectedColorChanged">

        </asp:ColorPickerExtender>

      

    </form>

</body>

</html>

ResizableControlExtender

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>

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



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

 <script runat="server"> 

      

</script>
<style type="text/css">
.handlecss
{
width:20px;
height:20px;
background-color:Red ;
}
.resizablecss
{
padding:0px;
border-style:solid;
border-width:2px;
border-color:Green;
cursor:se-resize;
}
    </style>
<div>
        <asp:Panel ID="Panel1" runat="server" Height="202px" Width="817px">
        <p  style="font-family:Verdana; color:Green; font-size:15">This is example of ResizableControlExtender. This is example of ResizableControlExtender. This is example of
        ResizableControlExtender.
        This is example of ResizableControlExtender.</p>
        <p style="font-family:Verdana; color:Green; font-size:15"> This is example of ResizableControlExtender. This is example of ResizableControlExtender.
        This is example of ResizableControlExtender. This is example of ResizableControlExtender. </p>
        <p style="font-family:Verdana; color:Green; font-size:15"> This is example of ResizableControlExtender.
        This is example of ResizableControlExtender. This is example of ResizableControlExtender. This is example of ResizableControlExtender.
        </p>
        </asp:Panel>
       <asp:ResizableControlExtender ID="ResizableControlExtender1" TargetControlID="Panel1" HandleCssClass="handlecss" ResizableCssClass="resizablecss" MaximumHeight="700" MaximumWidth="700"
       MinimumHeight="300" MinimumWidth="200" HandleOffsetX="2" HandleOffsetY="2"  runat="server">
        </asp:ResizableControlExtender>
    </div>


MaskedEditValidator MaskedEditExtender



<asp:TextBox ID="TextBox11" runat="server" ReadOnly="True" Height="20px" Width="255px" class="txt"></asp:TextBox>
                           <asp:MaskedEditValidator ID="MaskedEditValidator2" runat="server" ControlExtender="MaskedEditExtender2"
                               ControlToValidate="TextBox11" Display="Dynamic" EmptyValueMessage="date is Required"
                               InvalidValueMessage="date is Invalid" IsValidEmpty="False" TooltipMessage="Please Enter Admission date of Student">
                           </asp:MaskedEditValidator>
                           <asp:CalendarExtender ID="CalendarExtender1" TargetControlID="TextBox11" runat="server">
                           </asp:CalendarExtender>
                           <asp:MaskedEditExtender ID="MaskedEditExtender2" runat="server" Mask="99/99/9999"
                               MaskType="Date" TargetControlID="TextBox11">
                           </asp:MaskedEditExtender>

ConfirmButtonExtender
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
                           <asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>
        <asp:Button ID="Button1" runat="server" Text="Button" />
        <asp: ID="ConfirmButtonExtender1" runat="server" ConfirmOnFormSubmit="True" ConfirmText="Are you Sure?" TargetControlID="Button1" ></asp:ConfirmButtonExtender>

BalloonPopupExtender

<asp:Label runat="server" ID="lbl1_2" Text="I am a label"></asp:Label>
                                <asp:Panel runat="server" ID="pnl1_2" Enabled="false">
                                    This is some random text for display purpose.
                                </asp:Panel>
                                <asp:BalloonPopupExtender ID="BalloonPopupExtender1" runat="server"
                                TargetControlID="lbl1_2"
                                BalloonPopupControlID="pnl1_2"
                                Position="BottomRight"
                                BalloonStyle="Rectangle"
                                BalloonSize="Medium"
                                UseShadow="true"
                                ScrollBars="Auto"
                                DisplayOnMouseOver="true"
                               
                                DisplayOnFocus="false"
                                DisplayOnClick="false" />

AlwaysVisibleControlExtender

<div >
        <asp:ToolkitScriptManager ID="Sc1" runat="server">
        </asp:ToolkitScriptManager>
       
        <asp:Label ID="Label3" runat="server" Text="Line : 1"></asp:Label>
        <br />
        <br />
        <asp:Label ID="Label4" runat="server" Text="Line : 2"></asp:Label>
        <br />
        <br />
        <asp:Label ID="Label5" runat="server" Text="Line : 3"></asp:Label>
        <br /><br />
        <asp:Label ID="Label6" runat="server" Text="Line : 4"></asp:Label>
        <br /><br />
        <asp:Label ID="Label7" runat="server" Text="Line : 5"></asp:Label>
        <br /><br />
        <asp:Label ID="Label8" runat="server" Text="Line : 6"></asp:Label>
        <br /><br />
        <asp:Label ID="Label9" runat="server" Text="Line : 7"></asp:Label>
        <br /><br />
        <asp:Label ID="Label10" runat="server" Text="Line : 8"></asp:Label>
        <br /><br />
        <asp:Label ID="Label11" runat="server" Text="Line : 9"></asp:Label>
        <br /><br />
        <asp:Label ID="Label12" runat="server" Text="Line : 10"></asp:Label>
        <br /><br />
        <asp:Label ID="Label13" runat="server" Text="Line : 11"></asp:Label>
        <br /><br />
        <asp:Label ID="Label14" runat="server" Text="Line : 12"></asp:Label>       
        <br /><br />
        <asp:Label ID="Label15" runat="server" Text="Line : 13"></asp:Label>
        <br /><br />
        <asp:Label ID="Label16" runat="server" Text="Line : 14"></asp:Label>
        <br /><br />
        <asp:Label ID="Label17" runat="server" Text="Line : 15"></asp:Label>
        <br /><br />
        <asp:Label ID="Label18" runat="server" Text="Line : 16"></asp:Label>
        <br /><br />
        <asp:Label ID="Label19" runat="server" Text="Line : 17"></asp:Label>
        <br /><br />
        <asp:Label ID="Label20" runat="server" Text="Line : 18"></asp:Label>
        <br /><br />
        <asp:Label ID="Label21" runat="server" Text="Line : 18"></asp:Label>
        <br /><br />
        <asp:Label ID="Label22" runat="server" Text="Line : 20"></asp:Label>
        <br /><br />
        <asp:Label ID="Label23" runat="server" Text="Line : 21"></asp:Label>
        <br /><br />
        <asp:Label ID="Label24" runat="server" Text="Line : 22"></asp:Label>
        <br /><br />
        <asp:Label ID="Label25" runat="server" Text="Line : 23"></asp:Label>
        <br /><br />
        <asp:Label ID="Label26" runat="server" Text="Line : 24"></asp:Label>
        <br /><br />
        <asp:Label ID="Label27" runat="server" Text="Line : 25"></asp:Label>
        <br /><br />
        <asp:Label ID="Label28" runat="server" Text="Line : 26"></asp:Label>
        <br /><br />
        <asp:Label ID="Label29" runat="server" Text="Line : 27"></asp:Label>
        <br /><br />
        <asp:Label ID="Label30" runat="server" Text="Line : 28"></asp:Label>
        <br /><br />
        <asp:Label ID="Label31" runat="server" Text="Line : 29"></asp:Label>
        <br /><br />
        <asp:Label ID="Label32" runat="server" Text="Line : 30"></asp:Label>
        <br /><br />
        <asp:Label ID="Label33" runat="server" Text="Line : 31"></asp:Label>
        <br /><br />
        <asp:Label ID="Label34" runat="server" Text="Line : 32"></asp:Label>
        <br /><br />
        <asp:Label ID="Label35" runat="server" Text="Line : 33"></asp:Label>
        <br /><br />
        <asp:Label ID="Label36" runat="server" Text="Line : 34"></asp:Label>
        <br /><br />
        <asp:Label ID="Label37" runat="server" Text="Line : 35"></asp:Label>
        <br /><br />
       
       
        <asp:Panel ID="panel2" runat="server" BorderColor="Red" BorderStyle="Solid"
            BorderWidth="2px" Height="200px" Width="200px" >
            <asp:Label ID="lblMsg" runat="server"
            Text="
            THIS PANEL IS ALWAYS VISIBLE
            EVEN WHEN USER SCROLLS OR RESIZES THE WINDOW" Font-Italic="False"
                ForeColor="Blue"></asp:Label>
            <br /> <br />
            <asp:Button id="btnSubmit" runat="server" Text="Submit" />
        </asp:Panel>
        <br />
        <asp:AlwaysVisibleControlExtender
             ID="AlwaysVisibleControl1" TargetControlID="Panel1" runat="server"
             HorizontalOffset="20" VerticalOffset="20" HorizontalSide="Right"
             VerticalSide="Top">
        </asp:AlwaysVisibleControlExtender>
       
    </div>

TextBoxWatermarkExtender

<asp:TextBoxWatermarkExtender ID="watermark" runat="server" TargetControlID="txtName" WatermarkText="Type name here..." />
<asp:TextBox ID="txtName" runat="server" />