# 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]  | 
# Tuesday, 11 December 2007
Tuesday, 11 December 2007 11:47:15 (GMT Standard Time, UTC+00:00)  #    Disclaimer  |  Comments [2]  | 
# Friday, 18 May 2007

I'm already subscribed for that event and if you would like to come to you can go to this page: http://msevents.microsoft.com/CUI/EventDetail.aspx?EventID=1032340308&Culture=en-US.

Hope to see you there!

Grz, Kris.

Friday, 18 May 2007 09:07:54 (GMT Daylight Time, UTC+01:00)  #    Disclaimer  |  Comments [0]  | 
# Friday, 04 May 2007

One of my fellow MVPs created a nice article on how to make a Mash-it Up with ASP.NET AJAX: Using a proxy to access remote APIs. Enjoy the read!

Grz, Kris.

Friday, 04 May 2007 10:00:40 (GMT Daylight Time, UTC+01:00)  #    Disclaimer  |  Comments [0]  | 
# Saturday, 21 April 2007

Last week I needed a calendar control to input dates into a textbox, in Belgian notation, so I decided to give the Calendar extender control in the ASP.NET AJAX Toolkit a go.

I put this line in my web.config: <globalization culture="nl-BE" uiCulture="nl-BE" />

I added a TextBox control and a Calendar extender but it always gave me US notation. So I went out looking for a solution. Searching on the ASP.NET forums quickly answered my question. The ScriptManagers EnableGlobalization property seems not to be set by default. After setting it to true my problem was solved immediately.

This was my little test code:

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

    2 <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>

    3 

    4 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    5 

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

    7 <head runat="server">

    8     <title>Untitled Page</title>

    9 </head>

   10 <body>

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

   12     <div>

   13         <asp:ScriptManager ID="ScriptManager1" runat="server" EnableScriptGlobalization="true">

   14         </asp:ScriptManager>

   15         <asp:TextBox runat="server" ID="TextBoxDate" Width="116px" />

   16         <asp:Button runat="server" ID="ButtonSave" OnClick="ButtonSave_Click" Text="Save" />

   17         <br />

   18         <asp:Label ID="LabelDate" runat="server"></asp:Label>

   19         <ajaxToolkit:CalendarExtender runat="server" ID="Calendar1"

   20         FirstDayOfWeek="Monday"

   21         TargetControlID="TextBoxDate" />

   22     </div>

   23     </form>

   24 </body>

   25 </html>

And the CodeFile:

    1 using System;

    2 using System.Data;

    3 using System.Configuration;

    4 using System.Collections;

    5 using System.Web;

    6 using System.Web.Security;

    7 using System.Web.UI;

    8 using System.Web.UI.WebControls;

    9 using System.Web.UI.WebControls.WebParts;

   10 using System.Web.UI.HtmlControls;

   11 

   12 public partial class culturewithoutsettingscriptmanager : System.Web.UI.Page

   13 {

   14     protected void Page_Load(object sender, EventArgs e)

   15     {

   16 

   17     }

   18     protected void ButtonSave_Click(object sender, EventArgs e)

   19     {

   20         DateTime dt;

   21         DateTime.TryParse(TextBoxDate.Text.Trim(), out dt);

   22 

   23         LabelDate.Text = dt.ToShortDateString();

   24     }

   25 }

Testing it with my birthdate, 13/06/1975, I got the expected result in LabelDate.

Grz, Kris. 

kick it on DotNetKicks.com

Saturday, 21 April 2007 16:29:30 (GMT Daylight Time, UTC+01:00)  #    Disclaimer  |  Comments [0]  | 
# Sunday, 25 February 2007

Joe Stagner is doing it again. After quite a lot video material on ASP.NET AJAX he just started doing one about AJAX patterns. For the moment there's only one video available but more will be coming in the next weeks/months from now on. The current video is about the Predictive Fetch Pattern.

You can learn more about AJAX patterns on the dedicated site: ajaxpatterns.org.

Grz, Kris.

Sunday, 25 February 2007 16:08:09 (GMT Standard Time, UTC+00:00)  #    Disclaimer  |  Comments [0]  | 
# Sunday, 18 February 2007

No, this isn't some spam about getting your degree from university for $... This blog post is about the MIX university where you can get handson labs about WPF, Virtual Earth, ASP.NET AJAX or Vista Sidebar Gadgets. Check it out: http://www.visitmix.com/university/

Grz, Kris.

Sunday, 18 February 2007 09:59:10 (GMT Standard Time, UTC+00:00)  #    Disclaimer  |  Comments [0]  | 
# Thursday, 01 February 2007

Yesterday evening I gave a presentation about ASP.NET AJAX. About 30 attendees came to see some small demos about the UpdatePanel, giving precedence to certain async callbacks or cancelling one. Apparently everyone liked the demo material and the response was good.

I also used ZoomIt, a free utility that's really helpfull during presentations, during the session. No more changing font sizes etc. You can download it here.

I'll post the demo + slides after some cleaning up and providing somewhat more detailed information to better understand the demo's without the explanation of the speaker.

This evening I'll also be attending the talk provided by Scott Guthrie so I hope to see some familiar faces there too.

Another interesting thing to note: the source code of ASP.NET AJAX Extensions has been made available. Grab the bits here.

Another thing to note: Apparently there's a small issue with the current release of ASP.NET AJAX but there's a workaround. Take a look at the following article: How to work around the "Access denied" cross-domain frame issue in ASP.NET Ajax 1.0.

Grz, Kris.

kick it on DotNetKicks.com

Thursday, 01 February 2007 09:48:33 (GMT Standard Time, UTC+00:00)  #    Disclaimer  |  Comments [0]  | 
# Tuesday, 23 January 2007

Woohoo!!

I just found out that the RTM bits are available for download:

ASP.NET AJAX Extensions
ASP.NET AJAX Futures CTP January
ASP.NET AJAX Control Toolkit

Update: Scott Guthrie also wrote a, more lengthy, article about it on his blog. Apparently they're also releasing the source code of the Extensions (UpdatePanel, UpdateProgress, ...). Personally I think this is great news and could help in the adoption of this AJAX framework.

Grz, Kris.

kick it on DotNetKicks.com

Tuesday, 23 January 2007 19:04:44 (GMT Standard Time, UTC+00:00)  #    Disclaimer  |  Comments [0]  | 
# Saturday, 06 January 2007

Though I'm already quite familiar with ASP.NET I'm just now starting to experiment with ASP.NET AJAX for real. I did some testing with the early alpha's about a year ago.

After installing the Extensions (RC1) and the December CTP I also downloaded and installed the samples to get a look at how it could work. I started with the SimpleList application and after copying the assemblies Microsoft.Web.Preview.dll and System.Web.Extensions.dll I soon found out that the webform 2_SimpleList_AutoComplete_DragandDrop.aspx doesn't really behave that great. So I did some digging around and I soon found out that the web.config wasn't entirely correct. I added the following parts:

   23     <profile>

   24       <properties>

   25         <add name="dragOverlayPosition"/>

   26       </properties>

   27     </profile>

because this part's used by the DragOverlayExtender control in the page of which it's the content of the ProfileProperty attribute. After that was done the page could be opened but after dragging the "Notes" around I got a javascript error. It seemed that the <profileService> in the web.config was still commented out and that the properties weren't set properly. I uncommented the part and filled in the properties like this in order to get it to work properly:

   92       <profileService enabled="true"

   93                       readAccessProperties="dragOverlayPosition"

   94                       writeAccessProperties="dragOverlayPosition" />

And now the application works like a charm. 

Now I hope to find something in ASP.NET AJAX like drag & drop and auto updating of where an element was. Just like the demo of script.aculo.us' shopping cart. Hmm, guess I still have quite some learning to do.

Grz, Kris.

kick it on DotNetKicks.com

Saturday, 06 January 2007 18:35:12 (GMT Standard Time, UTC+00:00)  #    Disclaimer  |  Comments [0]  | 
# Thursday, 04 January 2007

Hi,

I always like to recommend these tutorials to people who are taking their first steps with ASP.NET 2.0. Since I have a couple days off I thought, why not take the lessons myself? The first tutorial shows how to use TableAdapters, which was something I never used before, so it also turned out to be very interesting for me too.

You can find the data tutorials here.

The next weekend and weeks I hope to spend some time on ASP.NET AJAX as well.

Grz, Kris.

Thursday, 04 January 2007 13:25:38 (GMT Standard Time, UTC+00:00)  #    Disclaimer  |  Comments [0]  | 
# Tuesday, 24 October 2006

You can listen to the podcast from Hanselminutes.com. Podcast 37 is an interview with Scott Guthrie.

Also Dino Esposito was busy writing about/teaching ASP.NET AJAX. This resulted in an upcoming book called Introducing ASP.NET 2.0 AJAX Extensions. Best of all, you can download a free chapter of it here.

The TOC of the upcoming book:

  • Building Blocks of Ajax-style Web Applications
  • Building Blocks of the Atlas Application Framework
  • Updatable Page Fragments
  • Atlas Control Toolbox & Behaviors
  • The Atlas Client Library
  • Web Services
  • Client-side Data Binding
  • Atlas Gadgets
  • I can only hope that the final book will cover the updated Microsoft AJAX bits since last week the Beta 1 was released and I already saw on the ASP.NET forums, where I'm a moderator and top 10 poster, that a lot of threads are added with questions/problems about the new bits as there seems to be a lot of changes since the CTP releases.

    Grz, Kris.

    Tuesday, 24 October 2006 13:56:18 (GMT Daylight Time, UTC+01:00)  #    Disclaimer  |  Comments [3]  | 
    # Friday, 29 September 2006

    Hmm, I hope the marketing guys of Microsoft aren't going to keep renaming Atlas. I already found it hard enough to not speak about Atlas anymore but of Microsoft AJAX. Seems it's renamed again. Read my former post about the renaming of Atlas.

    Here's the new naming for the moment:

  • Microsoft AJAX Library:  The client-side Javascript library (i.e., all the .js files) that works with any browser and also supports any server-side framework, not just ASP.NET.
  • ASP.NET 2.0 AJAX Extensions: The server-side functionality that seamlessly integrates with ASP.NET and uses the same programming model familiar to existing ASP.NET developers.
  • ASP.NET AJAX Control Toolkit: The set of free, shared source controls and components that currently form the "Atlas" Control Toolkit community project hosted on CodePlex.
  • ASP.NET AJAX = Microsoft AJAX Library + ASP.NET 2.0 AJAX Extensions.

    Grz, Kris.

  • Friday, 29 September 2006 07:09:46 (GMT Daylight Time, UTC+01:00)  #    Disclaimer  |  Comments [2]  | 
    # Wednesday, 13 September 2006

    I'm probably one of the last blogging about this but Atlas, the AJAX framework by Microsft, is going to be renamed. Also other good news: they'll do their best to ship a version 1.0, which will be supported, this year. Now we only get to get used to the new names:

    • Microsoft AJAX Library:  The client-side JavaScript library (i.e., all the .js files) that works with any browser and also supports any server-side framework, not just ASP.NET.
    • ASP.NET 2.0 AJAX Extensions: The server-side functionality that seamlessly integrates with ASP.NET and uses the same programming model familiar to existing ASP.NET developers.
    • ASP.NET AJAX Control Toolkit: The set of free, shared source controls and components that currently form the "Atlas" Control Toolkit community project hosted on CodePlex.
    • Microsoft AJAX = Microsoft AJAX Library + ASP.NET 2.0 AJAX Extensions.

    You can read more about it on the blogs of Scott Guthrie, Brian Goldfarb & Keith Smith.

    Grz, Kris.

    kick it on DotNetKicks.com

    Wednesday, 13 September 2006 17:42:43 (GMT Daylight Time, UTC+01:00)  #    Disclaimer  |  Comments [0]  | 
    # Wednesday, 06 September 2006

    Unfortunately I don't understand Portugese. The reason why? There are a bunch of video downloads available right here.

    Grz, Kris.

    kick it on DotNetKicks.com

    Wednesday, 06 September 2006 19:22:08 (GMT Daylight Time, UTC+01:00)  #    Disclaimer  |  Comments [0]  |