Kris' blog

Where to download the AJAX Control toolkit that targets .NET 2.0?

Kris van der Mast — Tue, 30 Jun 2009 19:18:57 GMT

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.

ASP.NET AJAX Control toolkit Modalpopupextender control

Kris van der Mast — Mon, 29 Jun 2009 21:39:40 GMT

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.

Exporting embedded resources from the .NET framework with .NET Reflector

Kris van der Mast — Sun, 07 Jun 2009 21:55:00 GMT

The first time I encountered .NET Reflector was at Techdays Belgium in 2003 during a session. I got interested in this valuable tool and used it ever since for disassembling .NET assemblies to code and take a look at the inner workings. If you haven’t downloaded it already then you can grab it here.

A little known fact is that one can also extract embedded resources with this marvelous tool. When you simply open .NET reflector like in figure 1 you can navigate in the treeview to System.Web > Resources.

Figure 1: .NET Reflector assemblies overview

Then scroll down until you find the resource with the name WebUIValidation.js. Right click on it and select Save As… like in figure 2:

Figure 2: Save the resource.

After this action a Filesavedialog window will open so you can save the resource to disk.

Also be sure to check out this demo movie from Redgate itself which shows some nice standard features if you’re not used to working with the product.

Grz, Kris.

Book review: ASP.NET MVC Quickly

Kris van der Mast — Mon, 01 Jun 2009 20:06:19 GMT

I recently read the book ASP.NET MVC Quickly from Maarten Balliauw, published by PACKT Publishing. It’s been one of those few books that I read from cover to cover. Not only because the subject interested me but also because it shows in about 190+ pages an introduction to this new technology from Microsoft. It was clear that the person who wrote it knows quite a lot about the subject and that shows in the book. I really appreciated Appendix A and C where Maarten discusses a sample application he created: CarTrackr.

Chapters 1 & 2 provide some quick introductions as to how the architecture looks like and why you would use it over normal ASP.NET webforms. Provided is a “litmus” test to see whether to go for MVC or Webforms and discusses the advantages of both. Chapter 2 explains what’s in the box when you create a new ASP.NET MVC application with Visual Studio. Also a first small application’s being built with ViewData and strong typed ViewData.

Chapter 3 introduces you to a simple application, shows how to deal with fileuploads in MVC, simple validation and the creation of a custom ModelBinder attribute.

Chapter 4 covers the ASP.NET MVC request life cycle. Yes there’s a life cycle but not similar to the ASP.NET Page Life Cycle most people got to know during the last years. After that it proceeds with a more in depth look at the model and validation on such a model. After that an in depth look at controllers, actionresult types and how to handle unknown controller actions. Master pages and Partial views (.ascx) are covered. Those last are only briefly touched and I found that a bit of a pity as these are important concepts. Especially the lack of nester master pages in this story was something I missed.

Chapter 5 is totally dedicated to routing. A very important concept in the whole ASP.NET MVC technology stack (and ASP.NET Dynamic Data and also possible to use with normal webforms). Also a quick explanation on how to integrate both ASP.NET and ASP.NET MVC together in the same project routing wise.

Chapter 6 shows you an overview on how to customize the framework and to even build a small custom viewengine. Also the making of a custom ActionFilter gets discussed.

Chapter 7 shows how to use the standard membership, session state, … that we all know from webforms in ASP.NET MVC. After all, it’s built on top of normal ASP.NET so they can share a great deal of the standard technology. Also is shown how to integrate both technology stacks in the same project. This can be interesting food for thought when people want to gradually upgrade to MVC. Also a nice trick to build views at compile time. Slowing the process down but can safe time in finding out the hard way that you forgot a ) or something and the whole thing explodes in your face.

The next chapter tells us more about AJAX. I had hoped to see this chapter to be longer but it just gives a quick overview. The fact that both ASP.NET AJAX and jQuery (even some of the ui components) are discussed is a plus. I’m a big fan of the latter myself.

Then chapter 9’s all about testing. Also mocking’s discussed. Since ASP.NET MVC is also considered to be way better than webforms to be tested (TDD and such) this is an interesting chapter.

The last chapter is all about deployment; A lot of resources seem to be forgetting about this but I liked the fact that this book covers it. Also on older versions of IIS than 7.

As already stated above, I liked appendix A and C. They cover an application built with the technology which is downloadable on codeplex. Appendix C provides an overview of very interesting resources about the topic.

Conclusion: it’s a nice book that quickly gets a developer into the terms of ASP.NET MVC, covers quite a lot of ground and touches the interesting parts of the technology. Some parts I would’ve loved to see a bit deepened out, especially the parts about the master pages and partial views as well ajax. On the other hand I read it from cover to cover and that certainly means something.

Grz, Kris.

Visual studio 2010 and .NET framework 4.0 Beta 1 shipped

Kris van der Mast — Mon, 18 May 2009 18:29:49 GMT

Just noticed that Visual studio 2010 and .NET framework 4.0 Beta 1 shipped. This is great news as that means that people can download it and play around with but. More important though is that people can also provide feedback to Microsoft and make sure that unnoticed things might get kicked out before going RTW.

Also check out the Product information page.

Grz, Kris.

New version of the ASP.NET AJAX Control toolkit

Kris van der Mast — Thu, 14 May 2009 07:13:35 GMT

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.

Glimmer got out

Kris van der Mast — Tue, 28 Apr 2009 19:15:34 GMT

Just read on twitter that Glimmer got out today.

Taken from the release announcement:

Glimmer: a jQuery Interactive Design Tool is a prototype from the Mix Online Labs which makes jQuery accessible through a visual tool. The objective for Glimmer is pretty simple: to enable the power of jQuery through an interactive design surface. If jQuery is the "write less, do more” JavaScript library, then Glimmer is the “write none, do more” jQuery design tool. Glimmer has three core audiences: power users, designers and developers.

This is a video overview of the features.

The team behind it had extensibility in mind so it’s possible to create custom wizards yourself. There are samples available and another great thing: the source code’s going to be available on codeplex! According to the video it’s already there but when I did a quick search I didn’t get a result yet.

Update: perhaps the video was wrong as when I downloaded the bits I noticed that there was also a download link to the source on code.msdn.microsoft.com.

I just downloaded and installed it and gave it a test spin. It looks pretty good. I hope to give a more deep dive testing next weekend.

Grz, Kris.

New Belgian Community Day coming up

Kris van der Mast — Fri, 17 Apr 2009 08:55:48 GMT

Last year it was only a half day but apparently this year it’s going to be a full blown day of content by several of Belgian user groups. Keep June 25th reserved for this day.

Read more about it here as long as the new site’s not up and running: http://www.communityday.be/CD/.

Grz, Kris.

Illustrated C# 2008 as a free eBook download available

Kris van der Mast — Wed, 15 Apr 2009 12:36:28 GMT

Grab your copy here.

Grz, Kris.

SQL Server 2008 Service pack 1 available for download

Kris van der Mast — Sun, 12 Apr 2009 18:05:17 GMT

Taken from the download site:

SQL Server 2008 Service Pack 1 (SP1) is now available. You can use these packages to upgrade any SQL Server 2008 edition.
Note:We remain committed to our plans to keep service packs contained, focusing on essential updates only, primarily a Roll-up of Cumulative Update 1 to 3, Quick Fix Engineering (QFE) updates, as well as fixes to issues reported through the SQL Server community. While keeping product changes contained, we have made significant investments to ease deployment and management of Service Packs:

Slipstream – You are now able to integrate the base installation with service packs (or Hotfixes) and install in a single step.
Service Pack Uninstall – You are now able to uninstall only the Service Pack (without removing the whole instance)
Report Builder 2.0 Click Once capability

Download it here.

Grz, Kris.