Web.NET

Talk about P&P Web Client Software Factory on Toronto Architecture User Group meeting

noreply@blogger.com (Alexander Turlov) — Thu, 08 Oct 2009 13:40:57 PDT

Developing modular web applications is a popular topic in development communities especially after ASP.NET MVC framework has been introduced by Microsoft. However ASP.NET MVC is not the first and only framework that can help on that way.

I'll be talking about building modular enterprise-class modern web applications with the help of MVP design pattern and Microsoft Patterns and Practices Web Client Software Factory framework on the next meeting of Toronto Architecture User Group on Thursday October 29th. To attend please register online here.

Problem with Internet Explorer 8 Debugger on Windows 7

noreply@blogger.com (Alexander Turlov) — Wed, 23 Sep 2009 11:30:06 PDT

I continue to evaluate Windows 7 after upgrading from Windows Vista and share some experience (mostly bad of course, so people would not step on the same problem again). As I mentioned before, overall upgrade was smooth and mostly everything works OK. However time to time I stumble upon some really annoying problems that did not exist on Windows Vista and therefore need to be solved for Windows 7 from scratch.

One of the recent problems was Daemon Tools not working on Windows 7 and it was solved by installing Magic Disc. Now there is one more thing: after upgrading to Windows 7 I am not able to use IE8 Debugger. When I pressed F12 the Debugger icon appeared on the task bar but I can not switch to its window: it's not visible.

So obviously I searched over the Internet and luckily there was one post on Stack Overflow (apart from those guessing about a window being outside of the screen) that suggested that there may be some wrong setting in Windows registry. And there are some registry keys related to IE8 debugger! So the solution was to remove WindowsPos, Pinned and UseDevToolsDebugger keys from the [HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\IEDevTools] section. That completely solved the problem.

Unfortunately I can not tell whether those keys existed in Windows Vista and were incompatible with Windows 7 or their values have been incorrectly modified during the upgrade. But after removing them and starting IE8 debugger they haven't appeared again. So probably they are not needed anymore.

How to map .ISO file to a drive in Windows 7

noreply@blogger.com (Alexander Turlov) — Thu, 17 Sep 2009 07:38:20 PDT

So, recently I have upgraded my laptop from Windows Vista to Windows 7. The upgrade process was straight forward and flawless and everything so far was OK except one thing: the Daemon Tools that I've been using for mapping .ISO image files since 2004 on various Windows systems refuses to work on Windows 7. Even Windows 7 compatibility mode does not help: Daemon Tools manages to recognize Windows 7 anyways. Luckily there is another tool that provides with absolutely the same functionality and also free: Magic Disc. It works under Windows 7 flawlessly and really makes my life easier: no need to burn ISO files on CD/DVD anymore.

ASP.NET user name availability check using WCSF Validation Bundle

noreply@blogger.com (Alexander Turlov) — Wed, 24 Jun 2009 10:21:07 PDT

An average web site offering membership and protected content for its members requires users to sign up by visiting a sign-up or register page that allows a user to enter some information and create an account. A couple of pieces if information that users are commonly asked to enter are a User name or Login name and user's email. One potential problem with such user input is checking that entered login name and/or email address are available for registration and haven't been used by other users. When it's the case multiple attempts of entering available values can be very annoying and frustrating for users even making them to refuse registration on a web site. So improving user experience when validating login name and email is quite an important task.

There is a number of ways of how to implement a user input validation and display an error message, for instance that one suggested by Dave Ward. In this post I am going to show you another relatively simple and elegant solution that provides with both reliability and reasonably pleasant user experience.

The solution is based on using a ServerSideValidationExtender control from Web Client Software Factory validation bundle. The ServerSideValidationExtender control allows asynchronious invocation of a server-side validation handler that performs a validation right after a user finished entering data without a postback thus signifcantly improving the user experience at the same time leveraging robustness and security of server-side validation.

Code example

For this example I will be using a really simple markup code:


<asp:Label ID="lblEmail" runat="server" Text="Email: ">
<asp:TextBox ID="txtEmail" runat="server">
<asp:CustomValidator ID="cvEmail" runat="server"
    ErrorMessage="Email is already used"
    ControlToValidate="txtEmail"
    onservervalidate="cvEmail_ServerValidate" />
<wcsf:ServerSideValidationExtender ID="ssveEmail" 
    TargetControlID="cvEmail" 
    ValidateEmptyText="false" runat="server" />
<br />    
<asp:Label ID="lblLogin" runat="server" Text="Login: ">
<asp:TextBox ID="txtLogin" runat="server">
<asp:CustomValidator ID="cvLogin" runat="server"
    ErrorMessage="Login name is already used" 
    ControlToValidate="txtLogin"
    onservervalidate="cvEmail_ServerValidate" />
<wcsf:ServerSideValidationExtender ID="ssveLogin" 
    TargetControlID="cvLogin" 
    ValidateEmptyText="false" runat="server" />
<br />
<asp:Button ID="cmdRegister" runat="server" Text="Register" />

that effectively results in that UI in a browser:

For each TextBox control requiring asynchronious server-side validation I've added a CustomValidator control and a ServerSideValidationExtender that has its TargetID property set to an ID of a corresponding CustomValidator control.

Next I've added some code to the validation handlers for the CustomValidator controls to the page's code behind and that's it:


protected void cvEmail_ServerValidate(object source, 
    ServerValidateEventArgs args)
{
  args.IsValid = string.IsNullOrEmpty(
          Membership.GetUserNameByEmail(args.Value));
}

protected void cvLogin_ServerValidate(object source, 
    ServerValidateEventArgs args)
{
  args.IsValid = Membership.GetUser(args.Value) == null;
}

Note that the IsValid equals true when a user can not be found. The server-side validation handler is being executed asynchroniously every time a corresponding TextBox loses its focus and if validation has failed (meaning that a user was found and login name or email is not available) a corresponding error message is displayed immediately on the page without a postback so a user does not have to click a submit button and wait for the page to render again to see the result of the validation.

The only trick here is that in the server-side validation handler we can only access a value of the control being validated because values of other controls on the page haven't been updated on the server side (no postback, remember?!).

Note. In the production code you may want to add some layout and styling to your HTML markup, and of course there will be perhaps other input boxes on a form with may be more validator controls but the approach won't change: no additional code required, the same well-known validation pattern but with nicer user experience. I would also recommend to implement a simple but very useful change to the ServerSideValidationExtender control suggested by Jarod Ferguson.

How to set programmatically a value of a watermarked TextBox via JavaScript

noreply@blogger.com (Alexander Turlov) — Mon, 22 Jun 2009 07:38:47 PDT

If you use ASP.NET AJAX and AJAX Control Toolkit you may find it useful to decorate some of your TextBox controls on a page with a TextBoxWatermark AJAX extender control from the AJAX Control Toolkit. It's fairly easy to use and a nice tool for improving both the page look and user experience.

However if you need to set a value of a TextBox decorated with the TextBoxWatermark extender programmatically via JavaScript on the client-side you may notice that the behavior of the watermarked TextBox is different. If you use the regular way to set a value like this:


$get(textBoxId).value = someText;

then the value displayed in the TextBox on the page will change to the set value but the watermarked look will still be present and other AJAX Control Toolkit TextBox extenders (like a Calendar extender, for instance) will not recognize the new value.

This happens because the TextBoxWatermark extender can not recognize and intercept your JavaScript operation since it's designed to serve user interactions. However there is a correct way of programmatic access to the TextBox's value. We modify the code above like that:


var textBox = $get(textBoxId);
if (textBox.AjaxControlToolkitTextBoxWrapper) {
    textBox.AjaxControlToolkitTextBoxWrapper.set_Value(someText);
}
else {
    textBox.value = someText;
}

The explanation is that most of the TextBox extenders from the AJAX Control Toolkit including a TextBoxWatermark extender use a special proxy class AjaxControlToolkitTextBoxWrapper to manipulate with the input elements. The proxy adds a special property AjaxControlToolkitTextBoxWrapper to the input element that contains a reference to itself allowing to access the value of the input element correctly. Similarly, if you need to get a value of a watermarked TextBox you do it like this:


var textBox = $get(textBoxId), text;
if (textBox.AjaxControlToolkitTextBoxWrapper) {
    text = textBox.AjaxControlToolkitTextBoxWrapper.get_Value();
}
else {
    text = textBox.value;
}

New version of ASP.NET AJAX Control Toolkit released

noreply@blogger.com (Alexander Turlov) — Wed, 03 Jun 2009 11:40:56 PDT

The new release of ASP.NET AJAX Control Toolkit is available for download. Bertrand Le Roy has written a very informative post about it. What particularly concerns me in this new release is that a Color Picker extender is now included in the Ajax Control Toolkit. Hooray!

Along with the new Toolkit release there come a whole bunch of new tutorials and videos among them there are one particularly nice tutorial about the Color Picker extender and an excellent video tutorial by Joe Stagner. Thank you folks for such a great job!

What that means for the Color Picker Extender users is that they don't have to download it separately from Codeplex anymore because it is included in the Ajax Control Toolkit. For those who can not switch to the new version of ACT yet the original Color Picker Extender control will continue to be available on Codeplex. During the next few days I will prepare and upload a new release synced up with the Ajax Control Toolkit.

It is also very interesting to read people's opinions about the new release of ACT that they write in response to blog posts and on Codeplex. In general the responses are positive however some folks complain about something, mostly about insignificant things or because they missed something. I would like to remind everybody that Ajax Control Toolkit is completely a community initiative (with of course the initial kick-off help from Microsoft) and people who work on it take time for it out of their families and other important things so let's be more tolerant and if you've come across something really bad please use the Issue Tracker.

In particular I was interested in reading responses about the ColorPicker (but of course ;-)). Interestingly all the complaints were about how its look and feel, not about functionality. I admit that the UI it provides is rather simplistic but here is my question back: where have you all folks been since the control was published almost a year ago and I was asking for your feedbacks and suggestions? Since then it's been downloaded more then 2000 times (and I don't count downloads of ACT source code) and almost no one except just a few people suggested anything about improving it. I take it as everybody has been satisfied. However now with a bit more visibility I suggest if you folks really want some progress with what concerns you please speak up.

Survey: Ajax usage among .NET developers

noreply@blogger.com (Alexander Turlov) — Wed, 27 May 2009 11:29:20 PDT

If you haven’t already and you are a .NET developer, please take a couple minutes and answer this survey, whether you use Ajax or not. There are a number of Ajax surveys around, but this is the only one that focuses on .NET developers.

The survey:
http://www.zoomerang.com/Survey/?p=WEB22973CYKW2H

Enabling a WCSF solution for sub-Web Application Project

noreply@blogger.com (Alexander Turlov) — Fri, 01 May 2009 13:34:42 PDT

If in your WCSF solution you use Web Application Project (as opposed to Web Site Project) for your web site you are able to use a so called sub-Web Application Project in order to further modularize your web application.

If you created a WAP WCSF solution from scratch this option will be available to your all right. However if you converted your Web Site WCSF solution to WAP WCSF solution or upgraded from the previous version of WCSF this option may not appear when you are trying to add a new business module to your solution.

Visibility of the "Create as sub-Web Application Project" checkbox depends on one single property of a solution file and if you don't see the checkbox open the .sln file with any text editor and check out that it contains the follwoing content:

GlobalSection(ExtensibilityGlobals) = postSolution

...

IsWCSFSolutionWAP = True

...

EndGlobalSection

Usually this section is located in the bottom of a .sln file and the red line is the key to solving the problem. If you don't see the line in your solution file simply add it and reload the solution in Visual Studio. Problem solved.

How to Improve ASP.NET UpdatePanel Performance

noreply@blogger.com (Alexander Turlov) — Tue, 23 Jun 2009 07:10:11 PDT

Since ASP.NET AJAX UpdatePanel was first introduced it has earned a strange mix of reputation. From one hand it has become a tool of first choice for many ASP.NET developers who wanted an easy way of introducing an AJAX-like behavior for their ASP.NET web apps. From another hand it has earned a lot of criticism from seasoned web developers because of certain performance consequences associated with complex usage scenarios.

Well everything may be good and may be evil based on how we use it. From my experience consious and judicious use of UpdatePanel is the key to saving its benefits and avoiding potential problems.

Below I suggest a number of rules that help achieving better results when using UpdatePanel.

Avoid automatic refreshing of UpdatePanel; always stay in control of which UpdatePanel and when refreshes: set UpdateMode property to Conditional (the default value is Always).
Minimize the content of the UpdatePanel: the <ContentTemplate> should only include controls that are neccessary to refresh. For instance if user input requires server-side validation include only an error message mark-up in the UpdatePanel and leave the rest of the form outside.
Try to keep the partial postback trigger controls outside of their respective UpdatePanels unless its neccessary to change their markup.
Try to stick to a simple rule: one trigger for one UpdatePanel. If you need to refresh multiple UpdatePanels during one request add a trigger control to only one of those UpdatePanels and refresh the others programmatically in an event handler on the server. The idea is to avoid uncontrollable refreshing of unnecessary UpdatePanels.
Since ViewState is updated with every partial postback request turn the ViewState off on a page that contains the UpdatePanel wherever possible or store the ViewState on the server to avoid transferring it forth and back with every async request.
Since Page runs through its lifecycle during every partial postback and executes methods like Page_Load or Page_PreRender make sure that logic that is unneccessary for refreshing UpdatePanel is not executed by wrapping it in if(!ScriptManager.IsInAsyncPostBack).
If you use UpdatePanel event handlers like Init, Load, PreRender and Unload make sure that code inside these event handlers does not execute unless neccessary by checking Page.IsPostBack and ScriptManager.IsInAsyncPostBack properties.
If you trigger an UpdatePanel programmatically from the client-side (via JavaScript) make sure that its event handler check for the event trigger value using Request.Params["__EVENTTARGET"] ot avoid unnecessary execution path.
If you programmatically update Page's Header (Title, etc.) or other Page's content that is outside UpdatePanel make sure that this code never gets executed during partial postbacks. First of all its not neccessary since page does not refresh but also it may be dangerous because the content may not be handled properly by a browser.

Conclusion

There may probably be more tricks and tips regarding usage of UpdatePanel but those mentioned above have been proven by real exeprience. I would also recommend reading an excellent post by Dave Ward that helps understanding how UpdatePanel works behind the scene and never hesitate using Fiddler to investigate what your web app's doing.

Using ColorPickerExtender Client-side Events

noreply@blogger.com (Alexander Turlov) — Wed, 22 Apr 2009 07:26:23 PDT

There have been question about how to utilize the client-side functionality of the ColorPickerExtender in order to improve customer experience. Here is an example of how to use a colorSelectionChanged client event.

Subscribing to the colorSelectionChanged event

You can subscribe to the event either via JavaScript code or ASP.NET mark-up:

    var cpe = $find("ColorPickerExtender1");
    cpe.add_colorSelectionChanged(changeColor);

Here $find is a standard method of the ASP.NET AJAX Framework that retunrs an instance of the AJAX component by BehaviourID; ColorPickerExtender1 is a BehaviourID of the ColorPickerExtender component and changeColor is your JavaScript function that will be called when the event occurs.


<ajaxToolkit:ColorPickerExtender ID="defaultCPE"  runat="server"
    TargetControlID="Color1"
    BehaviorID="ColorPicker1"
    OnClientColorSelectionChanged="changeColor"
/>

Make sure that the changeColor JavaScript function exists on the page otherwise you'll see a JavaScript error "changeColor is undefined". You may define a changeColor function like this:

function changeColor(sender) {
    sender.get_element().style.color = "#" + sender.get_selectedColor();
}

When your function is called after a user picked a color (i.e. clicked a mouse on the color palette) a sender argument will point to the instance of the ColorPickerExtender component that you can use inside your function. For instance, call a method get_element() to retrieve a reference to an input DOM element which the extender is attached to or use a get_selectedColor() method to retrieve a hexadecimal color code that the user selected. When assigning the color value to a DOM element style don't forget to prepend it with a '#' character.

ASP.NET AJAX Compatibility Patch for Safari 3.x and Google Chrome

noreply@blogger.com (Alexander Turlov) — Fri, 30 Jan 2009 06:32:33 PST

The problem I am going to talk about is not new but it somehow managed to concern not so many developers so far. However it is a growing concern and more people would need a solution at some point.

The heart of the problem is there are two browsers with a groing number of users - Safari 3.x and Google Chrome, that ASP.NET AJAX framework is not compatible with. One part of the problem is induced by a fact that both browsers report themselves as "Webkit" which is not supported by ASP.NET AJAX. This part of the problem affects both Safari and Chrome users. The second part of the problem mostly affects Safari users because ASP.NET AJAX framework does "support" Safari (version 2.x) but in such a manner that makes your web application look a total disaster in Safari version 3.x. The suggested fix will help both cases. At least my tests showed quite a success.

Ideally we would need an official patch from Microsoft but since they have their own plans and busy with the next .NET/ASP.NET 4.0 and VS 2010 I would assume that there will be no fix till those versions are out. So let's stick to this solution for now.

The solutions for the problem were suggested by a couple of people: http://forums.asp.net/p/1252014/2898429.aspx and http://blog.lavablast.com/post/2008/10/Gotcha-WebKit-(Safari-3-and-Google-Chrome)-Bug-with-ASPNET-AJAX.aspx. Since both solutions are absolutely the same I want to give both of them a credit.

So to the point, ASP.NET AJAX framework has a class Sys.Browser that represents a current browser and supports cross-browser compatibility for everything else. The solution simply extends the Sys.Browser class to support a Webkit browser:

Sys.Browser.WebKit = {};

if( navigator.userAgent.indexOf('WebKit/') > -1 ) {

Sys.Browser.agent = Sys.Browser.WebKit;

Sys.Browser.version = parseFloat(navigator.userAgent.match(/WebKit\/(\d+(\.\d+)?)/)[1]);

Sys.Browser.name = 'WebKit';

}

That is all the code you need. To apply this code to your web application you will need to create a javascript file, let's say webkit.js and reference it in your application using standard ScriptManager server control. You can reference the fix as a file using this syntax:

<asp:ScriptManager ID="sm" runat="server">
   <Scripts>
   <asp:ScriptReference Path="~/Scripts/webkit.js" />
    Scripts>
/asp:ScriptManager>

or embed it into an assembly (my preferred way) and reference it from the assembly as an embedded resource:

<asp:ScriptManager ID="sm" runat="server">
   <Scripts>
   <asp:ScriptReference Assembly="Scripts" Name="Scripts.webkit.js" />
    Scripts>
/asp:ScriptManager>

Note that when you reference the fix from an assembly don't forget to add an assembly default namespace to the file name in the Name attribute.

In conclusion, according to my tests the fix eliminated problems with UpdatePanel, AjaxControlToolkit and Virtual Earth map control.

Search Engine Friendly Error Handling

noreply@blogger.com (Alexander Turlov) — Mon, 04 May 2009 13:30:56 PDT

ASP.NET provides a standard way to handle errors in web applications by configuring a customError section in the Web.config file. Standard behaviour is to redirect a user from an erroneous page to an error page that in its turn shows some kind of more or less friendly explanation of what has happened.

This approach is quite OK for intranet web applications but usually is not appropriate for a public web app accessible for search engines.

The main problem here is that when error happens ASP.NET returns 302 "temporary redirect" response redirecting browser to the error page configured in the Web.config.

If the erroneous page was accessed by a SE bot the bot would index a content of the error handling page under the original page's URL thus creating a wrong index entry.

Another problem is if the actual error on the page was that the requested content was not found. This scenario is quite regular on modern dynamic web sites that construct content pages dynamically based on a Url. In http world such a situation should be called as 404 "Not found" especially in the case of a bot visiting such a page. But ASP.NET standard handling will once again respond 302 and let the bot include a non existent page in a search index.

What I am driving at is the correct error handling should always return a corresponding http status code for a SE bot with the appropriate content for the user. So how can we do that without writing too much code?

Actually quite easy. Starting version 3.5 SP1 ASP.NET has a new attribute redirectMode in the customError configuration section:

The new redirectMode attribute can be assigned one of two values: ResponseRedirect (default) and ResponseRewrite. ResponseRewrite prevents the erroneous page being redirected with the code 302 to an error page however the content of the error page will be shown on the original page. Internally ASP.NET is doing Server.Execute of the error page instead of Response.Redirect as usual.

So this is already a one third of work. The next thing we need to do is to return a correct http status code. It can be achieved by adding a few lines of code to the error page let's say to a Page_Load event handler:

   int httpCode = 500;
   Exception ex = Server.GetLastError();
   if (ex is HttpException)
   {
   httpCode = ((HttpException) ex).GetHttpCode();
   }
   Response.StatusCode = httpCode;

This code checks if the reason of the error was an HttpException (a standard .NET exception class) then it assigns an http code from the exception otherwise it returns 500. Now it's two third of work done.

What left is to handle exceptions in your code properly. The best practices here are:

If your application can not return a requested content for any reason except your application's internal problems then throw an HttpException with the code 404 and it will be friendly handled by your error page.

throw new HttpException(404, "Not found");
Map other your application's specific exceptions to standard http codes and return them too.
If your application throws an exception internally then wrap the internal exception with HttpException using an appropriate http code.

try
{
...
}
catch (Exception ex)
{
throw new HttpException(code, message, ex);
}

That's basically it. In conclusion just a few more notes.

If an erroneous page happened to start rendering content before the error occurred you may want to clear it on the error page before outputting an error message:

Response.Clear();

If for some reason you can not use the new redirectMode attribute in the .config file (older framework, application specifics, etc.) then just add a few lines of code to the global.asax that do the same:

void Application_Error(object sender, EventArgs e)

{

// Do something with the error, i.e. log, notify, etc.

Server.Transfer(errorpage);
}

It may be a good idea to clear an error status on the error page after you're done with error handling:

ClearError();

Now that is all.

FIX: HTML documents may not be displayed correctly in IIS 7.0 on Windows Vista

noreply@blogger.com (Alexander Turlov) — Tue, 09 Dec 2008 12:55:24 PST

Recently I have finally upgraded to Windows Vista from Windows XP. Except regular trouble of upgrading your operation system that feels like moving to a new house (which is people say worse then an earthquake and flooding together) I was quite frustrated by a number of annoying problems with IIS 7 when first it's not installed by default (all right, security is tougher now, but can I at least have an option?), then not all of the components installed that required by ASP.NET and VS2008 (is it so difficult to suggest a correct package?), then again my web app does not work with the default App Domain (why did you guys call it "default" and the real default call "classic"?), and finally everything works but the site does not look like it should be.

I spent some time probing different setting of IIS and finally gave up and looked it up on the Internet. What a relief! It's a Microsoft bug and not me being an idiot! Actually it was submitted on March 17, 2007 and still not in SP1.

So the problem was that the entire static content of the web app including images and styles was not returning to a browser by IIS (content length 0 bytes) because IIS 7 initial configuration was incorrect when it was first installed on Vista.

I am not describing a fix here, read it here: http://support.microsoft.com/kb/930901/en-us

Canada Election 2008

noreply@blogger.com (Alexander Turlov) — Thu, 15 Jan 2009 11:13:52 PST

Once again - out of the main topic, but I can't be silent, can I?

So I was straggling with myself over understanding what party should I vote for. The challenge was that it's not easy to figure out their election platforms. They do make a lot of noise but when it actually comes to statements there is somehow magically not so much to hear. Who are you talking to, guys? Can't you just drop your theatrical games and speak clearly of what you are about to do?

Of course there are public images that could help making a choice: liberals are "thieves", conservatives are too easily "sold" to private interest groups, bloc are "nationalists", green are "blah" and NDP are "don't know who exactly". But still the statements are much easier to analyze for a thinking person.

Luckily there is this very helpful web page called "Party Game" on thestar.com that shows the positions of all the parties on the main 8 problems. You take a quiz where you select your choice of a solution for each problem and at the end you see which party aligns the best with your own platform. Very helpful and surprising! Now I almost know who I will be voting for.

More About Color Picker ASP.NET AJAX Extender

noreply@blogger.com (Alexander Turlov) — Wed, 01 Oct 2008 11:17:15 PDT

I have published an article on Code Project about the Color Picker ASP.NET AJAX Extender. Please read it there.

Money as Debt!!!

noreply@blogger.com (Alexander Turlov) — Wed, 29 Apr 2009 10:56:18 PDT

It's completely out of the topic of this blog but I must share this because it's totally overwhelming! Watch this:

or go to a Google video page.

Color Picker ASP.NET AJAX extender control

noreply@blogger.com (Alexander Turlov) — Wed, 01 Oct 2008 11:17:56 PDT

I was looking for a client-side color picker control and found it extremely difficult to find something that would satisfy to my requirements. I have found plenty of pure JavaScript controls written on very different levels of proficiency and there was even one ASP.NET color-picker control that I almost liked but still my major requirement was not satisfied: I was looking for AJAX .NET Extender control - easy to use and based on a solid and proven platform.

So I have researched what other color picker controls do and decided to write the one myself that I would base on Microsoft AJAX .NET platform. After some considerations I've decided to go even further and build an AJAX Control Toolkit Extender control.

As an example I took an AJAX Control Toolkit Calendar extender and in my Color Picker extender control I also internally used another AJAX Control Toolkit control: Popup extender.

So what are the advantages of implementing a client control as an ASP.NET AJAX extender?

You use ASP.NET page mark-up to render the control content to the browser.
No need to manually inject JavaScript, HTML and other resources.
You develop JavaScript code in a standalone file leveraging ASP.NET AJAX framework and Visual Studio intellisense abilities.
JavaScript per se is very well structured, easy to read and debug.
Many of the hassles of JavaScript client coding such as cross-browser compatibility, event handling, asynchronous calls are taken care of by ASP.NET AJAX framework.

So I have spent a few days coding the control and finally it's out there. I have created a Codeplex project for it so if you are interested just go there and download the control and a Demo Web site.

Now just a few more words about the extender. First, this is how it looks:

Second, it's extremely easy to use. The extender attaches to an ASP.NET TextBox server control and to an optional button that can open a popup window and an element that samples a selected color in the background. User selects a color by clicking on a colored area. Below is a code example of using an extender on an ASP.NET page.

    <asp:TextBox ID="TextBox1" runat="server" Columns="7" MaxLength="7"></asp:TextBox>
     <asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="~/Images/icon_colorpicker.gif" />
     <cdt:ColorPickerExtender ID="cpe" runat="server"
         TargetControlID="TextBox1"
         SampleControlID="ImageButton1"
         PopupButtonID="ImageButton1"
      />

Feel free to download the extender from the Codeplex, try it and post any comments or suggestions on the Codeplex project page.

Axialis IconWorkshop™ Lite for VS 2008

noreply@blogger.com (Alexander Turlov) — Fri, 19 Sep 2008 11:48:16 PDT

It's been a little buzz around this free VS2008 plug-in but it really is true and there is a free version of the Axialis IconWorkshop for VS2008. If you want to download and install it please use the direct link because you won't be able to find this page on the Axialis web site. Though to be honest its functionality is not anyhow better then Paint.Net which is also free but fully-functional. Besides being called a VS plug-in it opens up in a separate window. But see for yourself.

Working with VEColor class of VirtualEarth SDK

noreply@blogger.com (Alexander Turlov) — Mon, 15 Sep 2008 10:39:25 PDT

If you ever wanted to set a color for a custom VEShape object of type polyline or polygon than you must be familiar with the VEColor class that is used to represent a color in VirtualEarth SDK.

I am sure there are reasons behind of the design of the VEColor class, but for those who are used to a standard Web color representation in a form of 6-digit hexadecimal number it's kind of weird to provide 3 integer number in order to construct a color.

So I was in a search for some convenient ways of converting between VEColor and standard Web color and first place I looked through was of course the VirtualEarth Map control because I thought that the VE developers themselves would need a way to perform the same exercise. No surprise there is a couple of non-documented VE objects to support such conversion technique.

Here is a code example of using those objects:


// Instanciate a convertor class
var converter = new VEHexStringToColor();
// Converter returns an instance of a VEColor class
// Transparency value is always set to 1.0
var veColor = converter.Convert("aabbcc");
// Adjust transparency value
veColor.A = 0.7;
// Convert VEColor to a string with a leading '#'
var webColor = VEColorToHexString(veColor);

alert(webColor);

Both objects are available on the page after you reference a VE Map control v6.1. Of course there is no guarantee of any support of those objects in any future versions of the VE Map control so use it at your own risk and have fun.

Scalable CSS for Ajax Control Toolkit Tabs

noreply@blogger.com (Alexander Turlov) — Tue, 17 Jun 2008 08:51:07 PDT

If you use Tabs control from AJAX Control Toolkit library you may have noticed that the default CSS definition provided with the control does not display properly when you increase font size on a page, that is the default CSS is not scalable.

Since Tabs allows you to override CSS it's quite easy to fix a problem. Just grab a correct CSS file with the set of images and assign a CssClass property a new class name:


        <ajaxToolkit:TabContainer runat="server" 
        CssClass = "myTabs" 
        ...>

Now it looks more appropriate:

Access DataItem declaratively using data binding syntax

noreply@blogger.com (Alexander Turlov) — Tue, 09 Dec 2008 13:14:34 PST

Sometimes there is a need to access a DataItem object of a data-bound server control. It usually happens when you want to display the value of the bound object as a whole instead of its property.

Standard data binding syntax assumes using a Bind(string name) or Eval(string name) methods in the context of data binding expression where name is a name of a property of the DataItem object. But what if the data item if of type that does not have properties like System.String for examples?

In this case there is another method that you can use: GetDataItem(). It will return to you the current instance of the DataItem object.

Syntax example:

<%# GetDataItem() %>

That sort of syntax can be used even for DataSource properties in complex nested databound templated controls.

Last-Modified HTTP header on ASP.NET page

noreply@blogger.com (Alexander Turlov) — Fri, 30 May 2008 12:46:56 PDT

"Last-Modified" HTTP header is an important part of every web page since it helps browsers to cache pages' content locally and thus save HTML traffic. It is also used by internet search engines in order to determine the relevance of the pages' content and thus improves pages' indexing. By default a standard ASP.NET page does not include a "Last-Modified" header in the output HTML.

One of the possible explanation for such behavior is that an ASPX page is considered dynamic by nature meaning that its content might be updated every time the page is requested. It is true in many cases for data-driven and interactive pages but most of the dynamic web sites also contain pages that are updated relatively rare or static.

So when does it make sense to add a "Last-Modified" header to the page? First candidates usually are data-driven pages that display information from some sort of content storage systems (databases, files, etc.) and that information changes but not very frequently so there is a possibility that the same content may be viewed many times. Other apparent candidates are static pages even if they are data-driven but their content does not change for the lifetime.

What are the pages that do not need the "Last-Modified" header? Obvious candidates are interactive pages and pages that displays user session related data.

ASP.NET provides two methods to set the "Last-Modified" header on the page. Both of them belong to the HttpCachePolicy class and are accessible through the Cache property of the Response object:

Response.Cache.SetLastModified(DateTime date);
Response.Cache.SetLastModifiedFromFileDependencies();

The first method takes a DateTime parameter that allows you to apply some algorithm for calculating the Last-Modified date of the page, for instance based on information from a database. The second method will calculate the date stamp automatically based for instance on the assembly build date. For the second method you can also include additional file dependencies in date calculation using

Response.AddFileDependancy(string filename);

For instance if a page displays a content of a static XML file you could include that XML file in the dependency and the "Last-Modified" header's value would be updated based on that file's "Date Modified" attribute.

ScriptManager vs. ToolkitScriptManager

noreply@blogger.com (Alexander Turlov) — Fri, 23 May 2008 11:45:57 PDT

Introduction
ScriptManager is a special ASP.NET server control that should be placed on a page before you can use any of AJAX.NET enabled controls. The same rule is true for the AJAX Control Toolkit controls: they all require a ScriptManager on the page. While AJAX Control Toolkit controls work perfectly fine with the standard ASP.NET ScritpManager the Toolkit includes its own version of the ScriptManager called ToolkitScriptManager that inherits from ScriptManager and is meant to improve some of the ScriptManager's behaviors in particular how it renders out behavior JS scripts. Let's examine how using a ToolkitScriptManager changes a web page's appearance.

Experiment
As a testing example I have created a very simple page consisting of a single Accordion control from the AJAX Control Toolkit library.


<head runat="server">
    <title>Untitled Page</title>
    <style type="text/css">
        .accHead { border:1px solid #445566;font-size:larger;background-color:#aaa;}
        .accHeadSel { border:1px solid #445566;font-size:larger;background-color:#444;color:#fff;}
        .accCont { border:1px solid #ccc;padding:5px;}
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <ajax:ToolkitScriptManager ID="tsm" runat="server"></ajax:ToolkitScriptManager>
    <%-- <asp:ScriptManager ID="sm" runat="server"></asp:ScriptManager>--%>
    <div>
<ajax:Accordion
    ID="MyAccordion"
    runat="Server"
    SelectedIndex="0"
    HeaderCssClass="accHead"
    HeaderSelectedCssClass="accHeadSel"
    ContentCssClass="accCont"
    AutoSize="None"
    FadeTransitions="true"
    TransitionDuration="250"
    FramesPerSecond="40"
    RequireOpenedPane="false"
    SuppressHeaderPostbacks="true">
    <Panes>
        <ajax:AccordionPane ID="AccordionPane1" runat="server"
            HeaderCssClass="accHead"
            ContentCssClass="accCont">
            <Header>Pane Header 1</Header>
            <Content>Content 1</Content>
        </ajax:AccordionPane>        
        <ajax:AccordionPane ID="AccordionPane2" runat="server"
            HeaderCssClass="accHead"
            ContentCssClass="accCont">
            <Header>Pane Header 2</Header>
            <Content>Content 2</Content>
        </ajax:AccordionPane>        
        <ajax:AccordionPane ID="AccordionPane3" runat="server"
            HeaderCssClass="accHead"
            ContentCssClass="accCont">
            <Header>Pane Header 3</Header>
            <Content>Content 3</Content>
        </ajax:AccordionPane>        
    </Panes>            
    <HeaderTemplate>List of Panes</HeaderTemplate>
    <ContentTemplate></ContentTemplate>
</ajax:Accordion>
    </div>
    </form>
</body>

You may have noticed that right after the form tag there are ScriptManager (SM) control and ToolkitScriptManager (TSM) control on the page but one of them is commented out. Next I run a page from VS 2008 two times: first using the SM and second using TSM, and compare the results.

HTML output and traffic
Let's compare the HTML output of two page versions. See a WinMerge screen shot below that shows the SM version in the left pane and the TSM version in the right pane.

First difference you see is that TSM adds its own hidden field on the page (top right pane) and the next and more important difference is that TSM renders one script reference on the page instead of the five ones that SM does.

Now if we examine the page's traffic with the FireBug we'll see how that changes the traffic: first graph refers to the page using the SM control and the second one when the TSM's at work.

Analyzing the graphs it's easy to see that the TSM does reduce a number of browser's round-trips by combining multiple script references into a single one. This advantage will become more attractive as more AJAX-enabled server controls will be placed on a web page that support script combining. However it is not necessarily true that it will always reduce the page loading time. As you can see when TSM returns a combined script to the page it takes some time to perform a work on the server. Correspondingly the amount of work and consequentially the response time directly depend on the number of scripts to combine (that is a number of AJAX server controls) and the size of the scripts to process (white spaces removal and compressing).

So there is no single recommendation that it's always preferable to use TSM instead of SM. In many cases SM version of a page may work faster then a TSM version of the page. Since it's not that difficult to alter a page for both cases I'd advise to test and compare both versions in your particular scenario before making a decision which one to choose.

ToolkitScriptManager and Web Deployment Project

noreply@blogger.com (Alexander Turlov) — Fri, 23 May 2008 11:49:16 PDT

Problem description
If you use AJAX Control Toolkit in your project you probably use ToolkitScriptManager from the Toolkit instead of standard ASP.NET ScriptManager class. Now if you want to deploy your web application using Web Deployment Project (WDP) for VS2008 then you will find out very quickly that your AJAX enabled application features don't work. The reason for that is there is a JavaScript error on a page saying that the root JavaScript object for AJAX Control Toolkit is not defined on the page and all the subsequent scripts relying on that object have failed. I am not reproducing the exact message here because it may vary in different situations.

Background
You have tested your web application many times in your Dev environments and everything worked just fine. So what you've changed is you used a Web Deployment Project to build and deploy your web application and you presumably wanted to take advantage of a famous precompile and merge feature of the WDP.

Explanation
Now the problem is that the missing JavaScript on the page is rendered by a ToolkitScriptManager object that generate a link to a JavaScript code using a ScriptResource handler which is in its turn supposed to retrieve the code embedded into assembly. Because WDP changes the names and locations of the assemblies ToolitScriptManager was unable to resolve the assembly name and could not generate the link so your page does not have that JavaScript reference any more.

Workaround
Use standard ASP.NET ScriptManager instead of ToolkitScriptManager and everything will work again.

What's next?
I am in a process of investigating whether a ToolkitScriptManager brings any advantages comparing to a new ScriptManager 3.5 in terms of more efficient HTML rendering and will post here my findings as soon as possible.

Also if you are interested in employing a ToolkitScriptManager together with the Web Deployment Project I invite you to vote for this bug on Codeplex.

#if DEBUG in ASP.NET 2.0 code behind

noreply@blogger.com (Alexander Turlov) — Thu, 22 May 2008 09:38:37 PDT

If you use an ASP.NET web site in your solution (another alternative is WAP - web application project) you may have noticed that there is no more compiler options in Configuration Manager that would have allowed you to add compiler constants like DEBUG. So the question pops up whether it's still possible to use very convenient way of excluding debug code from the production version by using #if preprocessor directive. Luckily it turns out that it's still supported and now it's related to a value of a "debug" attribute of a "compilation" element of the Web.config file. If you surround a part of your code with #if DEBUG ... #endif it will be included when debug="true" and excluded when debug="false".