The name for this extender, like most of the names I come up with, is a bit misleading but let me explain.  The original idea for this extender was to be a nice fish eye, roll over, sort of extender for a list of images. However I'm lazy and didn't really want to add in my own animation. So instead I added in animation from the AJAX Toolkit. I talked about doing this briefly in a previous post, however I didn't give a detailed code example. So consider this your code example...

FishEyeExtender.zip (1.77 kb)

That zip file should contain the C# code as well as the js code. But basically all you need to do is have a set of images within a div (or span, etc). and point the TargetControlID to the div holding them. It then takes all of the images in the div and attachs the animations you feed it for onmouseover and onmouseout to them. So if you have a resize animation set up for onmouseover and onmouseout, it creates a nice fish eye animation. However, you can add any sort of animation you want. So it's more like an animation list extender, for images... And only deals with mouse over and mouse out... But I'm sure you'll be able to find a use for it. Anyway, download the code, leave feedback, and happy coding.

   

In ASP.Net, one of the great (and terrible) things that we have at our disposal is the viewstate. The viewstate ensures that we can hold onto the state of an item even between post backs without having to do anything. However if you've ever had to create a wizard to go through 10 or so states, had drop down boxes with 1000+ items, etc. you know that it can get extremely large, extremely fast. This of course translates to slower download speeds and unhappy people using your site (or more likely not using your site). So what can we do to help the situation?

Well in previous articles, I suggested various ways to compress the data that is being sent. However sometimes it doesn't matter how much compression you do, you're still going to have issues. So how do we fix this? Simple, don't send the information to the client. For instance the viewstate can instead be saved directly on the server in a file that we load at the appropriate time. If you look back at the ZippedPage code, you'll notice that we call LoadPageStateFromPersistenceMedium and SavePageStateFromPersistenceMedium. In them we end up using a hidden field called __ZippedState to store the information and send it to the end user. However we could instead use a streamwriter/streamreader and save the information to a file on the server instead. The only thing that we have to take care of is the file name, I mean how do we make sure that we don't write over the information when the next user queries a page?

Simple, Session ID...

And that's all there is to it. FileName will now point to a file that is unique to the session and URL. From there you just serialize the viewstate to the file and voilà, you're done. Pretty simple and it has the ability to potentially save you tons on bandwidth. Anyway, try it out, leave feedback, and happy coding.

   

If you're like me, you've probably had to go about creating your own AJAX extenders. I mean the AJAX Toolkit is good, but it lacks certain items that I'd like to be able to just drop into a project without worrying about it that much. So I've had to create a few items myself and most likely you have as well. However, how do you go about adding animations to your own creations? The Toolkit has a rather nice animation setup that we'd like to take advantage of. Can it be done? Is it easy? Both questions can be answered with a yes. There's really only a couple of changes that need to be made to take advantage of the animations. First, let's look at the declaration:

is the normal class declaration. However we need to change it to look like this:

We also need to go and add this attribute to the class:

And now we're ready to use some animations... Well I guess we still need to load them... In order to create our animations, we have to define a property for them so that we can easily load them. For instance:

Note that we're calling GetAnimation and SetAnimation and that the Animation itself needs to be passed by reference. Other than that, it's not that different from any other property. We also need to setup the animation within our javascript file, however that's done like any other property. In the example above, we'd just set up a get_OnMouseOutJson and set_OnMouseOutJson function to save and get the animation.

We still need to do two more things

1. Build the animation
2. Play the animation (and potentially stop the animation)

Building the animation is actually rather simple. Using the example animation above:

Thankfully all we need to do is call that one line. It builds the animation, associates it with whatever element we enter as the second option, and stores it in our holder variable. That way later on, all we need to do is call:

To start the animation. Also, if you want to stop the animation, simply call .stop(). Now when actually using the object, all we need to do is add something like this:

And we have an item that resizes to 100x100 in .5 seconds. Not that bad, huh? Anyway, definitely check out the animation reference when building up your animations. Other than that, look at the code, leave feedback, and as always happy coding.