Showing posts with label Ajax. Show all posts
Showing posts with label Ajax. Show all posts

ajax controls examples or ajax extenders examples in asp.net

No comments:

ajax AlwaysVisibleControl extender in asp.net or How to use ajax AlwaysVisibleControl in asp.net.

No comments:
ajax AlwaysVisibleControl extender in asp.net or How to use ajax AlwaysVisibleControl in asp.net.

Introducation:

In this example iam going to explain  how to use  AlwaysVisibleControl extender in asp.net.

always visible control extender

Description: 

ResizableControl is an extender that attaches to any element on a web page and allows the user to resize that control with a handle that attaches to lower-right corner of the control. The resize handle lets the user resize the element as if it were a window

When Ever You Want to Use  Ajax Controls in your website First you need Add.
AjaxControlToolkit reference to your application.


<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>

 You can Change TagPrefix Also,Some Exaples tagPrefix="ajax", tagPrefix="cc1",tagPrefix="asp" 
And also you have to add Tool kit Scriptmanager Control under <Form> tag:


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

Your aspx page:.

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server"
    style="height: 1000px; background-image: url('../Images/alway.png');">
    <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
    </asp:ToolkitScriptManager>
    <div>
        <asp:Panel ID="Panel1" runat="server">
            <asp:Image ID="Image1" runat="server" ImageUrl="~/Images/facebook.jpg" />
        </asp:Panel>
        <asp:AlwaysVisibleControlExtender ID="AlwaysVisibleControlExtender1"                          runat="server"
            TargetControlID="Panel1" VerticalSide="Top" VerticalOffset="10"                             HorizontalSide="Center"
            HorizontalOffset="10" ScrollEffectDuration=".1">
        </asp:AlwaysVisibleControlExtender>
    </div>
    </form>
</body>
</html>

ajax Resizable extender example in asp.net or How to use ajax Resizable extender in asp.net.

ajax Resizable extender example in asp.net or How to use ajax Resizable extender in asp.net..

Introducation:

In this example iam going to explain  how to use  Resizable extender Control in asp.net.

Demo:
Resizable extender example

Description:

Resizable Control is an extender that attaches to any element on a webpage and allows the user to resize that control with a handle that attaches to lower corner of the control.The resize handle lets the user resize the elementas if it were a window.The appearance of the resize handle can be specified by the page designer with CSS Style.

When Ever You Want to Use  Ajax Controls in your website First you need Add.
AjaxControlToolkit reference to your application.


<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>

 You can Change TagPrefix Also,Some Exaples tagPrefix="ajax", tagPrefix="cc1",tagPrefix="asp" 
And also you have to add Tool kit Scriptmanager Control under <Form> tag:


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

Your aspx page:.

 

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .HandleCSS
        {
            width: 20px;
            height: 20px;
            background-color: Red;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
    </asp:ToolkitScriptManager>
    <div>
        <asp:Panel ID="Panel1" runat="server" Width="500PX" BorderColor="Highlight"
            BorderStyle="Solid">
           
            Submit Shrink (via Server) Grow (via Client) Last image resize at Sat Jan 04                                          2014 18:57:36 GMT+0530 (India Standard Time) ASP.NET AJAX is a free framework for building a new generation of richer, more interactive, highly personalized cross-browser
web applications. This new web development technology from Microsoft integrates
cross-browser client script libraries with the ASP.NET 2.0 server-based development
framework. In addition, ASP.NET AJAX offers you the same type of development platform  for client-based web pages that ASP.NET offers for server-based pages. And because
ASP.NET AJAX is an extension of ASP.NET, it is fully integrated with server-based
services. ASP.NET AJAX makes it possible to easily take advantage of AJAX techniques on the web and enables you to create ASP.NET pages with a rich, responsive UI and
server communication. However, AJAX isn't just for ASP.NET. You can take advantage
of the rich client framework to easily build client-centric web applications that
            integrate with any backend data provider and run on most modern browsers.

        </asp:Panel>
        <asp:ResizableControlExtender ID="ResizableControlExtender1" runat="server" TargetControlID="Panel1"
            HandleCssClass="HandleCSS">
        </asp:ResizableControlExtender>
    </div>
    </form>
</body>
</html>


ajax ListSearch extender example in asp.net or How to use ajax ListSearch extender in asp.net.

ajax ListSearch extender example in asp.net or How to use ajax ListSearch extender in asp.net.

Introduction:

In this example iam going to explain  how to use  ListSearch extender Control in asp.net.

  If you want to check all the example in my site please check this link Ajax all extenders examples and also you check my previous example Accordion panel extender example.



LIST SEARCH EXTENDER

Description:

The ListSearchExtender lets you search for items in a ListBox or DropDownList by typing. The extender performs an incremental search within the ListBox based on what has been typed so far. The prompt message that gets displayed when you click the list can be customized along with its CSS class and position.

When Ever You Want to Use  Ajax Controls in your website First you need Add.
AjaxControlToolkit reference to your application.

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>

 You can Change TagPrefix Also,Some Exaples tagPrefix="ajax", tagPrefix="cc1",tagPrefix="asp" 
And also you have to add Tool kit Scriptmanager Control under <Form> tag:

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

Your aspx page:


<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div style="margin-bottom: 80px">
        <asp:Label ID="Label1" runat="server" Text="First Click at listbox ,dropdownlist   then select the Country"
            Font-Bold="true" ForeColor="Red"></asp:Label>
    </div>
    <div>
        <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
        </asp:ToolkitScriptManager>
        <asp:ListBox ID="lstboxCountries" runat="server">
            <asp:ListItem>Afghanistan</asp:ListItem>
            <asp:ListItem>Albania</asp:ListItem>
            <asp:ListItem>American Samoa</asp:ListItem>
            <asp:ListItem>Bahamas</asp:ListItem>
            <asp:ListItem>Bahrain</asp:ListItem>
            <asp:ListItem>Bangladesh</asp:ListItem>
            <asp:ListItem>Cambodia</asp:ListItem>
            <asp:ListItem>Cameroon </asp:ListItem>
            <asp:ListItem>Canada</asp:ListItem>
            <asp:ListItem>Denmark</asp:ListItem>
            <asp:ListItem>Djibouti</asp:ListItem>
            <asp:ListItem>Dominica</asp:ListItem>
        </asp:ListBox>
        <asp:ListSearchExtender ID="ListSearchExtender1" TargetControlID="lstboxCountries"
            PromptText="Search Country" PromptPosition="Top" QueryPattern="StartsWith"                 IsSorted="true"
            PromptCssClass="PromptCSSClass" runat="server">
        </asp:ListSearchExtender>
        <asp:DropDownList ID="ddlCountries" runat="server">
            <asp:ListItem>Afghanistan</asp:ListItem>
            <asp:ListItem>Albania</asp:ListItem>
            <asp:ListItem>American Samoa</asp:ListItem>
            <asp:ListItem>Bahamas</asp:ListItem>
            <asp:ListItem>Bahrain</asp:ListItem>
            <asp:ListItem>Bangladesh</asp:ListItem>
            <asp:ListItem>Cambodia</asp:ListItem>
            <asp:ListItem>Cameroon </asp:ListItem>
            <asp:ListItem>Canada</asp:ListItem>
            <asp:ListItem>Denmark</asp:ListItem>
            <asp:ListItem>Djibouti</asp:ListItem>
            <asp:ListItem>Dominica</asp:ListItem>
        </asp:DropDownList>
        <asp:ListSearchExtender ID="ListSearchExtender2" TargetControlID="ddlCountries"               PromptText="Search Country"
            PromptPosition="Top" QueryPattern="StartsWith" IsSorted="true"                             PromptCssClass="PromptCSSClass"
            runat="server">
        </asp:ListSearchExtender>
    </div>
    </form>
</body>
</html>

 


ajax ModalPopup extender example in asp.net or How to use ajax ModalPopup extender in asp.net.

ajax ModalPopup extender example in asp.net or How to use ajax ModalPopup extender in asp.net.

  Introduction:

In this example Iam Going to explain  how to use ModalPopup extender Control in asp.net.

If you want to check all the example in my site please check this link Ajax all extenders examples and also you check my previous example Accordion panel extender

 

 Demo: 

 Description:

The ModalPopup extender allows a page to display content to the user in a "modal" manner which prevents the user from interacting with the rest of the page. The modal content can be any hierarchy of controls and is displayed above a background that can have a custom style applied to it. 


When Ever You Want to Use  Ajax Controls in your website First you need Add.
AjaxControlToolkit reference to your application.


<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>


 You can Change TagPrefix Also,Some Exaples tagPrefix="ajax", tagPrefix="cc1",tagPrefix="asp" 
And also you have to add Tool kit Scriptmanager Control under <Form> tag:


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

Your aspx page:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style>
        .modalBackground
        {
            position: absolute;
            top: 0px;
            left: 0px;
            filter: alpha(opacity=60);
            -moz-opacity: 0.6;
            opacity: 0.6;
        }
        .popup
        {
            background-color: #ddd;
            margin: 0px auto;
            width: 330px;
            position: relative;
            border: Gray 2px inset;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
    </asp:ToolkitScriptManager>
    <div>
        <asp:Panel ID="pnModelPopup" runat="server" CssClass="popup">
            <table>
                <tr>
                    <td>
                        User Name:
                    </td>
                    <td>
                        <asp:TextBox ID="txtUserName" runat="server"></asp:TextBox>
                    </td>
                </tr>
                <tr>
                    <td>
                        Password:
                    </td>
                    <td>
                        <asp:TextBox ID="txtPassword" runat="server"></asp:TextBox>
                    </td>
                </tr>
                <tr>
                    <td>
                   <asp:Button ID="btnSignin" runat="server" Text="Sign in"                                     Style="margin-left: 100px"
                     OnClick="btnSignin_Click" />
                    </td>
                    <td>
                        <asp:Button ID="btnCancel" runat="server" Text="Cancel" />
                    </td>
                </tr>
            </table>
        </asp:Panel>
        <asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server"                                PopupControlID="pnModelPopup"                                             
            TargetControlID="lnkbtnSignin" DropShadow="true"                                            BackgroundCssClass="modalBackground"
            CancelControlID="btnCancel" PopupDragHandleControlID="pnModelPopup"                       OnOkScript="onOk()">
        </asp:ModalPopupExtender>
        <div style="margin-left: 300px">
            <asp:LinkButton ID="lnkbtnSignin" runat="server">Sign in</asp:LinkButton>
        </div>
    </div>
    </form>
</body>
</html>