AJAX Control Toolkit PopUp Control Tutorials using Asp.NET C#



AJAX Control Toolkit PopUp Control Tutorials using Asp.NET C#

 

AJAX Control Toolkit PopUp Control Tutorials using Asp.NET C#
If you were looking for a Tutorial based on the AJAX Control PopUP Control Extender, then you reached the right place.
In Today’s AJAX tutorial we will go over the PopUp Control Extender from the AJAX control toolkit Library. Chances are you have experienced this Control several times a day on many of your favorite websites and social communities. One in particular has 500 Million Members.
Need help with cloud hosting? Try Server Intellect. We used them for our cloud hosting services and we are very happy with the results!
Ever found you typing in a search bar and getting suggestions automatically? And wondering how they do that? Well they were using a combination of the PopUp control along with other extenders.
This is an awesome tool to process a certain region without having to postback the entire application, leading to better Server and client side performance.
We used over 10 web hosting companies before we found Server Intellect. Our new server with cloud hosting, was set up in less than 24 hours. We were able to confirm our order over the phone. They responded to our inquiries within an hour. Server Intellect's customer support and assistance are the best we've ever experienced.
In a few weeks we will do an awesome Facebook Style PopUp Style Examples where you get Auto Suggestions from a Database. Stay tuned for that one.
In the meantime we will show you a basic Example using this control in Visual Studio 2010.
Below We Referenced the AJAX controls and Properties from ASP.NET
PopupControl is an ASP.NET AJAX extender that can be attached to any control in order to open a popup window that displays additional content. This popup window will probably be interactive and will probably be within an ASP.NET AJAX UpdatePanel, so it will be able to perform complex server-based processing (including postbacks) without affecting the rest of the page. The popup window can contain any content, including ASP.NET server controls, HTML elements, etc. Once the work of the popup window is done, a simple server-side call dismisses it and triggers any relevant script on the client to run and update the page dynamically.
The properties in italics are optional.
  1. <ajaxToolkit:PopupControlExtender ID="PopEx" runat="server"  
  2.     TargetControlID="DateTextBox"  
  3.     PopupControlID="Panel1"  
  4.     Position="Bottom" />  
·         TargetControlID - The ID of the control to attach to
·         PopupControlID - The ID of the control to display
·         Position - Optional setting specifying where the popup should be positioned relative to the target control. (Left, Right, Top, Bottom, Center)
·         CommitProperty - Optional setting specifying the property on the control being extended that should be set with the result of the popup
·         CommitScript - Optional setting specifying additional script to run after setting the result of the popup
·         OffsetX/OffsetY - The number of pixels to offset the Popup from its default position, as specified by Position.
·         Animations - Generic animations for the PopupControlExtender. See the Using Animations walkthrough and Animation Reference for more details.
o    OnShow - The OnShow animation will be played each time the popup is displayed. The popup will be positioned correctly but hidden. The animation can use to display the popup along with any other visual effects.
o    OnHide - The OnHide animation will be played each time the popup is hidden.
 
 
·         Let’s Add a new WebForm to this project and name it Popup.aspx
·         Next we will add a ScriptManager to the page.
·         Then for this project we will
·         Add Target controls (like text box,button), PopUp controls(panels) and Popup Control extender. Set target and Popup controls.
·         You can add as few or as many as you like just remember to set the Target properties. For this tutorials please reference the markup below to see how we did and Set up the target properties and Extenders.
·         You may also download the source file as well to follow along exactly to see how we did it. This is just an example of the PopUp Extender.
·         For this Example we drag and drop 2 Text Boxes, Remember to name them and Set Properties.
·         Add 2 labels and 1 Button and name the button Add Reminder.
 
The markup of the page will look like
<%@ Page Language="C#" %>
<%@ 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">
    protected void ReminderButton_Click(object sender, EventArgs e)
    {
        string text;
        try
        {
            text = string.Format("A reminder would have been created for {0} with the message \"{1}\"",
                DateTime.Parse(DateTextBox.Text).ToLongDateString(), MessageTextBox.Text);
        }
        catch (FormatException ex)
        {
            text = string.Format("[Unable to parse \"{0}\": {1}]", DateTextBox.Text, ex.Message);
        }
        Label1.Text = HttpUtility.HtmlEncode(text);
    }
    protected void Calendar1_SelectionChanged(object sender, EventArgs e)
    {
        // Popup result is the selected date
        PopupControlExtender1.Commit(Calendar1.SelectedDate.ToShortDateString());
    }
    protected void RadioButtonList1_SelectedIndexChanged(object sender, EventArgs e)
    {
        if (!string.IsNullOrEmpty(RadioButtonList1.SelectedValue))
        {
            // Popup result is the selected task
            PopupControlExtender2.Commit(RadioButtonList1.SelectedValue);
        }
        else
        {
            // Cancel the popup
            PopupControlExtender2.Cancel();
        }
        // Reset the selected item
        RadioButtonList1.ClearSelection();
    }
</script>
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Ajax Control - Popup Control</title>
    <style>
   
.popupControl{
                background-color:White;
                position:absolute;
                visibility:hidden;
}
    </style>
</head>
<body>
    <form id="form1" runat="server">
     <asp:ToolkitScriptManager ID="ToolkitScriptManager1"   runat="server">
        </asp:ToolkitScriptManager>
      
        <b >PopupControl Demonstration</b><br /><br />
   
        Enter date for new reminder:
        <asp:TextBox ID="DateTextBox" runat="server" Width="80" autocomplete="off" /><br /><br />
        <asp:Panel ID="Panel1" runat="server" CssClass="popupControl">
            <asp:UpdatePanel runat="server" ID="up1">
                <ContentTemplate>
                   <center>
                        <asp:Calendar ID="Calendar1" runat="server" Width="160px" DayNameFormat="Shortest"
                            BackColor="White" BorderColor="#999999" CellPadding="1" Font-Names="Verdana"
                            Font-Size="8pt" ForeColor="Black" OnSelectionChanged="Calendar1_SelectionChanged">
                                <SelectedDayStyle BackColor="#666666" Font-Bold="True" ForeColor="White" />
                                <TodayDayStyle BackColor="#CCCCCC" ForeColor="Black" />
                                <SelectorStyle BackColor="#CCCCCC" />
                                <WeekendDayStyle BackColor="#FFFFCC" />
                                <OtherMonthDayStyle ForeColor="#808080" />
                                <NextPrevStyle VerticalAlign="Bottom" />
                                <DayHeaderStyle BackColor="#CCCCCC" Font-Bold="True" Font-Size="7pt" />
                                <TitleStyle BackColor="#999999" Font-Size="7pt" BorderColor="Black" Font-Bold="True" />
                        </asp:Calendar>
                    </center>
                </ContentTemplate>
            </asp:UpdatePanel>
        </asp:Panel>
        <asp:PopupControlExtender ID="PopupControlExtender1" runat="server"
            TargetControlID="DateTextBox"
            PopupControlID="Panel1"
            Position="Bottom" />
       
        Reminder message:
        <asp:TextBox ID="MessageTextBox" runat="server" Width="200" autocomplete="off" /><br /><br />
        <asp:Panel ID="Panel2" runat="server" CssClass="popupControl">
            <div style="border: 1px outset white; width: 100px">
                <asp:UpdatePanel runat="server" ID="up2">
                    <ContentTemplate>
                        <asp:RadioButtonList ID="RadioButtonList1" runat="server" AutoPostBack="true"
                            OnSelectedIndexChanged="RadioButtonList1_SelectedIndexChanged">
                                <asp:ListItem Text="Walk dog" />
                                <asp:ListItem Text="Feed dog" />
                                <asp:ListItem Text="Feed cat" />
                                <asp:ListItem Text="Feed fish" />
                                <asp:ListItem Text="Cancel" Value="" />
                        </asp:RadioButtonList>
                    </ContentTemplate>
                </asp:UpdatePanel>
            </div>
        </asp:Panel>
        <asp:PopupControlExtender ID="PopupControlExtender2" runat="server"
            TargetControlID="MessageTextBox"
            PopupControlID="Panel2"
            CommitProperty="value"
            Position="Bottom"
            CommitScript="e.value += ' - do not forget!';" />
 
        <asp:UpdatePanel ID="UpdatePanel3" runat="server">
            <ContentTemplate>
                <asp:Button ID="ReminderButton" runat="server" Text="Add reminder" OnClick="ReminderButton_Click" />
                <br /><br />
                <asp:Label ID="Label1" runat="server" Text="[No response provided yet]" />
            </ContentTemplate>
        </asp:UpdatePanel>
  
    </form>
</body>
</html>
 
 Load the page in browser looks like as follows
 
See how easy that was?
We used over 10 web hosting companies before we found Server Intellect. Our new server with cloud hosting, was set up in less than 24 hours. We were able to confirm our order over the phone. They responded to our inquiries within an hour. Server Intellect's customer support and assistance are the best we've ever experienced.
 
 

Thank you for reading our tutorial on AJAX Controls, we aim to provide the best AJAX tutorials. Learning AJAX in ASP.NET is easy and we hope you are getting your hands dirty by trying different things and coming up with your own ideas. If you have any questions or concerns, please feel free to suggest a tutorial or you can comment below in the comments section.

AJAXTutorials.com



Comments
Lush Acres said:

Several buses are available near Lush Acres EC along with shopping centers and restaurants. Lush Acres EC is also near Waterway Point, the shopping, dining and entertainment hub which is scheduled to open in 2 years time in Sengkang. Also, it is right beside Fernvale Link. Entertainment for your loved ones and friends are therefore at your fingertips with the full condo facilities as well as the amenities near Lush Acres EC.

Posted Jun 21, 2013 12:45 AM
J Gateway said:

Id really love to stay around this website and be a part of where I can get a lot of valuable and beneficial advice from other experienced people that share this information.

Posted Jun 23, 2013 1:56 PM
Duo Residences said:

Id really love to stay around this website and be a part of where I can get a lot of valuable and beneficial advice from other experienced people that share this information.

Posted Jun 23, 2013 1:56 PM
Kensington Square said:

Future residents will be able to walk to the existing Bartley MRT in the Circle Line. With such a short drive to the city area as well as the orchard and bugis area, entertainment for your love ones and family will come at a stone’s throw away.

Posted Jul 7, 2013 5:40 AM
Kensington Square said:

Hello to every one, the contents existing at this

web page are in fact awesome for people knowledge, well, keep up

the good work fellows.

Posted Jul 16, 2013 5:00 AM
The Skywoods said:

Have read a couple of of the articles on your website now, and I really like your style of blogging. I added it to my favorites blog website list and will probably be checking back soon.

Posted Jul 16, 2013 5:37 AM
The Glades said:

Thanks for providing some food for thought with this post.

Posted Jul 16, 2013 5:41 AM
Sea Horizon said:

Sea Horizon EC facilities provide full family entertainment needs for your family and loved ones. Indulge in a serene and tranquil lifestyle right in the heart of Pasir Ris.

Posted Jul 28, 2013 9:56 PM
The Skywoods Condo said:

The Skywoods is a new upcoming 99-years leasehold condominium developed by Hock Lian Seng Holdings. It is close to upcoming Hillview MRT. Experience breathtaking scenic views only at The Skywoods @ Dairy Farm.

Posted Aug 1, 2013 3:27 AM
Sembawang EC said:

Sembawang EC has full and unique facilities, which includes a guard house, clubhouse, Function Room & Indoor Gym Tennis Court, 50m Freeform Pool Pool Deck, Wading Pool, Splash Pool & Family Pool Jacuzzi & Hydro Spa, BBQ Area Dining and Play Fountain, Fitness Alcove & Children’s Playground and Garden Trail.

Posted Aug 4, 2013 11:14 PM
mekanik karıştırıcı said:

Thanks for providing some food for thought with this post.

Posted Aug 7, 2013 2:23 PM
The Panorama Ang Mo Kio said:

Ang Mo Kio Condo Launch is also near to Nex Shopping Centre as well as the buzzling Toa Payoh area. Entertainment for your loved ones and friends is therefore at your fingertips with the full condo facilities as well as the amenities around Ang Mo Kio.

Posted Aug 30, 2013 1:07 AM
restaurant chinois clamart said:

Through this publish, we know that your excellent information, You have a brilliant yet eye-catching way of writing.

Posted Sep 7, 2013 6:41 AM
Buy Facebook Photo Likes said:

Innovation distinguishes between a leader and a follower.

<a href="http://www.1millionfans.com/buy-facebook-photo-likes/">Buy Facebook Photo Likes</a>

Posted Sep 11, 2013 4:25 AM
Buy Facebook Fans said:

Thank you for this post. Thats all I are able to say. You most absolutely have built this blog website into something speciel. You clearly know what you are working on, youve insured so many corners.thanks

Posted Sep 13, 2013 5:19 AM
Buy Facebook Fans said:

You produce a great point in your own final paragraph. We couldn’t agree more together with your points. In today’s modern world, your approach to this issue is lacking in today’s kids. We need to ensure that our kids find out more on this topic so we nev

Posted Sep 13, 2013 5:20 AM
Buy Facebook Fans said:

Thank you for this post. Thats all I are able to say. You most absolutely have built this blog website into something speciel. You clearly know what you are working on, youve insured so many corners.thanks

Posted Sep 13, 2013 5:20 AM
The Inflora said:

Future residents will be able to walk to the up and coming Tampines East MRT station from The Inflora Condo. Also, nature and recreation awaits your family and friends at the nearby Tampines Park. Also, the ultimate shopping and dining experience awaits you at the Singapore Expo as as well as Changi City Point which is just a short drive away

Posted Sep 13, 2013 9:04 AM
Skyvue Launch said:

Sky Vue Condo will be accessible via public transport along Bishan Road. Commuting to Toa Payoh and Serangoon area as well as the city area is therefore very convenient. It is also near to many eateries along the Upper Serangoon area as well as the Thomson area.

Posted Sep 17, 2013 12:58 AM
Small Business SEO said:

The pursuit of truth and beauty is a sphere of activity in which we are permitted to remain children all our lives.

Posted Sep 24, 2013 3:35 AM
Small Business SEO said:

The pursuit of truth and beauty is a sphere of activity in which we are permitted to remain children all our lives.

Posted Sep 24, 2013 3:35 AM
Small Business SEO said:

The pursuit of truth and beauty is a sphere of activity in which we are permitted to remain children all our lives.

Posted Sep 24, 2013 3:35 AM

Leave a Comment