Dirty Checking and the .NET GridView

Most Web Developers have come across this problem at one time or another, how do I stop someone navigating away from a page if they have not saved any changes they have made?

The answer is that you need to employ ‘Dirty Checking’, basically set a flag when the page data is changed and check it if the user tries to navigate away. Sounds simple (and in many instances it maybe so) but I have encountered a problem recently (today!) which took some thought to get around. Basically I had a Master page with the following Javascript in the head section:

var isDirty = false; 
function setDirty(changeVal) { 
window.onbeforeunload = checkExit; 
function checkExit() { 
    if(isDirty == true) {
        return confirmExit(); 
function confirmExit() {
    // this value will be return as a part of the confirmation message 
    return "You have not saved your changes to this record."; 

Any page utilising the dirty checking had some code in the Page_Load event that looked something like this:

ddlCategory.Attributes.Add("onchange", "setDirty(true);");  // Dropdown List
txtWorkArea.Attributes.Add("onchange", "setDirty(true);"); // TextBox
chkAssessmentRequired.Attributes.Add("onclick", "setDirty(true);");  // Checkbox
buttonSave.Attributes.Add("onclick", "setDirty(false);");  // Button
function confirmExit() {
    // this value will be return as a part of the confirmation message 
    return "You have not saved your changes to this record."; 

So when the page is loaded the edittable controls have an attribute added which will execute the setDirty function and set the dirty status accordingly. Note that the Save button is configured to clear the Dirty Status (i.e. set it to false).

So, what’s wrong with that? Well nothing, everything works as expected – but enter the .NET GridView control! The dirty checking was then added to a page that contained a .NET GridView control and the problems started. The GridView allows in-line editing and can be configured to commit changes to the underlying database upon clicking the ‘Ok’ button within the editted row. However, as the GridView only held part of the information on the page we wanted it all to be committed at the same time, i.e. update the GridView but not call the Update method of it’s DataSource until the whole page was being committed. I had to wire up the dirty checking to flag any changes made to the data it contained.

My first approach was to set the dirty status of the page when any row was actually updated, i.e. when the user clicked on the OK button of the Edit Row. This could easily be caught in the RowUpdated event and seemed a logical choice and initially seemed to work as expected – until one of those damn tester people got hold of it. It was found that if the page was in a dirty state before any data in the GridView was editted then clicking on the Edit link button would result in the ‘Unsaved Changes’ dialog being displayed. It was clear that the onbeforeunload event is being fired by the GridView going into Edit Mode and there was nothing we could do about this – we just had to find a way around it.

We decided that as well as flagging the Dirty State we also had to flag and maintain the ‘edit’ state of the page. This way we could ignore Postbacks that occured when the GridView entered Edit Mode – simple….. The Javascript code in the Master Page was updated by adding a new ‘IsEditing’ function and updating the condition within the checkExit function.

var isEditting = false;
function setEditing(nextValue)
    isEditting = nextValue;
function checkExit()
    if(isDirty == true && isEditting == false)
        return confirmExit();

So now we could flag a page as being in Edit Mode and bail out of checkExit if it was (even if the apge was flagged as being dirty). But we were not out of the wood quite yet – we still needed to wire the new functions into the rest of the code. We needed to add the ‘onclick’ attribute to each Edit button in the GridView to flag the page as being in Edit Mode. The simplest way of doing this is from within the RowCreated event:

protected void GridView1_RowCreated(object sender, GridViewRowEventArgs e)
  LinkButton editButton = (LinkButton)e.Row.FindControl("LinkButton1");
  if (editButton != null)
    editButton.Attributes.Add("onclick", "setEditing(true);");

When the row has been updated we need to clear the Edit mode flag and set the pages Dirty state to True. This can be done in the RowUpdated event which is fired when the user clicks the OK button of a row in Edit Mode.

protected void GridView1_RowUpdated(object sender, GridViewUpdatedEventArgs e)
  ScriptManager.RegisterStartupScript(this, this.GetType(), "SetDirty", "setDirty(true);setEditing(false);", true);

So, how do I know that the Edit button will be called LinkButton1? Well by default when a CommandField is added to a GridView there is no way of knowing – so you have to convert the field into a Template field instead.

With this code in place clicking on the Edit button sets the page in Edit mode and the ‘Unsaved Changes’ dialog is not displayed. If they make changes to the data fields and click OK then the flags are reset accordingly. Now we just need to handle the situation where the user clicks on the Cancel button of a row in Edit mode. Adding the following code to the RowCancellingEdit event sorts that out:

protected void riskAssessmentDetails_RowCancelingEdit(object sender, GridViewCancelEditEventArgs e)
    ScriptManager.RegisterStartupScript(this, this.GetType(), "SetEditing", "setEditing(false);", true);

So there you have it, one method of utilising Dirty Checking in ASP.NET page utilising the .NET GridView control. It may not be the only, or the best way but it solved the problem that we encountered. If you spot any mistakes or have any suggestions then feel free to leave a comment.

All Change……

If you are one of the 100 or so previous visitors to the site then you may notice that it has changed quite a lot, in fact the more observant of you will notice that I am now running a WordPress Blog Engine rather than a Joomla! based CMS.
I decided to change to WordPress for a number of reasons but I belive in trying to use the right tools for the job and as the site was growing into more of a blog and while Joomla! can handle this it is pretty well accepted that WordPress is the No1 Blog engine on the Net. That’s not to say that Joomla was a load of rubbish but the learning curve was much, much greater with than with WordPress.

I also found that trying to find and install plugins was not as easy with Joomla! as it is with WordPress. The site will probably have quite a bit of code on it and trying to get Syntax Highlighting plugins for Joomla! was a nightmare. In contrast I had a WordPress one installed and working in minutes.

I’m not totally turning my back on Joomla! though as we are going to be using it within one of the projects we are running at work – so I’ll still need to climb the learning curve but at least I’ll be getting paid to do it which can’t be bad.

The only thing lacking (so far) is the ability to take the site offline (although I understand that the is a plugin for this) so if you are reading this around the same time I’m typing this post then be aware that I am still working with the imported data from the Joomla! site so some of the posts will be missing until I update the links etc.

gnash not Flash enough

I’m a comparative newbie to Ubuntu (and Linux in general) but one of the plus points is that it’s Free. You can install Ubuntu on an old PC without putting your hand in your pocket and you get not only a fully functional operating system but all the tools that most users require, i.e. an Office Suite, Web Browser and Email/Calendar client.
I recently found that I could not view some pages properly, e.g. Google Analytics, and traced the problem to the playback of Flash components. I had installed gnash as my Flash plugin for Firefox and frankly it just doesn’t cut it. The only option was to remove gnash and install Flash itself. But how? As it turns out is is pretty simple, with just two commands in the Terminal I had Google Analytics as a number of other Flash enabled sites running perfectly.

First you will need to remove gnash so open a Terminal window and type:

sudo apt-get remove purge gnash gnash-common mozilla-plugin-gnash libgnash0

Now you can install Flash by entering:

sudo apt-get install flashplugin-nonfree

Don’t worry about the nonfree suffix here, Adobe are not going to come knocking on your door for payment. Basically it means that the package is not provided under GPL so while you can use it freely you can’t modify it. As one of the guys on the #ubuntu IRC channel described it ‘Free as in Speech not as in Beer’.

Close and reopen any browser windows you may have open and you should now be able to view Flash enabled site without any problems.

Installing the LAMP stack and Joomla!

As I want to be able to develop web based application I need to install the LAMP Stack. The term “LAMP” refers to a collection of applications that are required to run dynamic websites on a Linux system.

  • Linux : Operating System (in this case Ubuntu)
  • Apache : Web Server
  • MySql : Database
  • PHP (or PERL, Python etc) : Programming Language.

There are a number of methods for doing this but most use that I found required interaction at the command line which can be a bit daunting for new users (like me) and also turns the process into something of a Black Art. Coming from a Windows background I feel more comfortable with a graphical user interface (GUI). Having said that, when I initially installed the LAMP stack on my spare Hard Drive I had used the command line approach and all went well.

Of course I nver wrote the commands down so when it came to installing LAMP on my dual boot setup and had to Google it again but this time found a method for using for Installing LAMP using the Synaptic Package Manager. That’s more like it – a GUI approach. The link will take you to a page that refers to Ubuntu 7.10 but take my word for it that it does work on 8.10 as well.

Now that I have LAMP installed, I can have a go at installing Joomla which is going to be my playform of choice for CMS-type development.

Again, there are a number of resources detailing the installation of Joomla but I chose to follow the one in the Ubuntu Community Documentation. Now I know that this is a command line process but as Joomla is not in the repository so it has to be installed manually.

Following the process led to a fully functional installation although I did miss the command to delete the installation directory post-install but once I sorted that it was fine, all I have to do now is to work out how to use Joomla itself.

Dual Booting Vista and Ubuntu

In a previous post I stated that have installed Ubuntu 8.10 (Intrepid Ibex) alongside Vista on my Toshiba laptop but this was not as straightforward as I had hoped.
I had upgraded the laptop with a 160GB hard drive and Vista was reporting that there was about 90GB free. Great, I only want about 20-30GB for Ubuntu so I should have no problems at all – should I?

The problem is that when i installed Vista I clicked on the ‘Use Entire Drive’ option – which is what I wanted at the time. Now Vista has the ability to shrink a volume so I thought this would come to my rescue – I was wrong! Even though I had 90GB free the shrink tool would only reclaim about 200MB of it!

I initially suspected that the problem lay with Vista spreading itself across the available disk, i.e. there was some data at the far edge of the disk which was was acting as an outer marker. So surely a ‘quick’ defrag would sort that out – erm, no. Following the 3 hour defrag I ran the Shrink Tool again which now reported that I could reclaim …. absolutely nothing! Damn it!

So I would have to bite the bullet and repartition the drive. The problem was that I had experience of partitioning drives in the past and been burnt on a couple of occasions.

Well this time I had the Internet on my side and I was going to research the hell out of this before I put my system at risk of total destruction.

Well as it turned out I didn’t need to search too far before it became obvious that GParted was the tool of choice. I duly downloaded the .ISO and burnt it to a CD which I then booted my system from. I’ll not bore you with the details but the process was pretty straightforward you just had to make 100% certain that you are not about the destroy the main partition, i.e the one with Windows on it. I made absolutly certain and the partition was duly created.

So I had a new partition, separate from Vista, all I needed now was an operating system on it.

The Ubuntu installation was totally uneventful – a few simple selections and a few next buttons later and I was done. Again, make sure that you are installing on the right partition!

The end result is that when I boot up I get the GRUB bootloader where I can select whether I want to boot into Vista or Ubuntu. The default configuration is for the topmost item to be highlighted initially with a 10 second delay before it is automatically selected and the boot process commences. The problem (if you can call it that) is that the top item is Ubuntu – which may not be what you want, it certainly was not what I wanted at the time – mainly because my girlfriend uses the laptop and if it booted into something other than Vista while I was not around I would be in serious trouble!

Well there is a solution to this but it requires running a command at the Ubuntu command line.

If you want to set the default to be your Windows configuration just follow these steps:

  • Boot into Ubuntu
  • Open a Terminal session (which you’ll find in the Applications menu under Accessories)
  • Enter the following sudo gedit /boot/grub/menu.lst
  • Enter your password and press enter

gedit (which is a text editor similar to Notepad) will then open with the contents of the file displayed.

About a dozen lines down you will see a line that reads:

default 0

This is the value that needs to be changed but determining what number to enter is not obvious. The business end of the file is right at the bottom, this is where the options listed by grub are located. The two important things to remember are that the first option is numbered zero, not one and that the divider (which reads ‘Other Operating Systems’) should also be counted.
Basically you need to count, from zero, the lines that start with ‘title’ until you reach ‘Windows Vista/Longhorn (loader)’. This is the value you need to enter as the default.

Now while that works OK right now, when you install a new kernel (and you will) the list will increase in length and the next time you boot up you will see that the wrong option is selected. No big deal, just log into Ubuntu again, edit the file again and reboot. You can remove items from the list but I’d advise that leaving the new kernel and the previous one.

New Years Resolution 2008/9

Like many other people around the world I have made numerous New Years resolutions over the years and come March they are all but forgotten. Now I don’t smoke and I don’t drink (to excess anyway) but I do carry a few extra pounds around with me – and they have been there for a few years now despite numerous “I will eat less/better this year” resolutions. 

The fact of the matter is this; If you don’t want to do something, you won’t. Simple as that. So this year I thought that I would think of something that I would want to do (and not something that other people think I should do!) I currently work as a developer for a company using the Microsoft .NET 2.0 technologies and consider myself to be competant in VB.NET and C# for the development of ASP.NET applications. However, the technologies never stand still and I have still to look at the advances in .NET 3.5 such as LINQ so maybe I should resolve to dig into 3.5 even though the company does not yet implement it. I mean, I may not be working here forever and in the current climate it is wise to keep yourself as up to date as possible. 

Mind you, when i was looking for a new job recently (and found this one) there were a lot of vacancies for developers with experience in the Open Source languages such as Python, PHP, Perl etc. Now I have tinkered with Python and PHP in the past when I was at University but never carried on once I had graduated. I have also toyed around with Linux (mainly Red Hat) but never really put the time into it for it to become anything more than a bit of fun. 

So what if I could come up with some way of keeping my Microsoft knowledge upto date and add some of the Open Source skills as well? I cannot move from one side of the fence to the other but to climb up onto the fence so that I can see both sides. 

So, this is my resolution:

“I’ll devise some pet projects that will require the acquisition of new skills in the latest .NET Framework AND attempt to replicate the same functionality in an Open Source language.”

I have selected C# and Python as my Microsoft and Open Source options respectively for Desktop Based applications and ASP.NET(C#) and PHP for my Browser Based applications. I may change this in the future but it seems like a good place to start for now.