February 2007 - Posts

In previous releases of ASP.NET AJAX, Microsoft had created a series of Validators that were compatible with the UpdatePanel and had included them in the distribution. These validators were implemented by mapping them in the web.config over the conventional validators included in the .NET Framework. In the final release, Microsoft removed these validators because they wanted to push them out as an update to the framework itself at a later time via Windows Update. What this means is that out of the box, you can not use any of the validators with an UpdatePanel.

Luckily, they made the source code for the validators available and they can be compiled and included in your project until the final update comes out. To get the validators, go to the link below.

ASP.NET AJAX Compatible Validators

To use the validators it will be required to map them over the existing validators like before. Copy these lines to the system.web/pages/tagMapping section of your web.config.

 <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"/>

If you haven't had a chance to use the AJAX Control Toolkit in a web application yet, you are really missing out. This is a great set of controls with full source code provided that let you do cool AJAX type stuff with minimal effort. All of them work by extending the funcionality of an existing control such as a textbox or a panel. They are super easy to use. Today I will highlight the use of a simple one.

If you are like me, in the past you have yet to find a nice JavaScript popup calendar that is easy to implement and works flawlessly. Well the CalendarExtender makes it really easy. You simply tell it which textbox to extend and you can choose whether you want to trigger it by clicking on a button or by clicking on the textbox itself.

Here is what the code would look like.

<asp:textbox id="MyDateTimeTextBox" runat="server" />
<asp:image id="MyCalendarImage" ImageUrl="calendar.jpg" />
<ajaxtoolkit:CalendarExtender ID="StartDateCalendarExtender" 
    TargetControlID="MyDateTimeTextBox"
     PopupButtonID="MyCalendarImage" runat="server" />

That is all there is to it. If you don't have the AJAX Control Toolkit installed, there are a few steps to get it ready for use. First make sure you have installed ASP.NET AJAX. Since, it is distributed in source code form, you have to compile the solution to get binaries that you can include. Open the AjaxControlToolkit.sln file and do a compile. The AjaxControlToolkit\bin subfolder will have your binaries that you can include. I recommend adding them to your toolbox to make them easy to use.

Once you get the binaries references in your project, add the following line to the system.web/pages/controls element of your web.config.

<add tagPrefix="ajaxtoolkit" assembly="AjaxControlToolkit" 
   namespace="AjaxControlToolkit"/>

To see a demo of how the calendar works, check out the link below.

AJAX Control Toolkit Calendar Extender

Well you most likely know by now that the release version of ASP.NET AJAX is now available. In the past, I posted about how to make a web service work for use with AutoCompleteExtenders, etc. That post was incorrect and has since changed any way, so I thought I would post an update.

To use a web service from Atlas, you need to use the ScriptService attribute on your class. This attribute is in the System.Web.Script.Services namespace. In your code it would like the following.

[System.Web.Script.Services.ScriptService]

I posted in the past that you could set the DefaultButton property on the form tag of an ASP.NET form to control which button's event gets fired when the user clicks the enter key. I thought that was a great feature, but I had always wondered how you set a default button when that button is sitting inside of another control. Obviously you can't specify a button inside of a control there since the form doesn't know anything about whats inside that child control.

When I posted that previous post, ASP.NET 2.0 wasn't even released yet. After doing further research I have discovered that the DefaultButton property is also available on the Panel control. This makes it very easy to ensure that your event fires when the user clicks the enter button. You can even have multiple panels in your page with the DefaultButton property. Here is an example below.

<asp:Panel id="MyPanel" runat="server" DefaultButton="Button2">
   <asp:TextBox id="MyTextBox" runat="server" />
   <asp:Button id="Button1" runat="server" />
   <asp:Button id="Button2" runat="server" />
<asp:Panel />

In this case when the user clicks the enter button, Button2's OnClick event would be fired.

If you are curious on how it works behind the scenes, basically it injects cheesey javascript code that looks for a keypress of 13 and then fires the button.

<div id="ctl07_MyPanel" onkeypress="BLOCKED SCRIPTreturn 
WebForm_FireDefaultButton(event, 'ctl07_SearchButton')">