The story behind is that we had an application which heavily used ValidatorCalloutExtender for displaying validation errors. Everything was working great till we had to validate date in non-english culture. We used CompareValidator for validating date (“DataTypeCheck” operator). Then, strange thing happened – form wasn’t saved, but no validation message was shown. After further digging I discovered that CompareValidator runs only on server side for validating date in non-english culture and ValidatorCalloutExtender does not show after post back as it is written on its page:

The callouts do not currently display automatically after a server post-back and will only work for custom validators which utilize client-side validation. Even after a post-back the callout will display when the form is re-validated when a postback is attempted again.

To not rewrite validation (displaying validation messages) in whole application we came to the following solution. Validation must be done on client side to show ValidatorCalloutExtender, so we used CustomValidator which perform date validation on server side  and use ajax on client side to call the same method on server side.

Simplified markup is as follows.

<asp:TextBox ID="TbDateOfBirth" runat="server" />

<asp:CustomValidator ID="DateValidator" runat="server"
  ControlToValidate="TbDateOfBirth"
  SetFocusOnError="True" Display="None"
  ClientValidationFunction="DateValidator_ClientValidate"
  OnServerValidate="DateValidator_ServerValidate"
  meta:resourcekey="DateValidatorResource1" />

<ajaxToolkit:ValidatorCalloutExtender runat="server"
  ID="DateValidatorE"
  TargetControlID="DateValidator" />

Javascript function is below. We used jquery, because using MS AJAX you can’t do synchronous call and we need that to return validation result immediately.

function DateValidator_ClientValidate(source,
                                      clientside_arguments) {
  clientside_arguments.IsValid = false;

  jQuery.ajax({
    type: "POST",
    async: false,
    url: "Validation.aspx/IsDateValid",
    data: "{date: '" + clientside_arguments.Value + "'}",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function(msg) {
     clientside_arguments.IsValid = msg.d;
    },
    error: function(msg) {
      clientside_arguments.IsValid = false;
    }
  });

  return clientside_arguments.IsValid;
}

Server side method within Validation.aspx page:

[WebMethod]
public static bool IsDateValid(string date)
{
  SetupCulture();//to set correct culture for dates

  try
  {
    DateTime.Parse(date, Thread.CurrentThread.CurrentCulture);
    return true;
  }
  catch( Exception ex )
  {
    return false;
  }
}

And server side validation method for CustomValidator.

protected void DateValidator_ServerValidate(object sender,
                                 ServerValidateEventArgs e)
{
  e.IsValid = Validation.IsDateValid(e.Value);
}

So, basically that’s it. Maybe this is not the most elegant solution, but it’s simple and works.

Hope it helps.

Related posts

1. Hosting ASP.Net application on a shared server
2. Introduction to xVal
3. ASP.NET session mockup

AWStats is an open-source Log analyzer than can be easily configured to work with IIS logs.

My AWStats configuration for IIS7 is based on a great instruction written by Simon Schofield Installing AWStats on IIS 6.0 (Including IIS 5.1) – Revision 3.0.

But “out of the box” AWStats doesn’t provide any statistics for the time-taken IIS logfile field. It also can’t be configured, using the provided Extra Section feature.

But it can be “easily” added, by updating the core awstat.pl configuration file.

Find below my updated instruction how-to install AWStats on IIS 7.0 and include in the Extra Section the Time-taken statistics, which displays the average of time-taken to display a specific ASPX page:

INSTRUCTION for AWStats 6.95 (build 1.943) :
Installing AWStats on IIS 7.0 and IIS 6.0 including time-taken statistics
DOWNLOAD awstats.pl:
Updated awstats.pl configuration file, that include the IIS time-taken statistics.

***********************************************
A very short description:

First in the LogFormat string a new extra parameter was specified:
LogFormat="%time2 %method %url %other %logname %host %other %ua %query %virtualname %code %bytesd %extra1"

In the awstats.pl file the lines of code responsible for counting the page hits, were replaced by computing the average of time-taken to open a webpage – new variable was introduced for that. Additionally the web-report(general and detailed) column title was changed to “Avg Time Taken[ms]“:

An example of the AWStats time-taken statistics for IIS 7.0:

Related posts

1. Web Deployment Project – Visual Studio 2008 Add-in
2. Hosting ASP.Net application on a shared server
3. Ajax Control Toolkit – PageRequestManagerTimeOutException

Visual Studio Web Deployment Projects, provide additional functionality to build and deploy Web sites and Web applications in Visual Studio 2008. This Add-In can be downloaded from Microsoft website: Web Deployment Projects.

The Visual Studio built-in “Copy Website” and “Publish Website” options are lacking of flexibility. Web Deployment Projects provides additional functionality for example:
- merging assemblies (from context menu)
- the ability to create pluggable configuration files (from context menu)
- exclude files and folders (*.wdproj file in deployment project)

When merging assemblies you can specify to get only 1 result DLL, instead of multiple when using “Publish web site”.
Second thing is, that you can define a strong name of result DLL file which means, that it will be easier to updates the web site on the webserver – just replacing the DLL, instead of deleting all assemblies with *.compiled XMLs and copying new ones (can be hundreds). So you don’t have to carry about the “strange” assemblies file names (with the hash code varying) like: App_Web_0375kxso.dll, etc.

Ability to create pluggable configuration files allows you to specify independent files, that store the contents of a particular configuration section independently, based on solution configurations. That means for example, that the Web.config section will include different database connectionString for Debug and Release, or any other user specified solution configuration.

You can also exclude files and folders that shouldn’t be part of the release, e.g: reports, uploaded files, etc.

Finally the *.wdproj configuration file has a MSBuild syntax, so you can specify there whatever you want. Out of the box there are 4 build process sections: BeforeBuild, BeforeMerge, AfterMerge, AfterBuild, where you can specify your tasks.

The detailed description of the Web Deployment Projects can be found HERE.
*********************************************************
Find below some of my *.wdproj configuration examples:

Exclude directory:
<ItemGroup>
<ExcludeFromBuild Include="$(SourceWebPhysicalPath)\**\_svn\**" />
<ExcludeFromBuild Include="$(SourceWebPhysicalPath)\**\.svn\**" />
</ItemGroup>


Exclude directory except specified file:
<ItemGroup>
<ExcludeFromBuild Include="$(SourceWebPhysicalPath)\ChartImages\**\*.*" Exclude="$(SourceWebPhysicalPath)\ChartImages\**\place.holder" />
</ItemGroup>


Minimize (shrink) JavaScript files using Microsoft Ajax Minifier (based on Łukasz Gąsior blog):
<Import Project="$(MSBuildExtensionsPath)\Microsoft\MicrosoftAjax\AjaxMin.tasks" />
<Target Name="AfterBuild">
<ItemGroup>
<!-- Create the list of JS files to minimize. Exclude *.min.js files, e.g. jquery-xxx.min.js -->
<JsFilesDevelopment Include="$(OutputPath)\**\*.js" Exclude="$(OutputPath)\**\*.min.js" />
</ItemGroup>
<!-- Minimize the JavaScript using AjaxMin -->
<AjaxMin SourceFiles="@(JsFilesDevelopment)" SourceExtensionPattern="\.js$" TargetExtension=".js" LocalRenaming="CrunchAll" />
</Target>


*********************************************************

Related posts

1. Manycore and the Microsoft .NET Framework 4: A Match Made in Microsoft Visual Studio 2010
2. Visual Studio 2010 .NET 4.0 (Beta 1)
3. Visual Studio 2010 Beta 2 and Ajax Library

Recently, I have been very surprised by LinqToSql, because it is not as smart as I supposed. Here is a code that confused me a little.

from customer in db.Customers
    join customerGallery in db.CustomerGalleries
        on customer.ID equals customerGallery.CustomerID
    join profile in db.CustomerProfiles
        on customer.ID equals profile.CustomerID
where
    (customerGallery.AlbumId != profile.CompanyHistoryAlbum)

The context is that customer can have many galleries depending on his profile, but he always have one default gallery. The query above retrieves a default customer gallery – the one not used in any profile.

The problem in this query is that it won’t work when in column CompanyHistoryAlbum is NULL. LinqToSQL translates “!=” comparison to SQL as simple “<>”, so when NULL is compared to customerGallery.AlbumId UNKNOWN is returned and condition is not met.

More on that you can read here (“Null semantics” section) and here (“Comparing Null Values” section). As a solution I added null check as if it was in SQL:

from customer in db.Customers
    join customerGallery in db.CustomerGalleries
        on customer.ID equals customerGallery.CustomerID
    join profile in db.CustomerProfiles
        on customer.ID equals profile.CustomerID
where
    ((profile.CompanyHistoryAlbum == null) ||
    (customerGallery.AlbumId != profile.CompanyHistoryAlbum))

I also found that for comparisons with variables, e.g.:

from customer in db.Customers
where
    (customer.Address == address)

the best is to use object.Equals – LinqToSql will generate then appropriate NULL checks:

from customer in db.Customers
where
    object.Equals(customer.Address, address)

Hope it helps!

Related posts

1. Top 13 MySQL best practices
2. New features in NUnit 2.5. Part 2 – testing exceptions
3. Hosting ASP.Net application on a shared server

How to avoid “PageRequestManagerTimeOutException” while using Ajax Control Toolkit?

I was having a problem when developing an ASP.NET Web Application using Ajax Control Toolikit.
On one of my Report pages, the constructed SQL query using LINQKit was pretty complex. It took a while for the SQL Server to return the results.
The complexity depends on the amount of specified filter parameters by the user. There are also calculations and transformations performed on the SQL results, which of course affect the request execution time.
This caused, that sometimes on my report page, when sending the Ajax request, the users browser noted a JavaScript error, instead of displaying the report.

First thought was to increase the Ajax PostBack Timeout. I can be set in the code behind – by default it’s set to 90 seconds:
…
ScriptManager.AsyncPostBackTimeout = 120; //in seconds
…
But what if there are more users requesting a report at the same time? At least I need to inform them, why they didn’t get what they were expecting.

There is a possibility in the Ajax Control Toolkit, to attach user JavaScript code when the request ends.
So if I attach my code that displays an alert message and/or redirects to an error page, that would be great! I could better handle this timeout.

So in the Master Page, after the ScriptManager control, I’ve added new JavaScript code:

Some explanation of this code sample:
- get the current Script Manager instance
- attach custom endRequest event function
- check if the request ends with an error of the type:
  Sys.WebForms.PageRequestManagerTimeoutException
- if the above^ condition is true, notice the Script Manager that this
  error was handled (prevent from JavaScript errors in users browser)
- finally redirect to custom error page (display error message, send error
  emails, etc.)

Additionally the reqManager._postBackSettings.panelID provides me extra informs about the update panel that started the request, because there are more of them on one page.

So this “simple” JavaScript code performs a timeout error check for all Ajax request in my Web Application.

Related posts

1. Using jQuery to fit thumbnails
2. Hosting ASP.Net application on a shared server
3. Introduction to xVal

The most interesting feature of this add-on, is displaying extra jQuery attributes attached to an HTML element, using the jQuery.data() method. That means NOT standard HTML tag attributes like: CSS Class name, Size, etc.
Due to the JQuery API “the jQuery.data() method allows us to attach data of any type to DOM elements in a way that is safe from circular references and therefore from memory leaks”.
Using this JQuery method is really easy:

<script type="text/javascript">
   //Look into the Firebug HTML Tab
   //and watch the BODY Tag.
   //You should see the [Extradata] in there.
   $('body').data('Extradata', {
       Prop1: "Test1",
       Prop2: "Test2"
   });
</script>
</body>
</html>

Other useful feature of this add-on is, the JQuery methods are on the top of the Firebug DOM window list, or at least in the Top 20 :).

Last but not least you can display FireQuery information about HTML tags in the Firebug console, using the console.log() command:

...
<script type="text/javascript">
   //This command will display in the Firebug console
   //extra jQuery attributes of the BODY tag.
   console.log($('body'));
</script>
</body>
</html>

Complete FireQuery test source code:

FireQuery additional information in Firebug:

Without any doubts I can say, that this extra information may be sometimes helpful and can improve my work when developing websites using JQuery JavaScript Library, but you need to be careful! The author writes, that this extension may be insecure. Good solution is to have dedicated Firefox profile for development and use it only for safe sites.

This Firefox Add-on can be download from the Binaryage website.
Also a FireQuery demo page was provided for tests.

Related posts

1. jQuery 1.4 Released!
2. New Firebug 1.5 released
3. Using jQuery to fit thumbnails

New Firebug 1.5 for Firefox was released.

The most interesting new feature for me, is the “Breakpoints on DOM (HTML) Mutation Events”.
It stops the javascript debugger, when a specified element(HTML tags, Javascript objects) or property get changed.
It even stops and displays the line of javascript, which caused the change. This feature will relay improve my work as a Web Developer.

An official Firebug 1.5 demo will introduce you to all new features.

Related posts

1. FireQuery – Firebug extension for jQuery development
2. jQuery 1.4 Released!
3. ASP MVC 2 Preview

The problem

I’ve run onto a problem today: I had a bunch of thumbnail files that should be displayed in a gallery page in fixed-size boxes, but each image had different dimensions.

It’s easy to fit images to a box using css and width/height properties – you can apply one of them (i.e. width), and leave the other not set – the image will be resized and will keep it’s aspect ratio.

The problem arises, when you have to fit images to a box (say 160px x 200px), but images can have any possible size. You have to handle wide images (i.e. 250px x 100px) as well as narrow ones (100px x 250px).

The solution

There are several ways to deal with image sizing on web pages:

• using plain css  – but this is not a cross-browser solution
• if the images are generated within your application – refactor the thumbnail generation procedure to output images that fit perfectly into the box
• use client-side javascript

When your application has to deal with already existing files, then you’re left only with the last solution.

jQuery

Javascript image manipulation is tricky when you have to deal with dimensions, events and still keep it working on all major browsers. That’s why I have choosen jQuery for that. The main reason is that jQuery separates you from the browser – you don’t have to waste time implementing bunch of “ifs” for each browser.

In my code the images are outputted using this part of HTML code:

<div style="overflow: hidden;width: 160px;height: 200px">
 <a href="target_to_image_or_gallery">
  <img class="imageFitBox" src="some_thumbnail.jpg?rnd=5624562456" alt="(Image is missing)" />
 </a></div>

If you use ASP or PHP or any other server-side processed scripting language, you will probably use some controls to output the images, links etc. It doesn’t matter whether you put that part into table cells, floating divs or any other construct.

Important parts in the code above:

• the outer div element has fixed size

• image’s class name is set to “imageFitBox”

• image’s url is extended with a random number (can be also current date or anything simmilar) to prevent browser from image caching. This is required, because some of browsers when displaying a cached image do not set up the javascript width / height properties of a image.

• code is a part of document’s DOM (it can’t be in a  detached node kept in javascript variable – it must be part of page)

The jQuery part :

//attach to onload event - it's fired when entire page is loaded (icluding images)
$(window).load(function()
{
 //iterate the images that have the imageFitBox class set up
 $('img.imageFitBox').each(function()
 {
  //check if image height exceeds the maximal height of box
  if ( $(this).height() > 200)
  {
   //if so - limit only the height to maximal height
   $(this).css('height','200px');
  }
  //IMPORTANT! after setting up the height, check the width
  if ( $(this).width() > 160)
  {
   //reset the height...
   $(this).css('height','');
   //.. and apply width constraint
   $(this).css('width','160px');
  }
  // you can also set up the margins of image, to center it inside the box
  $(this).css('margin-left',( ( 160-$(this).width() )/2)+'px');
  $(this).css('margin-top',( ( 200-$(this).height() )/2)+'px');
 });
});

Note: WordPress forces &gt and &lt in code blocks. Please replace it with > and < operators.

You can put the jQuery script any place you want – it can be in a separate javascript file or inisde the HTML page.
To get jQuery and see how to use it visit jQuery homepage.

Related posts

1. FireQuery – Firebug extension for jQuery development
2. jQuery 1.4 Released!
3. Ajax Control Toolkit – PageRequestManagerTimeOutException

Recently we had to deal with really big page produced as output from ASP.NET web site. While looking some solutions of possible improvements I’ve found very nice article. Author has gathered some very useful tips and links in one place. So in case you are interested in practical performence improvements of ASP.NET I recommend you to take a look at this post.

http://www.codeproject.com/KB/aspnet/aspnetPerformance.aspx

Related posts

1. ValidatorCalloutExtender and server validation in ASP.NET
2. ASP.NET session mockup
3. Visual Studio 2010 Beta 2 and Ajax Library

Today, I have opened a demo ASP.Net 2.o project in Visual Studio 2008. Everything was compiling just fine, but after running the project I saw the following message:

Compiler Error Message: CS0433: The type ‘x’ exists in both
‘c:\Users\myuser\AppData\Local\Temp\Temporary ASP.NET Files\root
\336e1678\ef5434a2\assembly\dl3\ae492fce\7da7bd16_c706ca01\y.DLL’
and ‘c:\Users\myuser\AppData\Local\Temp\Temporary ASP.NET Files\root
\336e1678\ef5434a2\x.ascx.cs.cdcab7d2.qcmqdjk8.dll’

The ‘x’ was an user (‘ascx’) control. After searching and trying many solutions I have found one matching. I had to replace ‘Src’ page directive with ‘CodeBehind’ in control markup.

<%-- old one --%>
<%@ Control Language="C#" AutoEventWireup="true"
    Src="x.ascx.cs" Inherits="x"%>

<%-- working one --%>
<%@ Control Language="C#" AutoEventWireup="true"
    CodeBehind="x.ascx.cs" Inherits="x"%>

Other solutions that might be helpful for you are here: http://forums.asp.net/t/980517.aspx.

Hope this will help.

Related posts

1. ASP.NET Site Performance Tips and Tricks
2. Ajax Control Toolkit – PageRequestManagerTimeOutException
3. Oracle Database Gateway