We are the champions!!

By now you should have your set of restoring DVDs and the bootable DVD that includes the tools required to continue the process.

I’m going to start explaining the manual steps to restore the image, so you can understand what’s going on, and then I’ll give you the code for the restore.cmd script that can be used to restore the system automatically.

Important!!

Go and get yourself a coffee while you back-up your data, as the restoring process described here cleans the hard drive.

Create partitions

The first thing the we need to do is to clean the disk and create the partitions. To do that we will use diskpart.

The process involves creating 2 partitions. The first one is for Windows. Here I’ve used a 40GB but you can choose what you want. and the second needs to be al least 15GB to copy all the image parts, as the tool imagex doesn’t prompt for multi-disk image and we need to do this manually. I wouldn’t be too worried by now about the size of the partitions. I my case, once I had the system restored and Windows finished installing, I went to the Windows Disk Management tools and I resized the Windows partition and created some Striped partitions (RAID 0) to improve performance.

In case you need to use Windows HD encryption, you will need to create 3 partitions. 1st for the partition called “system” (this one will be the active one, and it doesn’t need a letter assigned as it’s hidden)

After booting from the boot DVD you will have a command prompt.

Type: diskpart

SELECT DISK 0                              
CLEAN                                       

CREATE PARTITION PRIMARY SIZE=40000       (create a 40GB partition for Windows)
SELECT PARTITION 1           
FORMAT QUICK FS=NTFS LABEL="Windows"
ASSIGN LETTER="C"                  
ACTIVE

CREATE PARTITION PRIMARY                (create a second partition in the disk for the remaining)
SELECT PARTITION 2               
FORMAT QUICK FS=NTFS LABEL="EXT"       
ASSIGN LETTER="e"                           

EXIT

Copy image parts to disk

Now that we have the partitions we need to copy the image parts and the tool to restore the image to e:

In case you had the image parts in an external HD or USB Key or the second HD, you don’t need to copy the files locally. Instead you could connect your USB external HD and go to the next step (restore the image) because the system can detect the external HD when you plug it in and read the image directly from there (you only need to type the right source location)

copy d:\imagex.exe e:\

copy d:\sources\asus.swm e:\

(change to DVD 2 )

copy d:\sources\asus2.swm e:\

(change to DVD 3 )

copy d:\sources\asus3.swm e:\

Restore the image

Once we have the files in the HD e:, we need to go to e: (where we have the imagex.exe file) and apply the image to the HD c: with the next command

e:
imagex /ref e:\asus*.swm /apply e:\asus.swm 1 c:

The command:

• /ref e:\asus*.swm   => tells the imagex program that the file is in several parts and needs to reference all the files called e:\asus*.swm
• /apply e:\asus.swm 1 c:  => tells the imagex program that the file to apply is called e:\asus.swm (to create that file uses the /ref files) and it needs to apply from that file the image number 1 (because the tools support several images in a single file) to the HD called C:

This process can take a while, just wait until it’s finished.

Make the HD bootable

Now that the Windows image has been restored we need to make that image bootable. To do that we need to go the the restored Windows system files and run the bcdboot command.

CD c:\Windows\System32
BCDBOOT C:\Windows

Finished!

At this stage your system has already been restored and you need to reboot. Remove all your DVDs and restart the machine.

You can type wpeutil reboot to do so.

If everything went Ok, your system must be restarting and finishing the installation in the same way it did the first day that you used your computer. So finish the install, fix your partitions and uninstall all the rubbish that thy have installed by default. I also recommend to create a backup of your system once you have it the way you like it, and next time you can restore it to that state directly without having to do all these steps.

The scripts

To finish creating the fully automated restore you can use the following scripts (to continue the process in the part 1).

There are 2 txt files with the commands for diskpart to clean the HD and create partitions. The reason why is that depending on the HD partitions before restoring the system, when the restoring starts, the partitions are mounted in different drive letters. If this happens, the scripts don’t know which drive contains the tools and where to copy the image files. To solve that, what I have implemented is a 2 steps recovery. First, I check if the tools are in the expected location (it happens when the HD is clean). If the script can’t find the tools in the HD d:, then cleans the HD and restarts automatically. Next time the system boots, we know where we are and we can automate the process. There are better ways to do this, but this one works and I didn’t want to spend too long for a process that shouldn’t happen more than once or twice a year.

Diskpart clean HD (clear_partitions.txt)

Diskpart clean HD (create_partitions.txt)

Restore.cmd

In this script I have added a bit of error checking, some CLS (clear screen) and messages to make it look a bit better and easier to use once it’s been deployed.

You can modify the script to adapt it you your convenience in case you have a different number of DVDs or you are creating images for other machines.

1. The first section I check if the tools are where I expect. If they aren’t I clean the HD and I restart (I have explained this above).
2. In the second section I check if the *.swm files are where I expect. If they aren’t I prompt to change the disk and try again. When you change the disk, some times it takes a couple of seconds for the system to pick it up, so be patient.
3. After the files are copied I copy imagex to e: and start restoring
4. Then I create the boot for the new Windows
5. And I restart. I used the command ping to wait for 5 seconds and let the user see that it’s all good, but you can remove this step (ping -n 6 127.0.0.1 > nul  each ping take 1 second)
6. If there was any error I jump to the end and I finish the process

Congratulations!

At this stage you are smarter than the guys that developed the restoring system for ASUS because:

• you understand all the recovery process (the tech support has no idea and they will tell you that you can’t be happy and that you need to take the computer for them to restore it and waste your time for few hours)
• you are able to create a more flexible set of recovering disks (ASUS want you to be unhappy trying to restrict you how to use the computer that you have bought)
• You no longer have a 20GB partition in your HD.

If ASUS was smarter, they would give you the original install install disk (I would have paid a bit extra to avoid all the crap that they have put in my computer and that I have uninstalled anyways). They may probably get some extra cash from the companies of the preinstalled rubbishware they put in your machine, but in a long term, they end up paying back all that money because of they need a larger number of people in support to attend complains and answering users and they have to spend extra resources as electricity to keep your computer plugged-in while restoring.

Enjoy your coffee!!

In this post I’ll explain how to manually create a set of DVDs from the original ASUS system image files named asus.swm, asus2.swm and asus3.swm. This method can be used for other brands that have the same type of lame restoring system or if you want to split an image bigger than the size of a DVD (usually the split is named install.swm install2.swm install3.swm).

After you finish reading your post you’ll be able to create a set of DVDs/CDs of the size you want and have a bootable DVD/CD that will automate the restoring and prompting to introduce the next disk. I’m going to add as many details and explanations as I can to allow non developers to be able to understand the process and create their set of DVDs. So if you find it too easy, skim through. If you find it still complicated, add a comment and I’ll try to give more samples (you can read the MS documentation as well).

To create the recovery DVDs we are going to need “Windows Automated Installation Kit for Windows 7” (Windows 7 AIK) installed (you can download it and install it for free). This is the set of tools that the laptop manufacturers use create the images that are installed in your system. This post can also be used as a tutorial to understand the process of deployment using Windows 7 AIK (the steps used here are taken out from Microsoft documentation and they are using the tools that MS has made freely available to users to deploy Windows in an alternative way to standard setup). I take no responsibility of any errors in the scripts that I’ll be providing in the next post and I take no responsibility of the information that could be lost by using these steps. Please take your time to read the official Microsoft documentation about the tools and the risks of using them (http://technet.microsoft.com/en-us/library/dd744356%28WS.10%29.aspx) and remember that restoring the image will wipe out all the data in your HD so you need to run a backup of your data before you restore your system. And remember that these instructions should never be used to install Windows in a computer other to the one that you have paid the license for (no license no install). Please read read your Windows license agreement before following the steps to install your Windows image.

Lets get started!

Before we start with the process ne need to have the full image file (install.wim or asus.wim or image.wim) or the image already split in parts (asus.swm, asus2.swm and asus3.swm or install.swm install2.swm install3.swm). If you want to change the size to use double layer DVDs or CDs or a Blu-Ray or any other thing, you can join your image and then split it back in the size that you want. To do that you can use imagex command to:

Split an image file:

• imagex /split C:\imaging\asus.wim D:\imaging\asus.swm 4000
• imagex /split C:\imaging\install.wim D:\imaging\install.swm 4000

Join an image file:

• imagex /ref asus*.swm /check /export asus.swm 1 asus.wim
• imagex /ref install*.swm /check /export install.swm 1 install.wim

Now that we have our images with the size that we want, we are going to start.

Create a bootable DVD to start the process

To restore the system we need to create a bootable DVD with all the tools required to boot, configuration files to create partitions and scripts to restore the image.

In this process I will assume that we have installed Win AIK in the standard path (c:) and that we want to do the work in the d: drive.

1. Start Windows AIK command line as an administrator



2. Get the required files for the boot DVD (boot image with standard MS tools)
   • copype.cmd x86 d:\winpe_x86
3. Mount the image to add custom restore scripts (this is similar to mounting an ISO but here we use a folder for you to modify the files)
   • imagex.exe /mountrw d:\winpe_x86\winpe.wim 1 d:\winpe_x86\mount
   • mount winpe.wim (MS boot image) in the folder that we specify)
4. In this step we will copy the restore script and the commands to re create the disk partitions (I’ll explain this later in the next post). However, with the DVDs you can already manually restore your system once you boot with the first restoring disk (the process requires to create 2 partitions, 1 for Windows and 1 to copy the *swm files)
   • • restore.cmd: script to restore the system automatically
     • clear_partitions.txt: Cleans the Hard drive
     • create_partitions.txt: Creates the partitions before restoring the image

   copy restore.cmd d:\winpe_x86\mount\Windows\System32\
   copy clear_partitions.txt d:\winpe_x86\mount\Windows\System32\
   copy create_partitions.txt d:\winpe_x86\mount\Windows\System32\

5. Modify startup to call our restore script (This step required opening notepad as administrator. You can launch it from an Administrator command line)
   • notepad.exe d:\winpe_x86\mount\Windows\System32\System32\startnet.cmd
   • startnet.cmd is the script the is executed when booting the DVD. We need to add an extra line at the end of the file to call our restore.cmd script
   • What we have done here is to call our script to start the restoring process. This allows us to create an automated restoring process for simplicity.
6. Save the changes in the customized image (commit the changes to the mounted boot image)imagex.exe /unmount /commit d:\winpe_x86\mount
   imagex.exe /unmount d:\winpe_x86\mount
   imagex.exe /unmount /cleanupNote: For some reason, sometimes the first command sometimes doesn’t do all the work and there are files still hanging around. Most likely the command has successfully updated the image but it can’t unmount and release the files. If this happens, you need to close all the Windows Explorer windows and run the second and third commands (some times even several times) until “imagex.exe /unmount /cleanup” tells you that nothing is mounted.
7. Create the DVD folders (each folder will be one DVD)Create folders:
   d:\ASUS\DVD1\sources (this will be the bootable DVD)
   d:\ASUS\DVD2\sources
   d:\ASUS\DVD3\sourcescopy asus.swm d:\ASUS\DVD1\sources
   copy asus2.swm d:\ASUS\DVD2\sources
   copy asus3.swm d:\ASUS\DVD3\sources
8. Add extra required tools to DVD1 to make the DVD bootable and copy the program used to restore the systemxcopy /y /e d:\winpe_x86\ISO\*.* e:\ASUS\DVD1\ copy “C:\Program Files\Windows AIK\Tools\x86\imagex.exe” d:\ASUS\DVD1\
9. Copy customized boot to DVD1 (created in step 6)
   • copy d:\winpe_x86\winpe.wim d:\ASUS\DVD1\sources\boot.wim
   • Notice the change of name. The destination name must be boot.wim
10. Create the disk images (notice that the first one is bootable)oscdimg -m -n -b”d:\winpe_x86\etfsboot.com” D:\ASUS\DVD1 D:\ASUS\DVD1.iso oscdimg -m -n D:\ASUS\DVD2 D:\ASUS\DVD2.iso oscdimg -m -n D:\ASUS\DVD3 D:\ASUS\DVD3.iso
11. Burn images to DVDs (with Windows 7 right click on the ISO and choose burn)
12. Congratulations! You have created your set of restoring DVDs.

In the next post I’ll explain how to fully automate the process creating the scripts from the step 4.

The only problem is that ASUS (same as other laptop assemblers) has gone into the path of installing the operating system with a bunch of applications that are totally irrelevant to the work that I want to do (some people call it crapware or more politely pre-installed sw).

This common practice would be ok if I was able to reinstall my computer in a clean way, however ASUS doesn’t provide a clean way to install the copy of Windows 7 that I have paid for. Instead, they have created a 20GB partition in the first HD that contains the recovery files. But guess what happens if you want to install your own SSD or you enable stripped volumes in Windows?

They allow you to create a set of DVDs with a tool in a very easy way (6 DVDs said in my case). But, before creating them, I went to play with the Disk Management and changed the partitions to look the way I wanted with stripped and mirror volumes. When I went to create the recovery DVDs… the tool failed even when the RECOVERY partition was still there because the type of disk had changed from Basic to Dynamic (in the documentation they don’t explain all this).

I wrote to get technical support and after 3 days they answered with this:

Dear Valued Customer,
Thank you for contacting ASUS Customer Service.
Good morning, unfortunately, all our notebooks are preinstalled with OEM version of OS and don’t equip with the install DVD. If you want to do a clean install, I am afraid you have to purchase the installation disc from Microsoft separately.

So basically, get lost.

I answered to their email, really pissed off, saying that that didn’t help me at all and they answered back:

Dear Valued Customer,
Thank you for contacting ASUS Customer Service.
Sorry, the notebook product package will not come with the RCD(Recovery CD) and ASUS DVD 6 in 1 from 2/4, please refer to the following page:
http://support.asus.com/news/news.aspx?no=595&SLanguage=en-us
If you need a recovery DVD, please contact ASUS on 1300 278 788 from Monday to Friday between 9 am and 6 pm AEST.
As for the AI Recovery, we are aware of an issue with the AI Recovery Burner not functioning correctly and are currently investigating the matter. This issue does not affect the normal operatin of the notebook in anyway.
We apologise for any inconvenience caused as a result of this issue.

That’s even better!!! They have a tool to create recovery DVDs and it doesn’t work. I called the service and they actually were quite nice and they told me that I could go any time and they would restore the system to the original state without any problem. However, that would not help me much if I couldn’t set up the system the way I wanted.

I am EXTREMELY disappointed in ASUS and I feel that for them it is more important to make money than keeping the clients happy. I will never consider buying any more laptops from ASUS unless they change their strategy of control over the clients, even if I think that their HW is good.

To solve all these problems and to get rid of the RECOVERY (also called 20GB wasted space in my disk) I started investigating to see what these asus.swm, asus2.swm and asus3.swm files were. And after some reading I ended up installing “Windows Automated Installation Kit for Windows 7” or (Windows 7 AIK).

With that set of tools, Microsoft allows OEM installers to POLLUTE the brand new computers (of FREE users that have paid for the Windows license) with an incredible amount of useless applications and not allowing the right to decide what applications we want to have in our clean system. So you are forced to waste 2 hours in front of the computer uninstalling unwanted pollution.

Note: After all the hard work, I recommend to uninstall all the applications that you don’t want and use. Do all the work in the partitions that you need and run Windows 7 Back up tools to create an image into either an external HD, DVDs or the network. Then you can create a system repair disk and every time you need to restore Windows to a clean state you can go directly to this image backup and get everything up and running in few minutes and without all the “pre-installed” trial applications.

Anyways, to solve this issue I’ve been working in a solution to make users a bit more free and I will be posting it soon.

1. The first solution I’ve been working on is for people that:

• They still have the RECOVERY partition but it’s not bootable anymore and they can’t create a set of recovery DVDs
• They want to delete the 20GB RECOVERY partition
• They want to use Dynamic disks in Windows (stripped and mirrored)
• They want to install an SSD as a primary disk
• It uses 3 DVDs

2. I’ll be working in creating an image of Windows with the Out Of The Box experience but that doesn’t contain any pre-installed applications (or forced to have applications)

• The steps will be very similar to the first solution but you’ll get a smaller version (maybe 1 or 2 DVDs)
• I haven’t tried this but I hope it can be done.

All this is only to allow the owner of the computer that has paid for the Windows 7 License to create a more free way of installing it’s own computer or a way to create a system backup in case of system failure.

These instructions should never be used to install Windows in a computer other to the one that you have paid the license for (no license no install). Please read read your Windows license before following the steps.

It can be used as a tutorial to understand the process of deployment using Windows 7 AIK (the steps used here are taken out from Microsoft documentation and they are using the tools that MS has made freely available to users to deploy Windows in an alternative way to standard setup).

I take no responsibility of any errors in the scripts that I’ll be providing in the next post and I take no responsibility of the information that could be lost by using these steps. Please take your time to read the official Microsoft documentation about the tools and the risks of using them (http://technet.microsoft.com/en-us/library/dd744356%28WS.10%29.aspx)

Use the next post at your own risk.

Now that we have Federation SignIn and a Passive STS that lives in a Different box and all out web apps rely on that external STS… How can I sign out?

In my case I tried everything and of course, it worked in my machine. Then it got deployed and the user didn’t get signed out because the browser didn’t expire the WIF token.

I executed all this and custom code to make the cookies expire but there was one left, the one created by the STS.

FederatedAuthentication.SessionAuthenticationModule.SignOut();
FederatedAuthentication.SessionAuthenticationModule.DeleteSessionTokenCookie();
FederatedAuthentication.WSFederationAuthenticationModule.SignOut(false);
FormsAuthentication.SignOut();

Finally I found a reference to something and of course NO SAMPLES (Isn’t WIF wonderfull!!!)

The solution is using the FederatedSignOut method that redirects to the STS, this one signs you out and redirects the browser to the page that you wanted to go to let the user know that he’s out.

WSFederationAuthenticationModule authModule = FederatedAuthentication.WSFederationAuthenticationModule;
string signoutUrl = (WSFederationAuthenticationModule.GetFederationPassiveSignOutUrl(authModule.Issuer, authModule.Realm, null));
WSFederationAuthenticationModule.FederatedSignOut(new Uri(authModule.Issuer), new Uri(authModule.Realm + "LoggedOut.html"));

The second catch is… once you are in the LoggedOut.html page, press the back button in the browser

Have fun

If you have seen the PDC09 demos than you probably thought that it’s so easy to add security to an application… well yes and no. It’s easy if you only want the standard functionality out of the box, but if you need to do something different… it’s quite complicated to get everything working. However, once you understand what’s going on then it is a lot smoother and you don’t need to worry anymore about how it works, it just works.

The last tornado I had to deal with was the serialization of security tokens. You may want to know why you would want to serialize tokens if WIF does it for you adding them to cookies or WCF heathers. Well that’s like asking why you would generate plain HTML to add custom CSS when you can use ASP.Net controls that spit out heaps of formatted html with colors. In this case, my reason is that I wanted to be able to open a windows application from the web browser and keeping the credentials I had in the browser.

To do that, you need to serialize the token into a file and your browser opens the application associated to that extension. It’s like when you download an excel sheet and instead of saving the file you open it directly in Excel or the same with a PDF. But in our scenario, we send the information that WIF had put in a cookie to the windows app so that we can call some WCF services. Easy. Serialize that monster and you deserialize it in the client to create the Channel. Go for it. If you are reading this is because it wasn’t that easy, isn’t it? Then, try to deserialize it now that you managed to serialize it. Ha!!.

The Idea is that you serialise your bootstrap token into an XML string

var bootstrapToken = ((IClaimsPrincipal)Thread.CurrentPrincipal).Identities[0].BootstrapToken; 

// Serialize
var req = new SamlSecurityTokenRequirement();
var handler = new Saml11SecurityTokenHandler(req);
var sb = new StringBuilder();
using (var writer = XmlWriter.Create(sb))
{
   handler.WriteToken(writer, bootstrapToken);                   
}

string serializedToken = sb.ToString();

Serializarion is quite simple, but to deserialize the token we need to have the public key of the signing certificate because the classes that do the deserialization want to validate that moster. This sample shows how to read the certificate from a file, but the constructors allow reading from a stream (or you may want to serialize the x509 certificate together with the token in the file that you send to your win app).

// Deserialize
string path = @"c:\temp\STSPublic.cer";
// It can be deserialised from a byte[]
var cert = new X509Certificate2(path);
var token = new X509SecurityToken(cert);
var tokens = new List<SecurityToken>() {token}; 

var resolver = SecurityTokenResolver.CreateDefaultSecurityTokenResolver(tokens.AsReadOnly(), false);
var conf = new SecurityTokenHandlerConfiguration();
conf.IssuerTokenResolver = resolver;
handler.Configuration = conf; 

using (var reader = XmlReader.Create(new StringReader(sb.ToString())))
{
   bootstrapToken2 = handler.ReadToken(reader);
}

Instead of reading the certificate from a file you can read the certificate from the list of installed certificated from the local machine you can also use the following code.

var token = new X509SecurityToken(CertificateUtil.GetCertificate(StoreName.My, StoreLocation.LocalMachine, "CN=STSCertificateName"));

Now it’s up to you to do whatever you want with the token in the windows app.

I hope this helps.

R.

The settings were disabled and when I tried to connect to a server BOOOOOM!

This is the kind of errors that I love.

After uninstalling and installing and reinstalling and again installing VS2008 and Team Client and… nothing worked.

Finally, after searching everywhere, I found in the msdn forums someone that had a similar problem. What a relieve, I wasn’t the only one (it seems a smaller problem when you aren’t the only one with it).

As a solution, K. Renno indicated to run a command to skip loading some packages:

devenv.exe /resetskippkgs

Or to generate a report:
devenv.exe /resetskippkgs  /log C:\devenv-log.txt

After that, Visual Studio could start normally without using the /resetskippkgs setting.

Good Luck!

R.

You can access the previous ones here:

• Part 1 – Basic Control implementaion
• Part 2 – Add items (Server side) and some client side functionality
• Part 3 – Client side events and JSON serialisation
• Part 4 – Server events, Postbacks (IPostBackEventHandler) and Callbacks (ICallbackEventHandler)
• Part 5 – Control State
• Part 6 – Working inside the Update Panel

When you put a control inside an UpdatePannel (with UpdateMode = “Conditional” ) what it happens is that the de AJAX Framework will call the implementation of the methods in the interface Sys.IDisposable to release the resources before destroying everything inside it using the dispose() method. And once the result is returned from the server, the control gets constructed and initialised again with the initialize() method.

It’s important to do that to avoid side effects and help the system with the garbage collection and avoid memory leaks.

ShoppingCart.js

// As the control implements Sys.IDisposable, the MS Ajax Framework requires of this method.
$ShoppingCart.prototype.initialize = function()
{
	$ShoppingCart.callBaseMethod(this, "initialize");
	this._addHandlers();
}
// As the control implements Sys.IDisposable, the MS Ajax Framework requires of this method.
// This method will be use release used resources (specially required to work with Update Panels)
$ShoppingCart.prototype.dispose = function()
{
	$ShoppingCart.callBaseMethod(this, 'dispose');
	this._clearHandlers();
}
$ShoppingCart.prototype._addHandlers = function()
{
	$addHandlers(this._cartImage, {
		dblclick: Function.createDelegate(this, this._cartDoubleClick)
	});
	$addHandlers(this._infoImage, {
		click: Function.createDelegate(this, this._infoImageClick)
	});
	$addHandlers(this._closeItemsImage, {
		click: Function.createDelegate(this, this._closeItemsImageClick)
	});
}
$ShoppingCart.prototype._clearHandlers = function()
{
	// remove event handlers to avoid memory leaks
	$clearHandlers(this._cartImage);
	$clearHandlers(this._infoImage);
	$clearHandlers(this._closeItemsImage);
}

Once these methods are correctly called, we can put our control inside the UpdatePanel (UpdateMode=”Conditional”). But before doing that, let’s check what’s going behind the scenes with the full postback.

To do that enable the Web Development Helper bar (it’s included in IE8 and you can download it for IE7).

Then enable logging and click on the Add item button.

Well, these are the calls to the server and the size of the downloaded elements (you can double click in each of them to see what’s what).

Now let’s put the control in the UpdatePanel, restart the page and enable logging one more time.

ShoppingCart.aspx

It seems that nothing happened because only the shopping cart control was updated. Check how the amount of data received has been reduces dramatically, 3 connections instead of 7 and the page connection reduced from 10Kb to 6Kb. If we open the received data we can see how the creation of the control was sent from the server along with the html representation as I had explained before.

If you have any problems with JS running inside Update Panels and Postbacks, this is the tool you can use to check what was sent and returned.

Well, I hope that you learnt few things about AJAX Server controls and the MS AJAX Framework. A good way to keep learning about it is downloading the source code for the AjaxControlToolkit and have a look at the samples and controls, believe me, there’s plenty there.

You can download the code here.
Important: I couldn’t upload the file as it was a zip file, so I added the extension jpg. After saving the file, remove the extension and unzip it normally.

To maintain the Items we have several choices:

1. The basic implementation is to keep the list in the view state (that’s the implementation in the samples). This will work with no issues but it’s not very configurable

		List items
		{
			get { return GetPropertyValue("items", (List)null); }
			set { SetPropertyValue("items", value); }
		}

2. A bit more sofisticated solution, and the way GridView works, would be taking into consideration the EnableViewState property and depending on the value, then saving it in the View State or in a member

		List _items = new List();
		List items
		{
			get
			{
				if (EnableViewState)
					return GetPropertyValue("items", (List)null);
				else
					return _items;
			}
			set
			{
				if( value == null)
					value = new List();

				if (EnableViewState)
					SetPropertyValue("items", value);
				else
					_items = value;
			}
		}

If we run the example now, we can see how all the items are there after the postback and the new ones are added to the list, just as expected. Just remember that the more you add to the ViewState, de bigger the page.

You can download the code here.
Important: I couldn’t upload the file as it was a zip file, so I added the extension jpg. After saving the file, remove the extension and unzip it normally.

To achieve this, there are 2 interfaces that have been defined:

• System.Web.UI.IPostBackEventHandler: used to implement postbacks
• System.Web.UI.ICallbackEventHandler: used to implement callbacks

In the sample I’ll be implementing both of them; however the one that we are going to find more useful will be the one used for the postbacks, as it involves a change of state in the server control. Callbacks can be useful if we want to run something in the server and get a value as response but doesn’t require changes in the server side of control.

Before implementing the interfaces we need to define the events that we want to implement in the server side. To do that I have defined the ServerEvent enum with the 2 events that I want to capture in the JS and run in the server, DoubleClick and ItemAdded (I have also created 2 delegates for the events to show how to fully customise everything; ClickEventHandler and ItemAddedEventHandler). And then 2 methods to raise the events, OnDoubleClick and OnItemAdded.

So far, so good, but the client side needs to know which events have been hooked in the server side so that we only call the server side if it’s required. RunAtServerEvents checks which events have to be raised and sends to the client the list of events (a string with events separated by “;” and implemented as a client side property). Then we have the property AutoPostBack so we can decide if we want to execute them as postbacks or callbacks (for simplicity I’ll be assuming all as postbacks or all as callbacks but we could customise for each of them in the JS code). And finally we need the property CallbackID, required to implement the callbacks and postbacks (initialised to UniqueID).

Something interesting to notice is that on OnPreRender there is a piece of code that I found somewhere in the code of one of the AjaxControlToolkit controls, it seems that we need to add a call to Page.ClientScript.GetCallbackEventReference(this, “”, “”, “”) to make the callbacks work (required code to register callbacks in the client).

ShoppingCart.cs

	/// 
	/// Click delegate definition
	/// 
	/// 
	public delegate void ClickEventHandler(object sender);

	/// 
	/// Item added delegate
	/// 
	/// 
	/// new item
	public delegate void ItemAddedEventHandler(object sender, ShoppingCartItem addedItem);

	public class ShoppingCart : ScriptControlBase
	{

		/// 
		/// Server events raised from the client
		/// 
		enum ServerEvent
		{
			DoubleClick,
			ItemAdded
		}

		//...

		protected override void OnPreRender(EventArgs e)
		{
			if (!this.DesignMode)
			{
				if (ScriptManager.GetCurrent(Page) == null)
				{
					throw new HttpException("A ScriptManager control must exist on the current page.");
				}
				InitialiseControls();

				CreateHTMLItems();

				CallbackID = UniqueID; // needed for the callbacks and postbacks

				// Create JavaScript function for ClientCallBack WebForm_DoCallBack
				// Not sure why we need it, but the callback doesn't get registered on the client side properly without it.
				Page.ClientScript.GetCallbackEventReference(this, "", "", "");

			}

			base.OnPreRender(e);
		}

		#region Server Events
		/// 
		/// If we want to execute server events with a postback.
		/// True: A full postback happens and the page will be refreshed.
		/// Use UpdatePanel control to refresh certain areas.
		/// False: The events will run on the server with no postback (it'll use a Callback).
		/// If any data is updated a manual UI refresh needs to be forced (full page or UpdatePanel).
		/// 
		[Description("If we want to execute server events with a postback.")]
		[ExtenderControlProperty]
		public bool AutoPostBack
		{
			[DebuggerStepThrough]
			get { return GetPropertyValue("AutoPostback", true); }
			[DebuggerStepThrough]
			set { SetPropertyValue("AutoPostback", value); }
		}

		/// 
		/// Control ID to be used when doing callbacks from the client
		/// 
		[ExtenderControlProperty]
		//[ClientPropertyName("CallbackID")]
		[Browsable(false)]
		public string CallbackID
		{
			[DebuggerStepThrough]
			get { return GetPropertyValue("CallbackID", UniqueID); }
			[DebuggerStepThrough]
			set { SetPropertyValue("CallbackID", value); }
		}

		/// 
		/// Events that will be run at server
		/// 
		[Browsable(false)]
		[ExtenderControlProperty]
		[ClientPropertyName("runAtServerEvents")]
		public string RunAtServerEvents
		{
			get
			{
				string runAtServerEvents = "";

				if (DoubleClick != null) runAtServerEvents += "DoubleClick;";
				if (ItemAdded != null) runAtServerEvents += "ItemAdded;";

				if (runAtServerEvents.Length > 0)
					return runAtServerEvents.Substring(0, runAtServerEvents.Length - 1);
				else
					return "";
			}
			set { }
		}

		/// 
		/// Event raised when the a cell is double clicked
		/// 
		[Description("Event raised when the a cell is double clicked.")]
		public event ClickEventHandler DoubleClick;

		/// 
		/// Raise DoubleClick event
		/// 
		/// 
		protected virtual void OnDoubleClick()
		{
			if (DoubleClick != null)
			{
				DoubleClick(this);
			}
		}

		/// 
		/// Event raised when the a cell is double clicked
		/// 
		[Description("Event raised when the a cell is double clicked.")]
		public event ItemAddedEventHandler ItemAdded;

		/// 
		/// Raise DoubleClick event
		/// 
		/// 
		protected virtual void OnItemAdded(ShoppingCartItem item)
		{
			if (ItemAdded != null)
			{
				ItemAdded(this, item);
			}
		}
		#endregion
	}

The next step is the implementation of the interfaces code that will be called by the AJAX framework, IPostBackEventHandler and ICallbackEventHandler. To keep it simple I’ll implement the same code in both.

The method that does the work is ExecuteServerEvent, in where the parameter coming from the client will define the event name and the parameters (I’ve kept it simple and I’ve used “eventname;jsonParameters”). Double click doesn’t receive any parameters, but ItemAdded receives as a parameter the new item that has been added to the shopping cart. From there, all is standard C#.

ShoppingCart.cs

	public class ShoppingCart : ScriptControlBase, IPostBackEventHandler, ICallbackEventHandler
	{

		//...
		#region Server Events

		//...

		/// 
		/// Executes the server event
		/// 
		/// 
		/// Event Parameters created in the client that follows this structure.
		/// EventName;JSON object serialised
		/// i.e:
		///		ItemAdded;JSON serialised
		/// 
		/// 
		private string ExecuteServerEvent(string eventFromClient)
		{
			// Get the event name
			int separator = eventFromClient.IndexOf(";");
			string serverEvent = eventFromClient.Substring(0, separator);
			ServerEvent e = (ServerEvent)Enum.Parse(typeof(ServerEvent), serverEvent);

			// Get the event args (JSON serialised string)
			string eventArgs = eventFromClient.Substring(separator + 1);

			switch (e)
			{
				case ServerEvent.DoubleClick:
					OnDoubleClick();
					break;
				case ServerEvent.ItemAdded:
					ShoppingCartItem addedItem = new JavaScriptSerializer().Deserialize(eventArgs);
					AddItem(addedItem);
					break;
				default:
					throw new Exception("Wrong event!");
					break;
			}
			return "";
		}

		/// 
		/// Adds an item
		/// 
		/// 
		private void AddItem(ShoppingCartItem addedItem)
		{
			Items.Add(addedItem);

			OnItemAdded(addedItem);
		}
		#endregion 

		#region IPostBackEventHandler Members

		/// 
		/// Raise postback event in the server.
		/// 
		/// argument from JScript
		public void RaisePostBackEvent(string eventArgument)
		{
			ExecuteServerEvent(eventArgument);
		}
		#endregion

		#region ICallbackEventHandler Members
		/// 
		/// Return value for the callback call
		/// 
		string callbackResult = "";

		/// 
		/// Returns the value generated by the event (if any).
		/// 
		/// 
		string ICallbackEventHandler.GetCallbackResult()
		{
			return callbackResult;
		}

		/// 
		/// Raises the server event in the server.
		/// 
		/// argument from JScript
		void ICallbackEventHandler.RaiseCallbackEvent(string eventArgument)
		{
			callbackResult = ExecuteServerEvent(eventArgument);
		}
		#endregion
	}

In the client side we need to add some code to raise the events (and implement JS properties). The method that will call the server is _raiseServerEvent.

1. It checks the the event that we want to fire has been hooked up in the server side
2. It creates the parameters with the event name to call and the parameters required for that event
3. Depending if we want to execute a postback or a callback it calls the server in a different way.
4. As Callbacks run asynchronously, we need to provide the methods to execute in case it was successful and if there was an error.

ShoppingCart.js

// -------------------------------------- Client side Properties --------------------------------------
$ShoppingCart.prototype.get_items = function() { return this._items; }
$ShoppingCart.prototype.set_items = function(value)
{
	this._items = Sys.Serialization.JavaScriptSerializer.deserialize(value);
}

$ShoppingCart.prototype.get_CallbackID = function() { return this._CallbackID; }
$ShoppingCart.prototype.set_CallbackID = function(value) { this._CallbackID = value; }

$ShoppingCart.prototype.get_AutoPostBack = function() { return this._AutoPostBack; }
$ShoppingCart.prototype.set_AutoPostBack = function(value) { this._AutoPostBack = value; }

// -------------------------------------- Server Side Events --------------------------------------
$ShoppingCart.prototype.get_runAtServerEvents = function()
{
	return this._runAtServerEvents;
}

$ShoppingCart.prototype.set_runAtServerEvents = function(value)
{
	this._runAtServerEvents = value.split(';');
}

$ShoppingCart.prototype._raiseServerEvent = function(eventName, eventArgs)
{
	if (!Array.contains(this._runAtServerEvents, eventName))	return;

	var eventArgsSerialised = Sys.Serialization.JavaScriptSerializer.serialize(eventArgs);
	var args = String.format("{0};{1}", eventName, eventArgsSerialised);
	var id = this._CallbackID;

	if (this._AutoPostBack)
	{// calls IPostBackEventHandler.RaisePostBackEvent in the server control
		__doPostBack(id, args);
	}
	else
	{
		// calls ICallbackEventHandler.RaiseCallbackEvent
		// the return value from ICallbackEventHandler.GetCallbackResult() is sent
		// to the callback handler this._receiveServerData
		WebForm_DoCallback(id, args, this._receiveServerData, this, this._onCallbackError, true)
	}
}

// Handler for successful return from callback
$ShoppingCart.prototype._receiveServerData = function(arg, context)
{
	// context is the instance of the class (this)

	// update the UI or Raise an event to inform that we finished the callback
	alert("Back from the callback!");
	//context.updateUI();
	//context.raiseEndClientCallback(arg);
}

// Error handler for the callback
$ShoppingCart.prototype._onCallbackError = function(message, context)
{
	alert(String.format(AjaxControlToolkit.Resources.Rating_CallbackError, message));
}

// -------------------------------------- Control methods --------------------------------------
$ShoppingCart.prototype.addItem = function(itemText, itemDescription, itemQuantity, itemTotalPrice)
{
	var newItem = new $ShoppingCartItem(itemText, itemDescription, itemQuantity, itemTotalPrice);

	this._raiseServerEvent("ItemAdded", newItem);
}

// Classes to handle event arguments and data transfer to the server ---------------------------------
var $ShoppingCartItem = AjaxControl.ShoppingCartItem = function(itemText, itemDescription, itemQuantity, itemTotalPrice)
{
	this.Text = itemText;
	this.Description = itemDescription;
	this.Quantity = itemQuantity;
	this.TotalPrice = itemTotalPrice;
}

To test it, let’s add some code to our web page. I have added 4 text boxes to introduce the values and and a button that will add the new item. Additionally I added a GridView control that is Databinded with the items in the shopping cart (server event of ItemAdded).

ShoppingCart.aspx

    

        function addNewItem() 
        {
            $find("Cart1").addItem(
                    $get("newItemText").value,
                    $get("newItemDescription").value,
                    $get("newItemQuantity").value,
                    $get("newItemTotalPrice").value
                    );
        
        }
    



    
    
    
    <div>
        <table>
            <tr>
                <td>Text</td><td></td>
            </tr>
            <tr>
                <td>Description</td><td></td>
            </tr>
            <tr>
                <td>Quantity</td><td></td>
            </tr>
            <tr>
                <td>TotalPrice</td><td></td>
            </tr>
            <tr>
                <td colspan="2" align="right"></td>
            </tr>
         </table>
    </div>
    <div>
        

        
    </div>
    

ShoppingCart.aspx.cs

	public partial class ShoppingCart : System.Web.UI.Page
	{
		protected void Page_Load(object sender, EventArgs e)
		{
			if(! IsPostBack)
			{
				var items = new List
				{
					//...
				};

				Cart1.Items = items;

				GridView1.DataSource = Cart1.Items;
				GridView1.DataBind();
			}
		}

		protected void Cart1_ItemAdded(object sender, ShoppingCartItem addedItem)
		{
			GridView1.DataSource = Cart1.Items;
			GridView1.DataBind();
		}
	}

As you will notice the old items are lost after the postback and only the latest item is rendered. This is the expected behaviour (Gridview implementation behaves the same). Next post I’ll show how to make the control remember the previous items.

Well, that’s all. I know that there’s a lot to digest here but believe me, if you had to figure it out by yourself it would take a lot longer.

You can download the code here.
Important: I couldn’t upload the file as it was a zip file, so I added the extension jpg. After saving the file, remove the extension and unzip it normally.