Contents tagged with AJAX

  • Free Microsoft Press E-Books!

    Good deal: 3 free e-books from Microsoft Press!

    Go to sign with your Windows Live ID and get the full complete books free chapters and the full complete LINQ book!

    Introducing Microsoft LINQ
    by Paolo Pialorsi and Marco Russo


    Introducing Microsoft ASP.NET AJAX
    by Dino Esposito

    Chapter 1: The AJAX Revolution
    Chapter 5: The AJAX Control Toolkit

    Introducing Microsoft Silverlight 1.0
    by Laurence Moroney

    Chapter 1: Silverlight and User Experience
    Chapter 5: Programming Silverlight with JavaScript

    [edit: only the LINQ ebook is fully downloadable, sorry for the confusion.]



  • realDEVELOPMENT_07 Canadian Tour for Web Developers

    The Real Development Reloaded Tour will be in Montreal on October 18.

    I had the chance to review the content of this event, lots of good tips and tricks will be shown, and I am sure you will learn something new, even if like me you do ASP.NET since you are born (almost!).
    This tour focus on today's technologies, the ones you use on your day to day job as a web developer. So don't miss this chance to consolidate your knowledge, feel more confident on ASP.NET, AJAX, and learn about the best tools for your browser!


    realDEVELOPMENT_07 tour is coming to a Canadian city near you. This half-day event is your chance to get a closer look at the technologies you use to create real web applications.

    In the sessions, you’ll learn how to use:

    • Visual Studio® development system to debug and trace your web application
    • Third party tools and utilities such as the Internet Explorer® internet browser Readiness Toolkit, Developer Toolbar, and Fiddler
    • the Enterprise Library to implement best practices
    • ASP.NET AJAX to create more immersive and interactive experiences

    Link for Montreal registration:
    MONTREAL - OCT 18, 2007 (8:30 AM - 12 NOON)

    For other dates and cities, read this post.


  • Building a simple mashup step by step with Popfly

    If you don't know what is Popfly, please read my previous post for an introduction : Popfly: Let's have fun!

    Here my goal is just to show you the few steps involved during the creation of a complete mashup with Popfly, for those of you who do not want to bother asking for an invitation nor watching a webcast, or maybe fed up with beta things?
    Just look below and discover how to build a Blaugh carousel in 35 sec (4 steps)!! 

    One of the options in the home page at is to "Create a Mashup", and is kindly enough to remind us the definition of a mashup.

    Building a mashup with Popfly is just a matter of using at last two existing blocks and link them together.

    So here we go, click on "Create a mashup" !!


    1. From the Blocks list on the left pane, drag and drop the Blaugh block on the work surface.
    Note: the list is already impressive, an easy way to find a block is to begin typing letters in the search box and results appears live in an AJAX way.

    The block appears with a 3d effect (Silverlight), and can be configured with the wrench icon (but we do not even need that now).

    Click on the bulb icon to get a list of blocks which would work well with the current one.

    2. Add a Carousel block.

    3. Link both blocks together by clicking on the blue disc:

    4. You are done!
    Note that the work area's background displays a preview of your mashup :

    Click on preview to test your mashup : the page shows a 3d carousel displaying last 20 Blaugh pictures!


    Advanced steps ;-) click on the wrench to configure a block :

    You can customize inputs (parameters) of each available operations (web service). By default, you see that my carousel's parameters has been filled with data output from the Blaugh's block : very smart!!

    Also hungry coders will be happy to read that you can add custom code in your mashup, so you can tweak the generated JavaScript to fit your needs.

    See you on a next post to learn what you can do with your mashup.


  • AJAX loading indicator like GMail

    Simone Chiaretta wrote a very nice post about building a Gmail-like loading indicator (that means top/right corner fixed, regardless of how the users scrolls or sizes the window) with an AJAX UpdateProgress control, an animated gif and some CSS; you can read his great article there :

    How to make a Gmail-like loading indicator with ASP.NET Ajax

    Unfortunatly his solution don't work for the one like me who still have IE6 at work, as css position: fixed works with all major browsers except... IE6!

    Someone on his comments propose to use CSS hack and expression to make it happens in IE6, but with the magic of AJAX Control Toolkit and the AlwaysVisible control you can make it easier and cleaner!

    The final result in IE6:

    Here is the code I use:

    <asp:UpdatePanel ID="UpdatePanel2" runat="server">
            <asp:Button ID="Button2" runat="server"
    OnClick="Button2_Click" Text="Async Postback" /> Server time: <asp:Label ID="Label2" runat="server"
    Text="Label"></asp:Label> </ContentTemplate> </asp:UpdatePanel> <asp:UpdateProgress DynamicLayout="false" ID="UpdateProgress2"
    runat="server"> <ProgressTemplate> <div class="Progress"> <img src="Images/ajax-loader.gif" /> Loading ... </div> </ProgressTemplate> </asp:UpdateProgress> <asp:AlwaysVisibleControlExtender ID="AlwaysVisibleControlExtender1"
    runat="server" TargetControlID="UpdateProgress2"
    HorizontalSide="Right" VerticalSide="Top" HorizontalOffset="0"> </asp:AlwaysVisibleControlExtender>


    And the CSS: 

    .Progress img {

    You can download the source code here.


    So how does the AlwaysVisibleControl work ?
    In fact it simply use JavaScript to check browser and version :

    • If IE<=6 then it uses absolute position and internally take advantage of the Animation Framework to fix the div.
    • Else (IE>=7, FF2, etc...) it simply uses css position: fixed.

    Here is the interesting part from the AlwaysVisible control source code:

    this._animate = (Sys.Browser.agent == Sys.Browser.InternetExplorer
    && Sys.Browser.version < 7); if (this._animate) { // Initialize the animations to use the actual properties this._animation = new AjaxControlToolkit.Animation.MoveAnimation( element, this._scrollEffectDuration, 25, 0, 0, false, 'px'); // Make the control use absolute positioning to hover // appropriately and move it to its new home = 'absolute'; } else { // Make the control use fixed positioning to keep it from moving // while the content behind it slides around = 'fixed'; }


    Note: Later I found another good one from Matt Berseth :
    Using an UpdatePanelAnimationExtender to place an animated gif over a GridView: