Mar
1
2008

AJAX Control Toolkit updated

No new controls but some great fixes!

Installation Files

Please visit the AJAX Control Toolkit Project Page on CodePlex

Release Notes

Major Fixes

  • ValidatorCallout supports styling the popup using CSS and server-side validation.
  • ListSearch has enabled the options of searching for sub-strings in the list items and clearing the search query if no match is found.
  • AutoComplete only queries for matches when the user types a character.

Community effort

This release includes over 10 patch fixes provided by members of the Toolkit community. We would like to specially thank all the patch contributors for their effort which helped make this release possible. We recognize their names on the Toolkit Patch Hall of Fame.

Setting up the environment to use the Toolkit: This Toolkit release targets two different versions of the .NET Framework:

  • Version 3.5.20229 for .NET Framework 3.5 and Visual Studio 2008:

    Download the AjaxControlToolkit-Framework3.5.zip or AjaxControlToolkit-Framework3.5-NoSource.zip.

  • Version 1.0.20229 for ASP.NET AJAX version 1.0 and .NET Framework 2.0:

    Download the AjaxControlToolkit.zip or AjaxControlToolkit-NoSource.zip.

Note: Toolkit version 3.5.20229 is only for users who are building on top of .NET Framework 3.5 using Visual Studio 2008. If you are using .NET Framework 2.0 and Visual Studio 2005 then you should use Toolkit version 1.0.20229.

Aug
4
2007

ASP.NET AJAX and URL rewriting issue

If you are using URL rewriting you might know that you have to take care about the way you reference resources has written in the Scott Guthrie post; Tip/Trick: Url Rewriting with ASP.NET:

Handling CSS and Image Reference Correctly

One gotcha that people sometime run into when using Url Rewriting for the very first time is that they find that their image and CSS stylesheet references sometimes seem to stop working.  This is because they have relative references to these files within their HTML pages - and when you start to re-write URLs within an application you need to be aware that the browser will often be requesting files in different logical hierarchy levels than what is really stored on the server.

For example, if our /products.aspx page above had a relative reference to "logo.jpg" in the .aspx page, but was requested via the /products/books.aspx url, then the browser will send a request for /products/logo.jpg instead of /logo.jpg when it renders the page.  To reference this file correctly, make sure you root qualify CSS and Image references ("/style.css" instead of "style.css").  For ASP.NET controls, you can also use the ~ syntax to reference files from the root of the application (for example: <asp:image imageurl="~/images/logo.jpg" runat="server"/>

This is for sure also the case for javascript.

I am using the Request.PathInfo way described in Scott's post to rewrite one url on Tech Head Brothers. Everything works fine except that Sys.Services.AuthenticationService get confused about the rewriting of the URL and tries to post back on :

http://localhost:8080/Auteurs.aspx/laurent-kempe/Authentication_JSON_AppService.axd/Login

When I expect

http://localhost:8080/Authentication_JSON_AppService.axd/Login

Looking at the page rendered by ASP.NET I see that the following is rendered:

<script type="text/javascript">
<!--
Sys.Services._AuthenticationService.DefaultWebServicePath = 'Authentication_JSON_AppService.axd';
// -->
</script>

So I am clearly missing a / in the path and due to that the URL rewriting confuse the post to the server.

The first solution was found by Cyril Durand (always of good help in this AJAX world ;) and is to add this line of code:

ScriptManager.GetCurrent(Page).AuthenticationService.Path = "/Authentication_JSON_AppService.axd";

But I did it a bit differently, directly in the javascript adding the following line:

Sys.Services.AuthenticationService.set_path('/Authentication_JSON_AppService.axd');

Btw this javascript line would be generated at rendering time by the solution of Cyril.

Thanks Cyril for the always nice talks.

Jul
25
2007

Optimization of a Web Site - Using Content Expiration (IIS 6.0)

As you might know, I am running the French .NET portal Tech Head Brothers and I am always searching for good way to optimize it and make it run better.

Following the post of Jeremy Zawodny's blog: "How To Add Good Expires Headers to Images in Apache 1.3" I decided to check this on my server running Tech Head Brothers on IIS 6.0.

You can read more about the way to configure this option on technet "Using Content Expiration (IIS 6.0)".

After several tests I must say that yes it increase the performance of the site. I used the wonderful httpwatch 4.2 to run the tests.

The other optimization I did in the past:

  1. added compression to the site to optimize the load time of all the ASP.NET AJAX and Control Toolkit scripts and the page html
  2. modified the site to use less external files, I had multiple css files so migrated to almost one
  3. usage of the AJAX Control Toolkit - ToolkitScriptManager
Jun
16
2007

ModalPopup and Silverlight

If you place on a web page a ModalPopup and a Silverlight control, you might end up with the ModalPopup hided by the Silverlight control.

To avoid this at the time you call Sys.Silverlight.createObjectEx you need to give the following property to true:

isWindowless:'true',       // Determines whether to display control in Windowless mode.

And then everything works again and you see your ModalPopup. 

Jun
9
2007

AJAX Control Toolkit - ToolkitScriptManager

A new release (10606) is out, that you might download on CodePlex.

I quickly tried out the script combining stuff and it works really great. I saved 7 round trip to the server and almost 2 seconds in the page load. You might read more about it on Shawn Burke

Script Combining.  With the Toolkit, we made the decision to have components be responsible for their own scripts, as opposed to having one mondo-script file with all the script for the whole Toolkit.  This was the right call, as it allows adding to the Toolkit without having everyone pay a penalty for the added items.  However, for components with deep dependancies, this could add up to a lot of individual script files which caused multiple requests back to the server - a problem on slower connections.  We've not got functionality such that all of the scripts needed for all of the Toolkit components on the page will be dynamically combined into just one script file and sent down that way.

and Scott Guthrie blogs.

One of the biggest improvements with this toolkit release is support for a new "ToolkitScriptCombiner" control.  This control allows you to replace the default <asp:scriptmanager> control behavior, and supports the ability to dynamically merge multiple client-side Javascript scripts into a single file that is downloaded to the client at runtime.  Better yet, only the Javascript needed by the specific controls on the page are included within the combined download, to make it as small as possible.

And this just by doing this:

        <%--<asp:ScriptManager ID="scriptManager" runat="server"/>--%>
        <ajaxToolkit:ToolkitScriptManager runat="Server" ID="scriptManager" />
May
25
2007

RegisterClientScriptInclude and scripts ordering

I spend a part of this evening fighting with ScriptManager.RegisterClientScriptInclude and had no chance to use it in a way that my javascripts would appear after MicrosoftAjax.js and in an order that I defined.

I finally found a solution, using ScriptManagerProxy and declaratively listing the javascripts in the order I wanted.

Mar
27
2007

ASP.NET AJAX and ASP.NET Validators

If you are using ASP.NET Validators in UpdatePanel consider the post of Matt Gibbs : "ASP.NET AJAX Validators".

ASP.NET AJAX provides new APIs for registering script with the ScriptManager.  Using these APIs allows controls to work well with partial rendering.  Without them, controls placed inside an UpdatePanel won't work as expected. In previous CTP releases of ASP.NET AJAX, we had a set of validator controls that derived from the v2.0 controls and used the new APIs. This made them work well with ASP.NET AJAX. WindowsUpdate will soon include a version of System.Web that can take advantage of the new APIs.  So the new controls which would have been redundant have been removed.  However, the update isn't available yet and ASP.NET AJAX has been released.  So, in the short-term, the source code for a set of custom validator controls that work with partial rendering is available here.

The .zip file includes a solution and .csproj file as well as the compiled DLL.  Just put the DLL in the /bin directory of your application and include the following <tagMapping section in the pages section of the web.config.

      <tagMapping>
        <add tagType="System.Web.UI.WebControls.CompareValidator"           mappedTagType="Sample.Web.UI.Compatibility.CompareValidator, Validators, Version=1.0.0.0"/>
        <add tagType="System.Web.UI.WebControls.CustomValidator"            mappedTagType="Sample.Web.UI.Compatibility.CustomValidator, Validators, Version=1.0.0.0"/>
        <add tagType="System.Web.UI.WebControls.RangeValidator"             mappedTagType="Sample.Web.UI.Compatibility.RangeValidator, Validators, Version=1.0.0.0"/>
        <add tagType="System.Web.UI.WebControls.RegularExpressionValidator" mappedTagType="Sample.Web.UI.Compatibility.RegularExpressionValidator, Validators, Version=1.0.0.0"/>
        <add tagType="System.Web.UI.WebControls.RequiredFieldValidator"     mappedTagType="Sample.Web.UI.Compatibility.RequiredFieldValidator, Validators, Version=1.0.0.0"/>
        <add tagType="System.Web.UI.WebControls.ValidationSummary"          mappedTagType="Sample.Web.UI.Compatibility.ValidationSummary, Validators, Version=1.0.0.0"/>
      </tagMapping>

Jan
28
2007

Login control in an ASP.NET AJAX toolkit PopupControlExtender with a close button

I remember when I tried to implement a Login control in a ModalPopup with one of the early release of what was called at that time Atlas and is now called ASP.NET AJAX. I had lots of difficulties and now it works like a charm.

This time I would like to have a Login control in an ASP.NET AJAX PopupControlExtender from the ASP.NET AJAX Control Toolkit.

The implementation is really straight, a panel with a asp:Login in it:

<asp:Panel ID="loginPanel" runat="server" Style="display: none">
    <asp:Login ID="LoginCtrl" runat="server" 
        CssSelectorClass="THBLogin"
        FailureText="Identifiant incorrect ! Essayez ? nouveau..."
        LoginButtonText="S'identifier" 
        
        PasswordLabelText="Mot de Passe" 
        PasswordRequiredErrorMessage="Le mot de passe est requis."
        RememberMeText="Se souvenir de moi la prochaine fois." 
        TitleText="S'identifier"
        UserNameLabelText="Email" 
        UserNameRequiredErrorMessage="L'email est requis." 
        CreateUserText="S'enregistrer" 
        CreateUserUrl="/Register.aspx" 
        PasswordRecoveryText="Mot de passe oubli? ?" 
        PasswordRecoveryUrl="/PasswordRecovery.aspx" />
</asp:Panel>

Then you had the PopupControlExtender:

<ajaxToolkit:PopupControlExtender ID="PopEx" runat="server"
    TargetControlID="loginHyperLink"
    PopupControlID="loginPanel"           
    Position="Left" />

I also need a target control that will initiate the Popup display:

<asp:HyperLink ID="loginHyperLink" runat="server">S'identifier</asp:HyperLink>

Till now nothing really special.

Then I wanted to add a close button to this Popup, so I a added a div closeLoginPanel with an embedded link:

<asp:Panel ID="loginPanel" runat="server" Style="display: none">
    <div class="closeLoginPanel">
        <a title="Fermer">X</a>
    </div>
    <asp:Login ID="LoginCtrl" runat="server" 

This is not enough because I need to have the close action started when a user click on the link (X). I first looked at the javascript of the PopupControlExtender and saw that it handles the onclik of the body element so I added

<a onclick="document.body.click(); return false;" title="Fermer">X</a>

This was working fine on Internet Explorer 7 but was raising an error on FireFox 2. Looking in more detail in the javascript I finally changed my code to:

<a onclick="AjaxControlToolkit.PopupControlBehavior.__VisiblePopup.hidePopup(); return false;" title="Fermer">X</a>

This is working on both Internet Explorer and FireFox 2.

Here is the css I used:

.closeLoginPanel
{
    font-family: Verdana, Helvetica, Arial, sans-serif;
    line-height: 17px;
    font-size: 11px;
    font-weight: bold;

    position: absolute;
    top:8px;
    right: 10px;
}

.closeLoginPanel a
{
    background-color: #6699CC;
    cursor: pointer;
    color: #FFFFFF;
    text-align: center;
    text-decoration: none;
    padding: 5px;
}

Here is the result:

Jan
24
2007

ASP.NET AJAX 1 Released and already deployed on Tech Head Brothers

It was a straight move from RC to RTM and I have managed to have it online after deploying it to staging, doing some tests and then deployed it Production, thanks to Web Deployment Projects.

Here you can see an ASP.NET 2 Webpart on Tech Head Brothers using ASP.NET AJAX 1 to browse all news of the site on the home page:

And my personal tab control (now there is one in the toolkit) using ASP.NET AJAX 1 to display articles, tips, and contact of an author:

Update: btw the RTM solved the issue I had with ASP.NET Ajax RC and Google Adsense

About Laurent

Laurent Kempé

Laurent Kempé is the editor, founder, and primary contributor of Tech Head Brothers, a French portal about Microsoft .NET technologies.

He is currently employed by Innoveo Solutions since 10/2007 as a Senior Solution Architect, certified Scrum Master and Founding Member.

Founder, owner and Managing Partner of Jobping, which provides a unique and efficient platform for connecting Microsoft skilled job seekers with employers using Microsoft technologies.

Laurent was awarded Most Valuable Professional (MVP) by Microsoft from April 2002 to April 2012.

JetBrains Academy Member
Certified ScrumMaster
My status

Twitter

Flickr

www.flickr.com
This is a Flickr badge showing public photos and videos from Laurent Kempé. Make your own badge here.

Month List

Page List