Archive

Archive for the ‘AJAX’ Category

AJAX UpdatePanelAnimationExtender conditional enable actions

6 March, 2008 Leave a comment

Recently I have been working with AJAX to create some intelligent controls.

I have created a Format selector which looks something like the following…

Figure 1. Format Selector 

The purpose is to allow users to select from a predefined list of formats.

As it is done in Ajax I wanted to use the UpdateProgress control to show a nice “Updating” animated gif. I implemented that but it was a pretty poor solution as users could still interact with the controls whilst it was updating.

Enter the UpdatePanelAnimationExtender. I Played around with this and got the system doing a fade animation just following the example in the samples. This worked fine. But the user could still interact with the controls so I put in the following code to disable the controls onupating and enable the controls onupdated.

<Parallel duration="0">
    <EnableAction AnimationTarget="btnOk" Enabled="false" />
    <EnableAction AnimationTarget="lstFormatTypes" Enabled="false" />
    <EnableAction AnimationTarget="lstFormatCodes" Enabled="false" />
    <EnableAction AnimationTarget="txtDecimals" Enabled="false" />
    <EnableAction AnimationTarget="imgUp" Enabled="false" />
    <EnableAction AnimationTarget="imgDown" Enabled="false" />
</Parallel>

This is it in action after using the format type drop down:

Format Selection in action 

This seemed to work find until I started fiddling with the visibility of the controls in the postback methods being fired on autopostback of the drop downs. Example, if someone chose a format type of “Date” there is no need for the decimals text box, so I was setting the Panel that contained that control (and headings) to visible = false.

The outcome of this was when switching to date the animation would work fine, but when switching back to currency it would appear to hang with the animation remaining opaque but some controls enabled. I assume this was due to the fact that txtDecimal, imgUp and imgDown were no longer visible and therefore not accessible via javascript.

The fix was to change the EnableAction to be conditional like so:

<Parallel duration="0">
    <EnableAction AnimationTarget="btnOk" Enabled="false" />
    <EnableAction AnimationTarget="lstFormatTypes" Enabled="false" />
    <Condition ConditionScript="$get('lstFormatCodes') != null">
        <EnableAction AnimationTarget="lstFormatCodes" Enabled="false" />
    </Condition>
    <Condition ConditionScript="$get('txtDecimals') != null">
        <EnableAction AnimationTarget="txtDecimals" Enabled="false" />
    </Condition>
    <Condition ConditionScript="$get('imgUp') != null">
        <EnableAction AnimationTarget="imgUp" Enabled="false" />
    </Condition>
    <Condition ConditionScript="$get('imgDown') != null">
        <EnableAction AnimationTarget="imgDown" Enabled="false" />
    </Condition>
</Parallel>

With the conditional settings I am saying ONLY if the control exists  set the enabled status.

Problem solved.

Cheers

Post Script

The other easier way to get around this would be to put a panel around all the controls, and just enable/disable the panel. This removes the issue and is alot less code 🙂

Advertisements
Categories: AJAX Tags:

AJAX PopupControlExtender and Dynamic Controls

28 February, 2008 3 comments

I was attempting to use the PopupControl Extender the other day, to create myself a web user control for colour selection.

Here is what I ended up creating..

Figure 1

The problem I had was that the colour palette panel is being created dynamically. In this example it is a 25×16 matrix made up of 375 dynamically created link buttons with their backcolour set to the colour from the palette. (Note: Used a link button due to postback.Asynch javascript errors that occur with PopupControl Extender in a modal dialog box as documented elsewhere on the web).

When a user clicked on one of the link buttons it performed a postback, problem was it was doing a full postback and closing the popup window.

Solution: When creating your controls dynamically to exist in your panel to be displayed by the popup extender you need to register them with the UpdatePanel triggers collection like so:

LinkButton btnColour = new LinkButton();
... setup you link button
btnColour.ID = colurHexCode; // colurHexCode string variable containing the current colour I am setting as the backgroud
AsyncPostBackTrigger trigger = new AsyncPostBackTrigger();
trigger.ControlID = btnColour.ID;
UpdatePanel1.Triggers.Add(trigger);

This forces the dynamic control to be included in the update panel and when clicked only performs a partial update panel postback.

Sweet

Categories: AJAX, ASP .Net

Bootstrap Manifest Generator – How To Setup Custom Pre-Requisites

27 February, 2008 12 comments

Edit March 2011
I have just done a newer version of this page, with pictures, you may want to check it out here
BootStrap Manifest Generator (2008) – How To Guide v2

Original Post Feb 2008 Continued…

Recently I was attempting to create a deployment package that has customised pre-requisites i.e I wanted my installer to detect if AJAX Extensions 1.0 was installed and if not ask the user to install it.

I found this link talking about how to do it..

http://www.codeplex.com/MSAjax10SetupPrereq

Which lead me to download the Bootstapper Manifest generator from http://code.msdn.microsoft.com/bmg

I was a bit lost with what to do so hopefully this will save you the pain I went though.

(Note: the BMG is really buggy. Most of the system checks don’t work, and once you add a file system check and save your project you can no longer open your bootstrap project. But given it is free it’s better than attempting to write the XML by hand)

As an example to create a pre-requisite for AJAX follow these steps:
  1. Run the BMG tool.
  2. Create a new Package Manifest. Give it a name, AJAX
  3. Add a file, choose the AJAX Extension installer .msi.
  4. Give it a name, this will be the name that appears in your installer so make it something nice like “Microsoft ASP .Net 2.0 AJAX Extensions 1.0”
  5. Build it.
Now if it builds have a look at the location that it is written to, it is a visual studio directory, so I thought to myself it must integrate with VS2005.
So open your Setup Project in visual studio, (in my case, a Web Setup Project). Right Click — Properties on the solution. There in the bottom right is the pre-requisite button.
Click on it and you should now see AJAX as an option.
Traps for young players
1. Copy paste
Inside the BGM copy and paste does not appear to work. The trick, is right click in the field and choose paste.
2. Download from web Option
If you want to download from the web enter the url for the .exe. I setup my own publically available spot to allow downloading these pre-requesites (rather than relying on the microsoft download site), as they migth change things. So I have a known static location to go download the AJAX Extensions msi.
3. System Checks
You should include a check to see whether AJAX is already installed.
In your manifest click on the file you added, and go to the “System Checks” tab. I found that most of the system checks did not work properly.
I found the one that did work was a file check, so I added a file check for System.Web.Extensions.dll in the default location
  • Add a File check. Set the file name to System.Web.Extensions.dll, turn off the search, and enter the default path to the ASP Net folder.
  • Switch to the “Install Conditions” tab and add a line that says:
    • Type – By Pass If
    • Property – AJAX (or the name you gave your system check)
    • Comparison  – Exists

Cheers and Goodluck

Categories: AJAX, Code Tags: ,