Arnold Matusz's Blog

Take an ASP.NET Application offline with HttpModules

arnold — Wed, 02 Sep 2009 23:55:11 -1200

Whenever you do maintenance work on a website it is advisable to show the visitors a nice message telling them politely to come back later, rather than a nasty error, or even worse: a big Yellow Screen of Death.

Since ASP.NET 2.0 came out of the labs of Microsoft, there is a way to take a web application down using the “app_offline.htm” approach. You simply create a HTM file, which you then upload to the server, and if there is any request to this web application, IIS will automatically show the contents of the app_offline.htm file. Once uploaded, most people only rename the file so that it doesn't catch up with IIS anymore, and the site is already back online.

This approach comes in really handy when you upload new files to the server, and while the upload did not finish, there are already requests coming in. (Ex: somebody accesses your website - ~/default.aspx, and you have some logic in this page that references a class that has not been uploaded yet)

Where this approach simply doesn’t cut the mustard is when you want to restrict the access for visitors, but you still want to be able to access the site as an administrator (testing, problem investigation, general maintenance). The app_offline.htm approach is not good for this because simply everybody will get the content of the app_offline.htm file no matter what the requested page is.

In the quest for a good solution to this problem I had the following facts in mind:

same sort of easy use like uploading the app_offline.htm (maybe a similar file to trigger the action)
access granted based on the ip of the visitor (if AdminIP == RequestIP –> unrestricted surfing)

My current solution looks like this:

The filter is triggered when a file named “offline.html” exists on the server. (This is practically the same idea as the app_offline.htm one)
The web.config file contains an application settings key defining the Administrator IP

To filter the unwanted IP addresses out, I’m using a HttpModule:

/// 
/// This is how you take an ASP.NET application offline the 
/// Arnold Matusz way with AppOfflineModule
/// 
public class AppOfflineModule : IHttpModule
{
    public void Dispose()
    {
    }
    public void Init(HttpApplication context)
    {
        context.BeginRequest += new EventHandler(context_BeginRequest);
    }
    void context_BeginRequest(object sender, EventArgs e)
    {
        HttpApplication application = (HttpApplication)sender;
        HttpContext context = application.Context;
        if (File.Exists(Path.Combine(context.Server.MapPath("~"), "offline.html")))
        {
            string ip = context.Request.UserHostAddress;
            string adminIP = ConfigurationManager.AppSettings["AdminIP"];
            if (ip != adminIP)
            {
                context.RewritePath("~/offline.html");
            }
        }
    }
}

As you can immediately see, on each Request, I’m performing a check for a file named offline.html with File.Exists(). If it exists I’m checking for the administrator IP in the web.config file to see if the request is coming for somebody that should not be restricted.

Adding your HttpModule is easy:


  ...
  
  ...

Once offline.html uploaded, each “restricted” visitor will only see the content of offline.html.

To disable the whole functionality you only need to rename the offline.html file to anything else (I suggest a difference of a character so that it can be easily renamed back: offlin.html).

In a very small maintenance group this solution works just fine, but for future work I’d definitely create some functionality to define more IP addresses which can access the website while it’s taken “offline”. Defining an IP class would also be another good idea, particularly when the number of “administrators” is very big.

There is little limit in the possibilities to identify who can and cannot access your website if you use this approach, you only need to program your logic into a BeginRequest event, and you are ready to go.

Download the code

ASP.NET Menu with jQuery Superfish

arnold — Sun, 09 Aug 2009 20:41:52 -1200

Choosing the right type of menu for a website is not easy at all. The ASP.NET Menu Control is definitely NOT a good starting point due to the horrendous markup it renders, nor is it good for SEO because of the Markup/Content ratio, neither can it be easily styled.

Of course there is the CSSFriendly Control Adapters project that started back in 2006, which made the the ASP.NET Menu (and many other ghastly markup rendering controls) render beautiful

based markup. In the case of the Menu it rendered

and

type markup which is probably the most widely spread technique used for creating menus known to mankind.

To every upside there is a downside. Although there are some examples online for both integration and styling I really find the CssFriendly Menu Adapter a bit difficult to style. The online example shows the styling technique on 3 different levels which then results in a huge CSS file. To give it some credit, the supplied CSS example is extremely well commented, so one with little CSS experience will do just fine.

But in Mythbusters tradition: “If it’s worth doing, it’s worth overdoing”, the idea is to use a modified version of the CssFriendly Menu adapter with the jQuery Superfish plugin.

I’ve renamed all the css class names in the CssFriendly project (the ones like: “AspNet-Menu-Vertical”, “AspNet-Menu-Leaf”, “AspNet-Menu-WithChildren”) to their Superfish equivalent ("sf-menu”, “sf-with-ul”, etc.). Now you can use the jQuery Superfish Menu Plugin out of the box with it’s standard css class names.

You need use the same sort of markup for your server side ASP.NET Menu control like you’ve used with the standard CssFriendly Menu Adapter, and make the JavaScript call needed to set the Superfish plugin up.
```
    
        
            
            
            
            
        
        
            
            
            
                
                
                
                
            
        
        
            
            
            
        
        
    
```
The necessary JavaScript:
And the outcome looks like …

I like it allot how you can take advantage of jQuery and make this menu animate when submenu items open, I also like how easy it is to create and maintain the css for the menu. Then there is the fact that you can couple Superfish with other plugins like bgIframe, hoverIntent, and also Supersubs, which enables you to resize the width of submenu items independently according to the longest item within that group. Most of all, I like how my menu looks the same in all browsers including that … IE6 – no comment here.

The downside is that there is no graceful degradation. But this is always a problem with ASP.NET Webforms with that __doPostback function() and as I’m building the whole functionality upon jQuery the full featured JavaScript library the website has no sense without JavaScript.

I would like to point out that I have not created the CssFriendly Menu Control Adapter, I have only renamed the css class names, so no copyright infringement intended.

The CssFriendly project pages:
- CSS Friendly Control Adapters - on Codeplex
- Custom control adapters for built-in ASP.Net controls - Google Code
jQuery Superfish plugin:
- Superfish – jQuery menu plugin by Joel Birch
Download the solution containing a sample website and the altered CssFriendly Menu Adapter project: CssFriendly ASP.NET Menu with Superfish.

What do you use to create a menu with ASP.NET?

ASP.NET Membership – Show list of users online

arnold — Mon, 13 Jul 2009 00:54:10 -1200

The .NET Framework 2.0+ comes with a set of functionality for easily building security enforced web applications mainly with the ASP.NET Membership API and the Security web controls. The Membership class has most of the feature one would need with user management, and because it is based on a Provider Model you can write a provider for any Database you wish.

While working on an intranet application I often faced the following situation. Several people were online, logged in, when I needed to upload a new version of the web application. Because I personally know all the people who have access to this application it’s important for me to see who is online so I can announce them before taking the application down and uploading a new version.

The MembershipProvider Class exposes the GetNumberOfUsersOnline() method which returns the number of users online apparently. Well theoretically there is no 100% true way to tell who is online, because HTTP is a stateless protocol and it works simply on a Request-Response basis. There is no guarantee that somebody is still there in 5 seconds after the Response has ended.

Therefore the MembershipProvider can be set to consider a user as online for a certain amount of minutes after the last request. The aspnet_Users table contains a column which stores the LastActivityDate for each user which is then compared to the current time – the UserIsOnlineTimeWindow Property that is set in your web.config file.

This is all very nice and useful except it’s not enough for me. It’s not enough to know that there are 7 people online, I would like to show a list of users online, I would like to know who exactly is online and interesting enough … there is no implementation for this.

So it wouldn’t be a big deal to write a little code to replicate the same functionality to return the usernames aswell. For sake of speed, simplicity and because it’s the most accessible at the moment I’m using an Entity Data Model which is generated for a standard Database (which has been prepared for ASP.NET Application Services with aspnet_regsql.exe). So I won’t be writing any SQL manually, I’ll just use LINQ to Entities to query the data model.

Entities entities = new Entities();
IEnumerable users = entities.aspnet_Users.Include("aspnet_Membership");
var result = (from usr in users
              select new
              {
                  UserID = usr.UserId,
                  Username = usr.UserName,
                  LastActivityDate = usr.LastActivityDate
              }).AsQueryable()
                .Where(u => DateTime.Now.Subtract(u.LastLoginDate).TotalMinutes < 10);

Although everything seems fine, interestingly this doesn’t yield the expected results. And after you take a look at the stored procedure that the SqlMembershipProvider executes when you call GetNumberOfUsersOnline() it’s not difficult to understand why.

CREATE PROCEDURE [dbo].[aspnet_Membership_GetNumberOfUsersOnline]
    @ApplicationName            nvarchar(256),
    @MinutesSinceLastInActive   int,
    @CurrentTimeUtc             datetime
AS
BEGIN
    DECLARE @DateActive datetime
    SELECT  @DateActive = DATEADD(minute,  -(@MinutesSinceLastInActive), @CurrentTimeUtc)
    DECLARE @NumOnline int
    SELECT  @NumOnline = COUNT(*)
    FROM    dbo.aspnet_Users u(NOLOCK),
            dbo.aspnet_Applications a(NOLOCK),
            dbo.aspnet_Membership m(NOLOCK)
    WHERE   u.ApplicationId = a.ApplicationId                  AND
            LastActivityDate > @DateActive                     AND
            a.LoweredApplicationName = LOWER(@ApplicationName) AND
            u.UserId = m.UserId
    RETURN(@NumOnline)
END
GO

When you take a look at the CurrentTimeUtc declaration everything becomes clear. Because SQL Server and IIS instances may not run from the exact same computer the result of DateTime.Now can be very far apart (imagine the web server in America and the SQL Server in Australia –> totally different time zones –> totally different values for DateTime.Now). Also to avoid any sort of confusion @MinutesSinceLastInActive represents the UserIsOnlineTimeWindow property.

To show a list of users online only slight modification is needed to achieve the desired results, you only need to call ToUniversalTime() on DateTime.Now because this is how SQL Servers stores the LastActivityDate.

Entities entities = new Entities();
IEnumerable users = entities.aspnet_Users.Include("aspnet_Membership");
var result = (from usr in users
              select new
              {
                  UserID = usr.UserId,
                  Username = usr.UserName,
                  LastActivityDate = usr.LastActivityDate
              }).AsQueryable()
                .Where(u => DateTime.Now.ToUniversalTime().Subtract(u.LastLoginDate).TotalMinutes < 10);

gv.DataSource = rez.OrderByDescending(u => u.LastActivityDate);
gv.DataBind();

Binding this result to the following GridView will display the list of the users online.

Throughout my example I’ve used the value of 10 for the UserIsOnlineTimeWindow property, but this could come directly from web.config, from an appSetting or anything convenient to you.

Any feedback is welcome, I appreciate all of your comments, questions and opinions.

LINQ Distinct, Except, Contains, Union, Intersect and IEqualityComparer

arnold — Tue, 23 Jun 2009 00:51:37 -1200

LINQ is one feature I could not live without anymore. It is always a pain to work on projects using older technologies. The gap between .NET 1.1 (VS.NET 2003) and .NET 2.0 (VS.NET 2005) was huge and it was difficult to develop anything in ASP.NET v1.1 after you got your hands on .NET 2.0. But the gap between .NET 3.5 SP1 coupled with Visual Studio 2008 and the prior version is far bigger.

There is LINQ, LINQ to SQL, Lambda Expressions, the Entity Framework (and allot more) which simply boost your development speed. Anyone who hasn’t tried these yet: you definitely need to have a go!

The whole idea behind this blog post is that I’ve been doing some work using the ADO.NET Entity Framework on a project. In a method I’ve been collecting all sorts of data from different static/shared methods from Entity Framework classes (of course all very coming from other ObjectContexts). But once applied the Except operator on an IEnumerable<> collection I found some unexpected results.

The Except operator returns the set difference of two sequences by using the default equality comparer to compare values. In proper English this means that the Except method returns those elements in first sequence that do not appear in second by simply comparing the Objects themselves.

In my situation this was wrong because of course Object1 and Object2 are not equal even if they have all the same values inside them. Of course this will work if your sequences contain only integers or real numbers (because the default comparer will know how to compare two numbers). But the default comparer definitely won’t know how to relate two Entity Framework classes.

This is why you can implement a custom Comparer class inherited from IEqualityComparer. Using such a class you can exactly assess when two objects are really equal. In my case, because I’m actually checking whether 2 table rows correspond (are practically the same) I’m only interested to see if their Primary Key is equal.

If you wish to replicate the code examples you can go ahead and create a new project, in which you should create a new Entity Data Model of a database which contains the tables for the ASP.NET Application Services (Authentication, Profiles, Roles, Logs, etc.).

For sake of this example I’ll count:

All registered users
All users that are locked out
using Except – all the users that are not locked out

First of all we need 2 Methods that return the needed data (registered users and locked out users).

    public IEnumerable AllUsers()
    {
        Entities entities = new Entities();
        return entities.aspnet_Users;
    }
    public IEnumerable AllLockedOutUsers()
    {
        Entities entities = new Entities();
        return entities.aspnet_Users.Include("aspnet_Membership").Where(u => u.aspnet_Membership.IsLockedOut);
    }

Of course (and on purpose) both methods create a separate ObjectContext (in my example: Entities) so that we can actually see the effect of Except.

My front end only needs 3 labels: which appropriately display the count values:

    All users: 
    Locked out users: 
    Not locked users:

THE WRONG WAY:

    Entities entities = new Entities();
    IEnumerable all = AllUsers();
    IEnumerable lockedout = AllLockedOutUsers();
    IEnumerable notlockedout = all.Except(lockedout);
    lblAllUsers.Text = all.Count().ToString();
    lblLockedOut.Text = lockedout.Count().ToString();
    lblNotLockedOut.Text = notlockedout.Count().ToString();

Note how all.Except(lockedout) is called without any IEqualityComparer instance (hence the default comparer is used). The outcome of the execution is that the result contains all the items it contained before the call (actually nothing happened).

THE RIGHT WAY:

An EqualityComparer class is needed which should be inherited from IEqualityComparer(T).

public class MyUserComparer : IEqualityComparer
{
    public bool Equals(aspnet_Users a, aspnet_Users b)
    {
        return a.UserId == b.UserId;
    }
    public int GetHashCode(aspnet_Users user)
    {
        return user.UserId.GetHashCode();
    }
}

A very important notice here is: in the GetHashCode() method you explicitly need to return the HashCode of the property you are comparing, not the object itself. If simply won’t work if you use:

    public int GetHashCode(aspnet_Users user)
    {
        return user.GetHashCode();
    }

In fact this is similar to what the default comparer does, which we definitely want to omit.

Finally, here’s the code that will render the expected results. The difference is in the Except call where we instantiate the MyUserComparer class.

    Entities entities = new Entities();
    IEnumerable all = AllUsers();
    IEnumerable lockedout = AllLockedOutUsers();
    IEnumerable notlockedout = all.Except(lockedout, new MyUserComparer());
    lblAllUsers.Text = all.Count().ToString();
    lblLockedOut.Text = lockedout.Count().ToString();
    lblNotLockedOut.Text = notlockedout.Count().ToString();

Conclusion

In the same was as above you can use IEqualityComparer with other query operators like:

Distinct
Contains
Intersect
Union

If anyone has difficulties, don’t hesitate to contact me and if this helped you don’t forget to kick it or shout it or … etc.

call JavaScript - jQuery code from ASP.NET Server-Side

arnold — Wed, 03 Jun 2009 23:55:41 -1200

jQuery got so close to me lately that I can see myself adding the scripts to my project almost unconsciously. The thing is, jQuery is very useful for me, in almost all situations and it has been a do or die enhancement for all my project since I first put my hands on it.

Of course while using it, you encounter few situations which need a bit of research to solve, mostly when you are trying to combine it with some other technologies like: UpdatePanels and ASP.NET Ajax. For instance there are many situations when I would like to run some jQuery magic based on some decision that I make on the server side.

It’s not the case to use jQuery ajax calls here, the point is I would like to run some jQuery code after a postback or an asynchronous postback with results coming from the server. This would mean that I’d need to prepare the scripts on the server-side in my code-behind and use RegisterClientScriptBlock to run them on the browser.

The catch is that using ClientScript.RegisterClientScriptBlock simply won’t render your scripts when the request is coming from an AsyncPostbackTrigger of an UpdatePanel. In this case you’ll need to call ScriptManager.RegisterClientScriptBlock.

To solve this automatically I’ve created a method which then handles all the logic that I need for running some JavaScript code after the request has been processed. This method the JavaScript code that needs to run on the browser as a parameter, and encloses within a $(document).ready for sake of this example.

The whole logic sits behind this idea: We need to know if the current request is a standard synchronous Postback or if it is an AJAX Asynchronous Postback from an UpdatePanel. Therefore in my code I check if there is any ScriptManager registered with the Page (in this case ScriptManager.GetCurrent(this), ScriptManager.GetCurrent(Page) will not return null, but we still need to check whether the request was asynchronous by checking the IsAsynchPostback on the ScriptManager instance.

If there is a ScriptManager on the page and the request was Asynchronous, then the JavaScript code needs to be registered with ScriptManager.RegisterClientScriptBlock. If the request is just a simple standard Postback, registering the JavaScript with Page.ClientScript.RegisterClientScriptBlock is the solution.

For sake of this post I’ve created a short example (which you can also download and view at: )

    private string getjQueryCode(string jsCodetoRun)
    {
        StringBuilder sb = new StringBuilder();
        sb.AppendLine("$(document).ready(function() {");
        sb.AppendLine(jsCodetoRun);
        sb.AppendLine(" });");
        return sb.ToString();
    }

getjQueryCode is the method that encloses your code that needs to run after the Postback within a jQuery $(document).ready() call.

    private void runjQueryCode(string jsCodetoRun)
    {
        ScriptManager requestSM = ScriptManager.GetCurrent(this);
        if (requestSM != null && requestSM.IsInAsyncPostBack)
        {
            ScriptManager.RegisterClientScriptBlock(this, 
                                                    typeof(Page), 
                                                    Guid.NewGuid().ToString(), 
                                                    getjQueryCode(jsCodetoRun), 
                                                    true);
        }
        else
        {
            ClientScript.RegisterClientScriptBlock(typeof(Page), 
                                                   Guid.NewGuid().ToString(), 
                                                   getjQueryCode(jsCodetoRun), 
                                                   true);
        }
    }

runjQueryCode is the method which handles the logic I talked about earlier. By using this function all over you project respects the DRY principle, of course you can change the way it generates the JavaScript code on the server side, I have created this only for sake of this example.

The markup that is needed for this example is the following:

Please note how the first button is set as a PostBackTrigger. This will force it to reload the whole page (which in term demonstrates how the code works when there is a standard postback) even if it is declared within the UpdatePanel. The second button launches an AJAX request (which in term demonstrates how the runjQueryCode method works while fulfilling and AJAX request).

    protected void btnPostback_Click(object sender, EventArgs e)
    {
        runjQueryCode("alert('After a standard postback.')");
    }
    protected void btnAsynchPostback_Click(object sender, EventArgs e)
    {
        runjQueryCode("alert('After an asynchronous postback.')");
    }

The click event handlers of the 2 buttons on the form simply call the runjQueryCode method with custom JavaScript code (in this case it’s a simple JavaScript alert).

One very important thing to note is the following:
The rendered script tag needs to be after the script tag that imports the jQuery library. If you use Collection from the ScriptManager, this could break the code because your scripts from the server side will get rendered before the ScriptManager renders the script tags for the js files you use with the ScriptManager.
One workaround is: add the script tags in the section of your page.

As a little homework, if anybody is interested, to check that your JavaScript code won’t run after an ASP.NET AJAX request, you can create a Button in an UpdatePanel, and on its click event try to run the ClientScript.RegisterClientScriptBlock and miraculously nothing will happen.

Download the code or check out the Demo

Why do you still use IE6

arnold — Thu, 14 May 2009 00:23:49 -1200

Most web designers and developers who target all sorts of browsers will ask the same question: Why do people still use Internet Explorer 6? I mean there is nothing obvious in using Internet Explorer 6 in 2009. I hardly observe myself checking for updates of software products I use on my computer, I’m doing it subconsciously.

I’m an exception, you may say here because I’m a web developer and I’m using this stuff daily. Well … NO!!! Everyone should update their software because time is passing by quickly, everything evolves around us, so does computer technology, so does software and so do the standards.

Internet Explorer 6 was released in August 2001, and it was respectable back then. If was far away from very good, because it didn’t fully support a CSS standards that appeared 5 years before it was launched. Cascading Style Sheets, level 1 was published as a recommendation in Dec 1996 and according to Wikipedia IE6 contained “partially support for CSS level 1”.

I should not even mention that the CSS level 2 W3C recommendation was out in May 1998. We should not only blame IE6 (maybe other Internet Explorer versions) here because other browsers have their own problems with CSS 1 and 2, but somehow I can see Mozilla Firefox and Google Chrome trying much harder to respect these.

Back in 2009 I’m still thinking about how on earth, after 8 years have passed, after 2 other Internet Explorer versions have made their way into the world of WWW, there is still 15% share left for IE6. This is funny because according to W3C statistics IE6 still holds 15.4% in browser usage, but this is sadly the same for my website. And if the impact of this still isn’t visible and jumping into the eye, imagine that 150 out of 1000 visitors of this site still use Internet Explorer 6.

Now, considering I have almost 100% developer audience, I'd expect 99.99999% of my visitors to use anything other than IE6, but it’s far cry away from that. But generally speaking I don’t understand the reasons why people still use it, consider the following: security!!!

I personally use Firefox and Google Chrome, but if anybody likes Microsoft products that is not a problem: NEWER VERSIONS ARE ALLOT BETTER. Go ahead and update/upgrade to the latest version of Internet Explorer.

As a conclusion only one thing remains for me to say: IE6 still isn’t dead yet, web developers and designers will still need to support it as the market share is still to high, and this only means much more sleepless nights fighting with IE6.

I’d like to ask a question to which you can answer in a comment, but I’d like to except cases where an old system configuration won’t allow something newer to run, or run decently fast.

Why do you still use Internet Explorer 6?

jQuery UI DatePicker instead of AJAX Control Toolkit CalendarExtender in ASP.NET

arnold — Mon, 04 May 2009 23:36:40 -1200

When the ASP.NET Ajax Control Toolkit first came out with the CalendarExtender, I just loved it. That smooth transition when navigating from month to month or year to year really won me over. I’ve also loved how I could use it as a simple ASP.NET Control by integrating it in my pages and using from my code-behind.

I took a look at the jQuery UI DatePicker widget (from an ASP.NET Developers point of view), which again completely won me over. What was it this time? Well … the speed, the options, the themes, the frequent updates, the ease of integration, etc.

Well this post started probably out of disappointment and I wanted to call it: Why I abandoned using the CalendarExtender and choose to go with the jQuery UI DatePicker instead. The disappointment started from a CSS issue, namely I’ve been using some default values for tables like:

border-collapse: separate;
border-spacing: 2px;

Of course the lovely CalendarExtender doesn't override these, and of course due to the fact that it specifies a default width (which works well in normal / default conditions) the last column of days can’t be seen.

You can as well go ahead and add new classes to your CSS files, but I do not accept this idea, as the Ajax Control Toolkit is a drag and drop solution. Add a reference and it adds everything that is necessary, even some good quality CSS and you are ready to go. On the other hand I don’t want to do the same hack for each and every site I use Ajax Control Toolkit on, so this issue should be solved once and for all.

This means that I need to download the Ajax Control Toolkit source, edit the CSS, compile, add the new reference, clear cache and we are ready to go. Except there is another problem. On day, there will be a new version of the Ajax Control Toolkit, which will also need to be “hacked” (of course if I don’t forget it) before I’m using it in a website.

Then there is another thing I don’t agree with on the Ajax Control Toolkit Calendar Extender. I do not like the fact that I can’t set the Culture and UiCulture for a specific control. It inherits the specific setting from the @Page declaration or from your general settings in the web.config file. It is logic, and it does work but it doesn’t seem elegant enough, or should I say elastic or dynamic enough.

Of course most of my comments here are only viable if I compare the CalendarExtender to the jQuery UI DatePicker, which is simply a beautiful piece of work.

After working with the jQuery UI DatePicker I noticed how much markup I needed to write to display a Calendar, it isn’t that bad when you need to create one, but if you have several dates that need to be recorded on one page, maintaining >4 CalendarExtenders tied to some TextBoxes isn’t that much fun.

Instead you can use a CSS class for each TextBox (given that you need to use the same options for all) and then make use of the powerful jQuery selector like:

$(".datePicker").datepicker();

For instance to create a set of 4 Calendar controls and 4 DatePickers you would need to write something similar to:

1) ASP.NET Ajax Control Toolkit – CalendarExtender

2) jQuery UI DatePicker

The jQuery UI solution is much more pleasing to my eye, what do you think?

You can check out the multitude of options the jQuery UI comes with on the jQuery UI DatePicker Demo Page. Most of these didn’t seem that important for me at the first sight but then it’s really a big help disabling the option to choose a future date (IE. restricting certain dates). For example with the jQuery UI DatePicker you can set the maxDate and minDate of the widget which will only allow the Date selection within that range.

    $(document).ready(function() {
        $("#<%=txtTimeSheetDate.ClientID %>").datepicker({
            dateFormat: 'dd.mm.yy',
            minDate: -5,
            maxDate: 0,
            showOtherMonths: true,
            showStatus: true
        });
    });

The above piece of code generated the following DatePicker:

This isn’t easily and quickly doable with the CalendarExtender, in fact you can handle some events like: OnClientDateSelectionChanged or OnClientHiding but this is simply not straightforward, and because maybe one day, someone else will need to maintain this page you’ll better go with the KISS (Keep is Simple, Stupid) principle and use the DatePicker instead.

Then there is another factor that speaks for jQuery from my point of view. There are several themes to choose from, so there will definitely be one that will fit the stylesheet theme of your website. If not, you can still manually edit the CSS files supplied with the downloaded package, or you can create new classes which override the default settings, exactly the way it is possible with the Ajax Control Toolkit.

One disadvantage that comes with the usage of the jQuery UI library is the size of it. At the current version (1.7) the full jQuery UI library together with all the CSS and images bundled will way around 450kb uncompressed, which is allot, but the upside is that in the jQuery UI Download section you can customize your download. If for instance you don’t need certain effects or interactions or even widgets the size of the library will decrease considerably.

Although this will decrease the first load of the webpage, the JavaScript will be cached, and won’t be downloaded again until it expires.

What I also like about the jQuery UI library is that it gets updated relatively often, it ships with very few bugs, it’s super cross browser compatible and it integrates well in my solutions with ASP.NET and jQuery. The other day I’ve created a little piece of software for a photo gallery where I combined the ModalPopupExtender, jQuery and jQuery UI, sortable and draggable interactions to reorder images with jQuery Ajax Callbacks with the gallery, and modally edit names and descriptions of images.

The documentation is also a slight PRO for the jQuery UI, so there is no more question about it. Simplicity, ease of use, excellent quality, use the Ajax Control Toolkit, but replace it with jQuery UI where and whenever possible.

When computer science takes a break

arnold — Sat, 02 May 2009 23:39:38 -1200

It’s a long time since I’ve last been out for a little photo shooting. It’s probably not the photography that is so desirable, I think it’s more the fact that I get to disconnect from all the daily matters, from programming, from all the new information that arises daily from nowhere.

I never seem to get tired, I always feel like I have enough reserve to do anything. I never feel I need to get a good sleep or that I would like to do something else. I always feel good in my little world of … hmm, there would be too many to enumerate here. Anyway I always feel myself occupied with keeping up with the latest technologies, the latest trends, programming languages and techniques, etc.

Only when I take a short break from what I do usually, do I feel how desperately I need a bit of free time. I desperately needed a bit of “something else”. The little walk in a forest far away where you would think nobody has been before, far away from any civilization really did charge my batteries up, and now I feel like I could move mountains.

I also found a little scene for a little photo that I would like to share, exactly where I thought nobody has been before I found a little man-made concrete :).

Shooting info:

F/13.6
0.77s exposure time
ISO 200
Fujifilm FinePix S5700

For all you “computer scientists” out there I really recommend disconnecting yourself from the computer from time to time, it’s well worth it.

jQuery and ASP.NET first steps

arnold — Sun, 26 Apr 2009 08:34:07 -1200

This post may be most relevant to those who haven’t had the chance to work with jQuery yet. Lately there is a great hype around jQuery, very many people talk about it, very many write excellent example but most of them target more advanced users.

jQuery is a lightweight (~19KB Minified and Gzipped) JavaScript library which easily enables us to traverse the DOM (Document Object Model), handle events, animate elements, and do asynchronous requests (AJAX – Asynchronous JavaScript and XML).

What is it that could make your like easier if you are an ASP.NET developer? Well the biggest reason for me is that I don’t need to repeat tons of code to get things done. 9KB of jQuery is way enough to speed up client-side development and reduce the overall development effort due to the fact that you do not have to repeat writing the same kind of code in different projects / pages.

The $ sign, the jQuery function:

The most important functionality of jQuery is based on this function. It’s used to select matching elements using a so called selector engine by supplying it an expression (which generally is CSS).

You can visit: jQuery Selectors Reference to for the whole list of supported expressions. When the expression consists in selecting an element by it’s ID you have to take special care to inject the generated ID of the ASP.NET control. The ID of an element in HTML is not necessarily the same that is specified in the form with the runat=”server” attribute . The correct way to select an element by its ID is:

This example sets a 3 pixel solid red border to the element with the specified ID. <%= is actually similar to a “Response.Write(txtName.ClientID)”.

jQuery document.ready function, what is it?

$(document).ready(function() {}); actually is very simple to understand if we read it in little steps:

$(document) returns an object that exposes the ready event
ready – is the event that is fired once the document has been loaded and ready to be manipulated
function() { // your code here } is actual a callback function and it gets executed once the ‘document’ is ready to be manipulated

Why is document.ready that important? Well the answer is that normally most of the JavaScript code should run immediately after the DOM has been loaded. Place all your JavaScript goodies inside one document.ready and jQuery takes care of when it needs to be run. You can also have multiple document.ready functions in your page and your code will be executed in the same order you’ve defined them.

Attention: the jQuery $(document).ready function isn’t called after an ASP.NET Ajax callback. Some ASP.NET Ajax Client Library code needs to be inserted for this to work and I have documented this in two previous posts: jQuery $(document).ready() and ASP.NET Ajax asynchronous postback and jQuery live() and ASP.NET Ajax asynchronous postback.

In the past many tasks within an ASP.NET web application needed advanced JavaScript skills to accomplish. (ex. GridView with a checkbox on each row with select/deselect all options associated with a CheckBox in the header). jQuery makes these kinds of tasks allot easier. In this sense jQuery simply moved the goal posts in client-side development.

Firebug Lite for IE, Google Chrome, Opera, Safari

arnold — Tue, 07 Apr 2009 01:17:04 -1200

I’ve been using Firefox for quite allot of time now, and I got used to many extensions I could not live without in the day to day development life. Firebug is one of these. When somebody told me: You can’t call yourself a web developer unless you have Firebug installed, I thought this was a bit to hard. But after I faced many situations where Firebug was the definitive tool, I really think everybody should use it.

I often have to do some work on websites in other browsers (Ex: IE – eeeek I know). This is when I really feel I like and I miss Firebug. I really love to see how asynchronous requests are performing (network monitor), I really love how you can inspect and edit DOM elements, I really love to edit the DOM on the fly and see the effects instantaneously, I really love to edit the CSS on the fly and see the effects, you guessed it: instantaneously. I also love that it has got a JavaScript Console where I can test my jQuery magic on the fly. Then there is the fact that it logs JavaScript errors and I also need to mention I love that I can debug JavaScript with it.

The good news is that there is a JavaScript library called Firebug Lite, which as a matter of fact integrates Firebug into your DOM. This actually means that it can work in “any” browser.

Can I have FireBug functionality in Internet Explorer, I hear you asking!?!? YES, as said, any browser. According to the official website the following browsers are supported: Internet Explorer, Opera, Safari. I should not mention Firefox here as we have the original Firebug extension.

You can work in two ways with Firebug:
1) You either work with it in offline applications by downloading the JavaScript library and integrating the js into your HTML. or…
2) You can bookmark the following link: Firebug Lite which will bring up the Firebug console on the currently displayed page (bookmarklet).

We all have our preferred products, and it’s the same for browsers: my choice is definitely Firefox for now, but using Firebug Lite you can now enjoy your preferred browser with the excellent functionality of Firebug.

This might not be latest hour information and I apologize for those who already know about Firebug lite, but sadly this concept isn’t spread well enough throughout the world of web development, so this is my little contribution to this.

I kindly invite you to visit the official Firebug website for further information, screenshot from different browsers, etc.