# Tuesday, 30 June 2009

Strange but true but this is a question that I notice a lot on forums.asp.net. Normally the latest and most up to date version can be found at http://ajaxcontroltoolkit.codeplex.com/Release/ProjectReleases.aspx?ReleaseId=27326 like I described in one of my former blog posts.

How great Codeplex may be it seems that it’s difficult for a lot of people to find the correct version that targets ASP.NET 2.0. If you’re one of these people whose looking for it then navigate to this url: http://www.codeplex.com/AjaxControlToolkit/Release/ProjectReleases.aspx?ReleaseId=11121. As you can see there haven’t been updates out anymore for .NET 2.0 since February 29th 2008.

Update: apparently I already blogged about this in the past: ASP.NET AJAX Control Toolkit only for 3.5 anymore? Seems to me like still not a lot of people can find it.

Grz, Kris.

Tuesday, 30 June 2009 20:18:57 (GMT Daylight Time, UTC+01:00)  #    Disclaimer  |  Comments [0]  | 
# Monday, 29 June 2009

I’ve seen questions about this control over and over again on the forums and decided to write something about it. The most common questions seem to be these:

1) How to show the modalpopup from codebehind?

Quite an easy one. The control itself exposes a Show method. This can be called during a postback for example to show some informative message or to provide a fill in form for an enduser. The following code snippet show how to do it:

e Language="C#" AutoEventWireup="true" CodeBehind="ModalpopupShowFromCodeBehind.aspx.cs" Inherits="WebApplication35Tech.ModalPopupTesting.ModalpopupShowFromCodeBehind" %>
<%@ Register TagPrefix="act" Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" %>

<!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>Show a modalpopupextender from codebehind</title>
    <style type="text/css">

    .modalBackground {
        background-color:Gray;
        filter:alpha(opacity=70);
        opacity:0.7;
    }

    .modalPopup {
        background-color:#ffffdd;
        border-width:3px;
        border-style:solid;
        border-color:Gray;
        padding:3px;
        width:250px;
    }

    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="Scriptmanager1" runat="server" />
        
        <asp:Panel ID="pnlOverlay" style="display:none;" runat="server" CssClass="modalPopup">
            Some informative message: Hello world!
        </asp:Panel>
        
        <asp:Button ID="Button1" Text="Click me" runat="server" 
            onclick="Button1_Click" />
        
        <act:ModalPopupExtender runat="server" ID="mpe" 
            PopupControlID="pnlOverlay" 
            BackgroundCssClass="modalBackground" 
            TargetControlID="pnlOverlay"></act:ModalPopupExtender>
    </div>
    </form>
</body>
</html>

And the codebehind:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace WebApplication35Tech.ModalPopupTesting
{
    public partial class ModalpopupShowFromCodeBehind : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            
        }

        protected void Button1_Click(object sender, EventArgs e)
        {
            mpe.Show();
        }
    }
}

 

This little sample, once the button is clicked and a postback has occured, will lay a so called overlay over the content of the page and in the middle of the screen will show what’s inside pnlOverlay.
Notice that I put the style=”display:none;” in the panel markup. This was done to initially hide the content. Otherwise you get the behavior that the content of the overlay will show on rendering in the browser in the top left corner and then suddenly flashes to the center of the screen which is rather unwanted behavior.

2) How to show the modalpopup from script?

This seems to be a bit more tricky. The modalpopup extender control has an ID and most people seem to the think that this should be used in client script to show it. As many have found out this is incorrect. Besides the ID of an extender it also provides a BehaviorID. This is the one that can be used to for example show our modal popup or to set the value of a slider extender (also a part of the ASP.NET Ajax control toolkit).

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ModalpopupShowFromClientScriptWithjQuery.aspx.cs" Inherits="WebApplication35Tech.ModalPopupTesting.ModalpopupShowFromClientScriptWithjQuery" %>
<%@ Register TagPrefix="act" Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" %>

<!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>Show a modalpopupextender from client script</title>
    <style type="text/css">

    .modalBackground {
        background-color:Gray;
        filter:alpha(opacity=70);
        opacity:0.7;
    }

    .modalPopup {
        background-color:#ffffdd;
        border-width:3px;
        border-style:solid;
        border-color:Gray;
        padding:3px;
        width:250px;
    }

    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
                <asp:ScriptManager ID="Scriptmanager1" runat="server" />
        
        <asp:Panel ID="pnlOverlay" style="display:none;" runat="server" CssClass="modalPopup">
            Some informative message: Hello world!
        </asp:Panel>
        
        <input type="button" id="MyButton" value="Click me" />
        
        <act:ModalPopupExtender runat="server" ID="mpe" 
            PopupControlID="pnlOverlay" 
            BackgroundCssClass="modalBackground" 
            TargetControlID="pnlOverlay"
            BehaviorID="mpeBehaviorID"></act:ModalPopupExtender>
    </div>
    </form>
    <script src="../scripts/jquery-1.3.2.js" type="text/javascript"></script>
    <script type="text/javascript">

        window.onload = function() { $addHandler($get('MyButton'), 'click', showOverlay); }

        function showOverlay() {
            var bid = $find('mpeBehaviorID');
            bid.show();
        }
    
    </script>
</body>
</html>

 

For this sample I made use of the unobtrusive way of capturing a click event of a button. Here I use ASP.NET Ajax to wire up the click event of the button in the onload event of the page. but I could’ve also written the same with jQuery. Note that I’m then mixing 2 different javascript frameworks/libraries together! That little piece of script looks like this:

$(document).ready(function() {
    $('#MyButton').click(function() {
        var bid = $find('mpeBehaviorID');
        bid.show();
    });
});

Once the button is clicked the overlay will show itself.

3) How to reposition the modalpopup?

As we saw in the previous 2 samples the modalpopup shows itself in the center of the screen. Nice but sometimes you want to place it somewhere different. This can be done by using the setLocation function from ASP.NET Ajax. A sample will make it more clear:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ModalpopupChangeScreenPosition.aspx.cs" Inherits="WebApplication35Tech.ModalPopupTesting.ModalpopupChangeScreenPosition" %>
<%@ Register TagPrefix="act" Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" %>

<!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>Reposition a modalpopup</title>
    <style type="text/css">

    .modalBackground {
        background-color:Gray;
        filter:alpha(opacity=70);
        opacity:0.7;
    }

    .modalPopup {
        background-color:#ffffdd;
        border-width:3px;
        border-style:solid;
        border-color:Gray;
        padding:3px;
        width:250px;
    }

    </style>
    <script type="text/javascript">
    
        function pageLoad() {
            $addHandler($get('btn1'), 'click', reposition);
            $addHandler($get('link2'), 'click', showModalPopupViaClient);
        }
        function reposition(ev) {
            ev.preventDefault();
            var posP = Sys.UI.DomElement.getLocation($get('testLocation'));
            var posPnl = Sys.UI.DomElement.getLocation($get('Pnl3'));
            Sys.UI.DomElement.setLocation($get('Pnl3'), posPnl.x, posP.y);
        }
        function showModalPopupViaClient(ev) {
            if (ev !== undefined) {
                ev.preventDefault();
            }
            var modalPopupBehavior = $find('test');
            modalPopupBehavior.show();
            
            var posP = Sys.UI.DomElement.getLocation($get('link2'));
            var posPnl = Sys.UI.DomElement.getLocation($get('Pnl3'));
            
            Sys.UI.DomElement.setLocation($get('Pnl3'), posPnl.x, posP.y);
        }
    
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager runat="server" ID="sm"></asp:ScriptManager>
        <asp:Panel runat="server" ID="Pnl3">
            <asp:TextBox runat="server" ID="txtTest"></asp:TextBox><br />
            <asp:Button runat="server" ID="btn1" Text="Reposition" />
        </asp:Panel>
        <asp:LinkButton runat="server" ID="link1" Text="Click me..."></asp:LinkButton>
        
        <act:ModalPopupExtender runat="server" ID="modal1" PopupControlID="Pnl3"
            TargetControlID="link1" BackgroundCssClass="modalBackground" RepositionMode="None"
            Y="80" BehaviorID="test">
        </act:ModalPopupExtender>
        
        <p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>
        <p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>
        <p id="testLocation">test...</p>
        <p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>
        <p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>
        <input type="button" id="link2" value="Click me too..." />
    </div>
    </form>
</body>
</html>

Once rendered there’s a link at the top and a button on the bottom of the page. Either one can be clicked and because we wired up the event handlers (with the $addHandler shortcut provided by ASP.NET Ajax) the function showModalPopupViaClient gets called. This once again grabs the BehaviorID, mind the sample in point number 2. Once done it grabs several coordinates with the Sys.UI.DomElement.getLocation function call. Then it uses the x position of the panel that acts as the modalpopup and the y position of the button.

However we notice something strange here. When we click the button on the bottom we expect that the overlay is set to the bottom as well due to the x/y positioning. But when we click the link in the left top corner we would expect that it would center as we didn’t add a handler for that click right? This isn’t the case. The modalpopup becomes visible near the top. How is this done? Well, notice in the markup of the modalpopupextender the attribute Y=”80”. This is what makes it all happen. It’s our default position to show the modalpopup.

Once the popup has appeared we can simply click the button Reposition. The function reposition will get called and the modalpopup will reposition itself to the y position of the paragraph with id=testLocation.

 

Grz, Kris.

Monday, 29 June 2009 22:39:40 (GMT Daylight Time, UTC+01:00)  #    Disclaimer  |  Comments [1]  | 
# Thursday, 14 May 2009

Just saw on Twitter that there’s a new version of the ASP.NET AJAX Control toolkit available on codeplex. There are 3 new controls available:

  • HTMLEditor: The HTMLEditor control allows you to easily create and edit HTML content. You can edit in design mode, as a rich text editor, or in source view to edit the HTML markup directly. HTMLEditor demonstration.
  • ComboBox: The ComboBox control provides a DropDownList of items, combined with TextBox. Different modes determine the interplay between the text entry and the list of items. ComboBox demonstration.
  • ColorPicker: The ColorPicker Control Extender can be attached to any ASP.NET TextBox control. It provides client-side color-picking functionality with UI in a popup control. ColorPicker demonstration.

Be sure to also check out the new videos dedicated for these controls and their new tutorials.

There’s also now a new tutorial available on Creating a Custom AJAX Control Toolkit Control Extender. Be sure to check it out.

Grz, Kris.

Thursday, 14 May 2009 08:13:35 (GMT Daylight Time, UTC+01:00)  #    Disclaimer  |  Comments [0]  | 
# Thursday, 04 September 2008

Last week I had to help someone out on the ASP.NET that was asking the question that he couldn't find the 2.0 bits anymore of the ASP.NET AJAX Control Toolkit. Indeed, when you navigate to the Releases tab of the project on Codeplex you'll only see this list:

Source Code AjaxControlToolkit-Framework3.5SP1.zip
source code, 3033K, uploaded Aug 21 - 24104 downloads
Application AjaxControlToolkit-Framework3.5SP1-NoSource.zip
application, 1716K, uploaded Aug 21 - 8256 downloads
Application AjaxControlToolkit-Framework3.5SP1-DllOnly.zip
application, 512K, uploaded Aug 22 - 5704 downloads
Application AjaxControlToolkit-ScriptFilesOnly.zip
application, 238K, uploaded Aug 22 - 2555 downloads
 
Phew, no more 2.0 bits. It seems that Microsoft decided to cut on keeping things rolling since SP1 of .NET 3.5 came out.
 
Luckily for the person I helped out you can still reach to the 2.0 bits by navigating to this url (the release of February 29th 2008).
 
Grz, Kris.
Thursday, 04 September 2008 13:51:08 (GMT Daylight Time, UTC+01:00)  #    Disclaimer  |  Comments [0]  | 
# Thursday, 05 June 2008
Wow, someone has been busy. There just appeared 46 brand new AJAX Control Toolkit tutorials. They're nice and short to show specific topics and needs. Nicely done.

Grz, Kris.

Thursday, 05 June 2008 08:48:59 (GMT Daylight Time, UTC+01:00)  #    Disclaimer  |  Comments [0]  |