Ajax MultiHandleSliderExtender in asp.net

Output:

Aspx Page

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

<%@ 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">

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

<head runat="server">

    <title></title>

</head>

<body>

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

    <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">

    </asp:ToolkitScriptManager>

    <div>

            <asp:TextBox ID="TextBox1"  runat="server"></asp:TextBox>

            <asp:TextBox ID="TextBox2"  runat="server"></asp:TextBox>

            <asp:TextBox ID="txtSlider" runat="server" Width="40px"></asp:TextBox>

            <%-- Add multihandlelsiderExtender control and scriptmanager control also--%>

            <asp:MultiHandleSliderExtender 

                ID="MultiHandleSliderExtender1" 

                runat="server"

                TargetControlID="txtSlider" 

                BehaviorID="multiHandleSliderOne"

                Minimum="0" 

                Maximum="100" 

                Steps="80" 

                Length="317">

            <MultiHandleSliderTargets>

            <asp:MultiHandleSliderTarget ControlID="TextBox1" />

            <asp:MultiHandleSliderTarget ControlID="TextBox2" />

            </MultiHandleSliderTargets>

            </asp:MultiHandleSliderExtender>

    </div>

    </form>

</body>

</html>

Ajax Accordion in asp.net

Output:

Aspx Page

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

<%@ 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">

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

<head runat="server">

    <title></title>

    <style type="text/css"> 

        .HeaderCSS 

        { 

            color:Snow; 

            background-color:Crimson; 

            font-size:medium; 

            border:solid 1px salmon; 

            font-weight:bold; 

            } 

        .HeaderSelectedCSS 

        { 

            color:Snow; 

            background-color:OrangeRed; 

            font-weight:bold; 

            font-style:italic; 

            }             

    </style> 

</head>

<body>

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

    <div> 

        <h2 style="color:DarkSeaGreen; font-style:italic;"> Using Accordion</h2> 

        <hr width="450" align="left" color="DarkSeaGreen" /> 

        <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">

        </asp:ToolkitScriptManager>

  

        <asp:Accordion  

            runat="server"  

            ID="Accordion1"  

            HeaderCssClass="HeaderCSS"  

            HeaderSelectedCssClass="HeaderSelectedCSS"  

            Width="300" 

            BorderColor="Orange" 

            BorderWidth="2" 

            > 

            <Panes> 

                <asp:AccordionPane runat="server" ID="AccordionPane1"> 

                    <Header>Red Orchid</Header> 

                    <Content> 

                        <asp:Image ID="Image1" runat="server" ImageUrl="~/Images/pic2.jpg" Height="200px"Width="300px" /> 

                    </Content> 

                </asp:AccordionPane> 

                <asp:AccordionPane runat="server" ID="AccordionPane2"> 

                    <Header>Green Orchid</Header> 

                    <Content> 

                        <asp:Image ID="Image2" runat="server" Height="200px" Width="300px"ImageUrl="~/Images/pic3.jpg" /> 

                    </Content> 

                </asp:AccordionPane> 

                <asp:AccordionPane runat="server" ID="AccordionPane3"> 

                    <Header>Blue Orchid</Header> 

                    <Content> 

                        <asp:Image ID="Image3" runat="server" Height="200px" Width="300px"ImageUrl="~/Images/pic4.jpg" /> 

                    </Content> 

                </asp:AccordionPane> 

            </Panes> 

        </asp:Accordion> 

    </div> 

    </form> 

</body>

</html>

Ajax SlideShowExtender in asp.net

Output:

Aspx Page

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" 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">

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

<head runat="server">

    <title></title>

</head>

<body>

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

    <div style="width:200px">

        <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">

        </asp:ToolkitScriptManager>

         <asp:Image ID="img1" 

              runat="server"

              Height="150px"

              Width="200px"

              ImageUrl="~/images/pic1.jpg" />

           

        <asp:SlideShowExtender ID="SlideShowExtender1" runat="server"

             BehaviorID="SlideShowBehaviorID"

             TargetControlID="img1"

             SlideShowServiceMethod="GetImagesForSlide"

             AutoPlay="true"

             ImageDescriptionLabelID="lblDesc"

             NextButtonID="btnNext"

             PreviousButtonID="btnPrev"

             PlayButtonID="btnPlay"

             PlayButtonText="Play"

             StopButtonText="Stop"

             Loop="true" >

       </asp:SlideShowExtender>       

    </div>

     <div style="width:200px">

            /*Description about the image will be shown in this Label*/

     <asp:Label ID="lblDesc" runat="server" Text=""></asp:Label><br />

           /*Previous, Next Button to see the previous, next image and Play and  stop button to start and stop the  slide show */

         <asp:Button ID="btnPrev" runat="server" Text="Previous" />

         <asp:Button ID="btnPlay" runat="server" Text="" />

         <asp:Button ID="btnNext" runat="server" Text="Next" />

        </div>

 </div>

    </form>

</body>

</html>

Aspx.cs Page

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

public partial class _Default : System.Web.UI.Page

{

    protected void Page_Load(object sender, EventArgs e)

    {

        if (!IsPostBack)

        {

           

        }

    }

    [System.Web.Services.WebMethod]

    [System.Web.Script.Services.ScriptMethod]

    public static AjaxControlToolkit.Slide[] GetImagesForSlide()

    {

        AjaxControlToolkit.Slide[] imgSlide = new AjaxControlToolkit.Slide[4];

        /*Provide some images for slide show*/

        imgSlide[0] = new AjaxControlToolkit.Slide("images/pic1.jpg", "Flower", "Flower");

        imgSlide[1] = new AjaxControlToolkit.Slide("images/pic2.jpg", "City", "Atlanta");

        imgSlide[2] = new AjaxControlToolkit.Slide("images/pic3.jpg", "Picture", "Imagine");

        imgSlide[3] = new AjaxControlToolkit.Slide("images/pic4.png", "Team Logo", "Logo");

        return (imgSlide);

    }

}

Ajax BalloonPopupExtender in asp.net

Output:

Aspx Page :

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

<%@ 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">

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

<head runat="server">

    <title></title>

</head>

<body>

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

    <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">

    </asp:ToolkitScriptManager>

    <div>

         <asp:TextBox ID="MessageTextBox" runat="server" Width="200" autocomplete="off" />

        <br />

        <br />

        <asp:Panel ID="Panel2" runat="server">

            This Balloon Popup uses the Cloud style.

        </asp:Panel>

        <asp:BalloonPopupExtender ID="PopupControlExtender2" runat="server" TargetControlID="MessageTextBox"

            BalloonPopupControlID="Panel2" Position="BottomRight" BalloonStyle="Rectangle" BalloonSize="Small"

            UseShadow="true" DisplayOnClick="true" DisplayOnFocus="true" />

    </div>

    <br />

    <br /><br />

     <asp:TextBox ID="TextBox1" runat="server" Width="200" autocomplete="off" />

        <br />

        <br />

        <asp:Panel ID="Panel1" runat="server">

            This Balloon Popup uses the Cloud style.

        </asp:Panel>

        <asp:BalloonPopupExtender ID="BalloonPopupExtender1" runat="server" TargetControlID="TextBox1"

            BalloonPopupControlID="Panel1" Position="BottomRight" BalloonStyle="Cloud" BalloonSize="Small"

            UseShadow="true" DisplayOnClick="true" DisplayOnFocus="true" />

    </form>

</body>

</html>

Watermark In TextBox Through "placeholder" in asp.net

Output :

When We Enter a text then Water Mark will Be Disapear.

Aspx Page :

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

<!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></title>

</head>

<body>

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

    <div>

        <asp:Panel ID="Panel1" Width="300px" Height="120px" BackColor="Teal"  runat="server">

        

   <asp:Label ID="Label1" runat="server" Font-Bold="true" ForeColor="White" Font-Size="X-Large" Text="Email"></asp:Label>

            

   <asp:TextBox ID="TextBox1" placeholder="Enter Email Id" runat="server"></asp:TextBox>

        </asp:Panel>

    </div>

    </form>

</body>

</html>