Matt Berseth

This is a pretty important question when in comes to DOM programming.  Start manipulating the DOM to early and bad things happen.  Do it too late and the users may see that annoying flicker.   So what's the best technique for figuring this out?  Well, I was curious about this myself so I took a look at how some of the popular Ajax libraries (jQuery, MooTools, YUI, Prototype and ASP.NET AJAX) are doing this.  Here is what I found out ...   Update: 08/11/2008: I came across an article that sheds more light on ASP.NET AJAX's init technique.  There is a lot of good content in the comments as well (look for the ones left by Dave Reed).  Here are a few snippets of what Dave has to say ... His comments with respect to the location of where the ScriptManager injects the call to Application.initialize ... ScriptManager does not put...

So, guess who just got the memo ...   Dear Matt, Uploading large files with ASP.NET is difficult.   Sincerely, Every ASP.NET Developer and their Mother   After sufficiently embarrassing myself with my earlier post, I decided it was high time I spend a little bit more time understanding this problem.  And lo and behold Jon Galloway has already written up a nice survey on the topic.  So to bone up on the issues I followed all of the links Jon provided as well the ones provided by all of the one-off emails I received in response to my previous post (thanks everyone). Of all the upload components I checked-out (SWFUpload, FileUp, Flajaxian FileUploader, RadUpload, NeatUpload, ASP.Net File Upload/Download Module, etc...) I was the most interested in the last 2 (NeatUpload and ASP.Net File Upload/Download Module).  They are both free, have my kind of licensing and come with the full...

I had a number of people email me asking how the ProgressBar Toolkit control I blogged about last month could be used to provide progress for file uploads.  So I thought I would spend some time and see how this could be done.  Thankfully, there are a ton of resources available on the internet that discuss this in pretty good detail.  But I didn't see any good examples of how to include the real-time count of the number of bytes that have been transferred.  So I thought I would try to tackle that problem while building my example.   Update 7/27/2008: This post is bogus - I have over simplified the problem.  My goal was to display the number of bytes that have been transferred to the web server, not the number that have been saved to disk.  As atashbahar pointed out, this will require a little bit more work that...

Dave Ward had another great post this past week.  He took the time to not only read the ASP.NET Ajax Road Map document, but he also wrote up a post outlining what he thought about it.  So I thought I would join Dave's efforts and throw in my 2 cents as well.  Of course, most of this post will not make too much sense if you aren't familiar with the Road Map document.  So if that's you, here is what I recommend reading (in order) ... ASP.NET Ajax Road Map The feedback forum Dave's Post: The Future of ASP.NET AJAX (make sure you include the comments) Bertrand Le Roy's post (really only the comments are important)   My Comments ... My goal is to be direct without being rude, lets see if I can do it.    $query Any plans on providing an extensible selector engine?  If you have to...

The controls found in the AjaxControlToolkit fit perfectly into the ASP.NET programming model (as to be expected).  You can configure the controls properties through the markup which in turn affects how the control's display and behavior on the client.  Many of the control's properties support databinding so using the controls within a databound control like a ListView or a GridView is no big deal.  Take for example the ProgressBar Toolkit control I blogged about (here and here).  One of the places that I use this control is in a GridView's TemplateField.  Instead of displaying the percentage as a text value, I use the ProgressBar to display the percentage in a more visual manner.  It looks something like this ... Live Demo | Download With the Toolkit, setting this up is really simple.  Just use a databinding expression to set the Value property of the ProgressBar control to the value of...

So I figure what better way to learn more about jQuery than to dig right in and create a plugin or two?  At first I thought this sounded pretty intimidating, but after browsing through some of the existing jQuery plugins I figured it might be easy enough to try and 'rearrange' one of the Toolkit controls that I created.  So that is what I did with my GlowButtonExtender control I created a few months back (and I plan on doing it with the ProgressBar one as well very soon).  I kind of liked this because I thought creating the same UI widget using both the Toolkit and jQuery might give a little more insight into what the relative advantages are between the two frameworks. In case you didn't see my original post on creating the GlowButtonExtender control, here is how it works:  When you mouse over the button, it glows...

And so I continue on messing around with jQuery and looking into ways I can use it in my WebForms applications.  Something I sheepishly admitted to in my last post was that I don't want to use 3 client side libraries {ASP.NET AJAX, AjaxControlToolkit, jQuery}, yet I never really took the time to see what the size of the core jQuery library is.  And for that matter I haven't really looked at what scripts some of my favorite AjaxControlToolkit controls are pulling down either.  I also assumed there is a bunch of overlap between jQuery and ASP.NET AJAX, but I haven't looked into that either.  So I thought I would check some of this out and along the way rebuild my Master-Detail with the GridView, DetailView and ModalPopup Controls and replace the ModalPopup with jQuery's ThickBox.  I found it pretty interesting - read on to see how it went.Live Demo...

So clearly I am obsessing about getting jQuery features into my WebForm applications.  I would seriously love to see the following added ... A more powerful selector.  Finding elements by ID (ala $get) in an ASP.NET page is usually pretty awkward because the ID values isn't known until runtime.  This alone causes many people problems.  Unless I am mistaken the next version of ASP.NET AJAX will include a selector to find items by class name as well, but I have not heard anything for supporting more advanced stuff like ... 1: // good ... 2: var alternatingRows = $select('TABLE TR.alt'); 3:  4: // better ... 5: var alternatingRows = $select('TABLE TR:odd'); 6:  7: // best! 8: var alternatingRows = $select('TABLE TR:nth-child(odd)');   A more fluent programming model.  jQuery seriously embraces the 'find some elements and do something with them' mantra.  And they make it really simple to do - if...

If you have been following along with me over the past few days you have seen that I am looking into ways to incorporate some of the goodness of jQuery into ASP.NET AJAX.  Of course the obvious question is why don't I just switch over to jQuery completely?  Well ... The team I work on is not switching from WebForms to MVC any time soon. And I am fine with that - we have a bunch of good dev's all with plenty of years of WebForms experience so we understand all of the quirks and can get past any of the weirdness that sometimes pops up. But I don't really want to use 3 ajax libraries (jQuery, ASP.NET AJAX and the Toolkit). But I like how easy it is to author and distribute jQuery plugins and I wish there was a similar pattern for ASP.NET AJAX. I posted that bit...

I couldn't help but continue exploring the ASP.NET AJAX JavaScript component topic I wrote about yesterday.  So this afternoon I picked one of the simplest AjaxControlToolkit extender controls, the TextBoxWatermarkExtender, and rewrote it using the plugin approach I wrote about yesterday.  Again, I am very happy with how it turned out.  Read on for the details and don't forget to check out the live demo and download links as well. Live Demo | Download Step 1: Find an existing jQuery watermark plugin in that does what I want So I googled a bit and ended up following a link here.  This looked like exactly what I wanted so I downloaded the JavaScript and took a look at it.  And I was very happy to see that it was incredibly simple - only ~20 lines of code.  The script uses some selectors to identify the textbox elements on the page.  Once...

So I have been working with ASP.NET AJAX and the Toolkit for about a year and a half total - give or take a few months.  Over this period I have played around with building a handful of AJAX controls ... ProgressBar YUI Style Glow Buttons Scrolling Ticker Trace Console Anti-Aliased Rounded Corners GridView Hover Extensions ... and I am generally happy with how each one of these turned out.  However I have learned over time that a new control extender or script control is not always the right fit for the job. Take the problem Mustafa was solving the other day ... I have recently figured out that if there is a scrollbar’ed Panel control inside an UpdatePanel, it looses its scrollbar position after any type of partial postback within that UpdatePanel. There can be a GridView, a DIV container or another similar control instead of this Panel. Mustafa...

I am still playing around with the ProgressBar control I blogged about a few weeks ago.  I recently updated it to include a handful of few new features and two new skins -below is a quick run down of what has changed.  I am pretty happy with how the control works in IE and Opera, but the Continuous mode animation is a little choppy in FF - I still need to get that figured out. Live Demo (IE6, IE7, FF, Opera) | Download   New Skins Like I mentioned in my earlier post - I wanted to make sure I could easily apply new skins to the progress control without rewriting the thing.  And I am pretty happy with how this has turned out so far.  I had 8 total skins in the original post and I have just created 2 more.  The first one is very similar to Vista's...

The second entry in my BugBash series ... The Bug I recently wrote a post discussing how to implement a master-detail editing scenario using ASP.NET's GridView and DetailsView along with the AjaxControlToolkit's ModalPopup control.  My example was pretty standard - each data row in the GridView has an Edit button that when clicked displays the selected row within a DetailsView.  My DetailsView uses RequiredFieldValidators for each of the input fields to make sure the user has provided the required information.  My sample seemed to work great - I certainly had no issues.  But, as Konstantin G posted in a comment - there is a bug hiding out in my example.  Here was what Konstantin G had to say:  Hi Matt, Great example! Everything works fine, but when you leave blank required field, and hit Cancel button, you can't display modal popup again. Any ideas how to solve this problem? Thanks....

If you use AJAX in your web app's, you no doubt have made use of some sort of progress/status indicator that lets the user know that some operation is currently executing.  In the app I am currently working on we use an animated gif for this.  It works great, but sometimes you might find it nice to have more control over the indicator - i.e. interacting with it via JavaScript and styling it using CSS. So I did a little research and found a nice example of one built using script.aculo.us.  The demo page looked great so I downloaded the source to get a feel for how it worked.  I liked what I saw so I thought I would create a new AjaxControlToolkit control based on this example.  My original goal was just to port it over to ASP.NET, but as I started playing around with it I thought I...

I know most dev's prefer writing new code over fixing/maintaining the existing stuff.  And most days I feel the same way.  But every once in a while it is kind of fun signing up for that one lingering defect that no one else can seem to fix.  Maybe you know the one - its not reproducible, only occurs in production and brings the system to its knee's?  Sound familiar? Well I thought I might try something new and blog about some of the juicy bugs we have found hanging out in our app.  This might turn into a blog series or something, or maybe not.  Who knows. The Bug The app I am currently working on has a page that uses ASP.NET AJAX's new Timer control to automatically refresh the page every 30 seconds.  The page is one of those status pages that lets you monitor the progress of some...

I am working on a project that needs a new screen for bulk entry tasks.  We have a few business scenarios coming up where we have people inputting 5 to 8 records of data at a time.  I met with a few of our analysts last week and hashed out a rough outline of what they were looking for.  About 10 times or so during the 30 minute meeting some form of the phrase 'kind of like excel' was mentioned.  Our data entry personnel are familiar with excel and our analysts thought an excel styled grid would make a lot of sense.  'An excel grid with a Submit button' was the phrase I had underlined twice in my notes.  I wasn't too worried about the grid's styling, but I wasn't quite sure what the best way to handle the 'bulk insert' requirement.  Most of our other grids require an explicit...

A while back I wrote a post describing how the DetailsView, GridView, UpdatePanel and the AjaxControlToolkit's ModalPopup controls could be used to implement the common Master/Details UI pattern.  I cheated a bit when creating my original example in that I didn't really complete the implementation - the Save button on the popup didn't actually do anything.  Since writing that post I have received a lot of email and a number of people left comments asking me to complete the example - so here it is.  If you plan on reading through this article, I recommend playing around with the demo site to get a feel for how the page works.  All data changes are only persisted to memory, so don't worry about messing up the data set. Live Demo | Download Scenario I am sure everyone is pretty familiar with Master/Details style of editing data, but just in case -...

Here are three quick tips you might find useful when using the Toolkit's Tab control.  I included demo's for all three tips so you can get a feel for how it looks and behaves. Live Demo (IE6, IE7, FF, Opera) | Download   #1: How To Change the Selected Tab When the Tab Header is MousedOver By default the tab control will switch the selected tab when a different tabs' header is clicked.  Depending upon the content you are displaying, you might find it useful to change the selected tab as the user mouses over a different tab.  I saw an example of this on designflavr.com.  This site has a tab control that displays the categories and tags and some other miscellaneous links.  These items are collected into a tab control that has been placed in the right hand sidebar.  You can get this mouseover style navigation by adding only...

I took a break from my recent Silverlight explorations to work on a new datagrid skin.  I thought the skin turned out fairly well so I figured I would pass it along just in case anyone else could find a use for it.  Like some of my other skins, it makes use of ASP.NET 3.5's ListView, DataPager and LinqDataSource controls.  Here is the run down of the features ...    VS 2008 style border blue border  Vimeo-ish style data pager Row hover effects (except for IE6) Sort icons Live Demo (IE6, IE7, FF, Opera) | Download VS 2008 Style Border To create the border, I used a variation of the rounded corners technique Josh outlines here.  Below is the markup.  It is pretty much just a handful of DIV elements that are used for holding the images.  If you are thinking about using this technique, you should check out Josh's site...

A while back, I wrote a post describing how to create a folder browser with ASP.NET 2.0 using the TreeView, UpdatePanel, GridView (customized to always display header row) and a modified version of the FileSystemDataSource as described on MSDN.  I have used this widget on a few different projects and I generally like how it works (you can view the demo here).  One thing my original implementation is clearly lacking is a professional look and feel.  So I recently had the opportunity to upgrade it to .Net 3.5 and in the process I decided it was time to overhaul the style.  Using the Vista folder explorer as my template, I made the following changes to the original sample ... Replaced the plus/minus icons with dark and light arrows Added soft blue rounded corners to the explorers container Added modified date column to the right hand pane Added a footer the...

Here are a couple more themes for the AjaxControlToolkit's Tab control based on the tabs found on LinkedIn.com.  Below the screen shots are a few bullet points discussing how I created them.  If tab theming is new for you - it might be helpful to check out these other samples as well ... Five AjaxControlToolkit Tab Themes created from DynamicDrive.com Dev.Opera.com Style TabContainer Theme JQuery TabContainer Theme with Tab Transition Animations Using CSS Image Sprites with the XP Themed TabContainer More Sample AjaxControlToolkit TabContainer Themes ... Creating a YUI TabView Style Theme for the AjaxControlToolkit's TabContainer Control As usual, here are the links for the demo and download ... Live Demo (IE6, IE7, FF, Opera 9.26)  | Download (.Net 3.5 and AJCT 3.5.11119.0) Tab Header Images Different images are used all three tab states: {Default, Hover, Active}.  Each tab is made up of 2 images, the left edge and the...

Last November Josh Stodola wrote a detailed post discussing how great looking fluid-width rounded corners can easily be created using Paint.NET, a handful of DIV tags and a small amount of CSS.  The basic technique Josh outlines isn't new, but he does a great job walking through the steps with just the right amount of detail.  I remember reading the article sometime after I struggled through creating an AjaxControlToolkit control based on NiftyCorners (being completely uncreative, I called my custom extender control the NiftyCornersExtender) and I found it very interesting.  I recently went back through and re-read Josh's article this past week and went through his tutorial again. It turns out this was great timing - I am working on a project where the client has requested a sleek, soft and simple interface - those were their exact words.  So I used Josh's tutorial to frame a couple of my...

YUI recently added another button type to their control library - they call it the Glowing Button Control.  The Glowing Button Control allows you to add a glossy, glass like effect to your buttons along with a glowing background.  The YUI documentation says the inspiration for the design came from the Aqua buttons found in Mac OS X.  Below is a progression of screen shots that try to show the glowing effect, but you should really check out their demo page to get the full effect.       A project I am working on could use something like this to liven up a few of our screens.  We are prototyping a new design for our landing screen and of course we want it to be as sexy as possible.  The purpose of the landing screen is to let the user know about what our product is about and have them sign...

One of the projects I am working on is on the verge of failure.  For a while now the writing has been on wall, but this was the week that everyone finally realized it.  Its a rotten feeling and I hate it.  So to cheer myself up and to keep the creative juices flowing I thought I would play around a little bit with ASP.NET 3.5's new ListView, DataPager and LinqDataSource controls.  A while back, I came across a really nice looking data grid that I wanted to create a ListView skin for.  Besides the nice soft blue color scheme, I liked the data grid's sorting icons, all caps headers, alternating row styles as well as the simple text-based data pager.  So I used the ListView and DataPager controls to build the visual elements of the data grid and used the LinqDataSource to source the grids data.  I have written...

I found a few images on dynamicdrive.com and thought they would make a nice theme for the AjaxControlToolkit's Tab control.  Check out the live demo page to see if it is something you can use.  If it is - help yourself to the download. Live Demo (IE6, IE7 and FF) | Download If you haven't worked with theming the Tab control before, here are a few links ... Creating a YUI TabView Style Theme for the AjaxControlToolkit's TabContainer Control More Sample AjaxControlToolkit TabContainer Themes ... Using CSS Image Sprites with the XP Themed TabContainer JQuery TabContainer Theme with Tab Transition Animations Dev.Opera.com Style TabContainer Theme Below are the style rules I used for these tabs.  And here are the rules for the red tab.  The rules for all of the other colored tabs are exactly the same, only the background image url changes. That's it.  Enjoy!...

I haven't played too much with ASP.NET 3.5's new LinqDataSource control yet - so I figured it was about time I did a little research and checked it out.  Typically, I like to document my research by creating a small prototype application focused on a handful of the new features that I am investigating.  I find building a reference application is helpful because it tends to drive out some of those nasty implementation details that somehow remain hidden if I just browse the documentation or read a reference book.  So for a recent research project, I decided I would look into the LinqDataSource's control GroupBy and OrderGroupBy attributes to see if they could be used to help me build a grid that supports grouping.  Below is the final screen shot for my reference application.  The grid shows the rows in the Northwind Orders table - grouped by the customer that...

I was browsing ajaxrain's catalog yesterday and I cam across a pretty nifty jquery plugin called liScroll that allows you to turn an ordinary HTML UL/LI into a scrolling ticker.  Besides scrolling the items from right to left, the liScroll plugin supports two additional features It allows you to specify the scrolling speed by changing the value of the travelocity parameter The scrolling automatically pauses when you mouse over it After seeing the liScroll demo, I was certain that this was something I could use for some of the sites I am working on.  So I decided to see what it would take to implement a scrolling ticker control using the AJAX Control Toolkit.  In addition to the liScroll features listed above, I also wanted to incorporate a few other enhancements, including Support both left-to-right and right-to-left scrolling directions Support applying a CSS class to the item when it is...

I spent some time playing around with the AutoComplete control to see if we could use it to provide smarter filtering capabilities for our data tables.  The general idea was that I would allow the user to select a filter column from a drop down list.  Then as they key in characters into the adjacent textbox I would use the AjaxControlToolkit's AutoComplete extender to suggest some values to filter by.  You can see this in the screen shot below.  I selected 'City' in the drop down and then typed 'be' into the textbox and like magic the 3 cities in my data set that have start with 'be' appear.  Live Demo (IE6, IE7 and FF) | Download (.Net 3.5 and Toolkit 3.5.11119.0) If you are interested in how I created this sample, the details are below. The AjaxControlToolkit's AutoCompleteExtender If are familiar with Google Suggest, the concept behind the AutoComplete control...

A few weeks ago I wrote a post explaining how the AjaxControlToolkit's Slider control could be used as a data pager.  One of the teams I am currently working with has adopted this approach and is implementing it throughout their site.  While this technique seems to work well, one feature the team would like to add is a custom tooltip that not only displays the typical paging statistics (i.e. page X of Y), but also gives the user a hint as to what can be found on each page of data.  It's this last bit of information that increases the value of the tooltip.  Not only are we showing the user the typical paging statistics, but now they can get an idea of what data can be found on the page before actually navigating to it.  Below is a screen shot of how this looks.  Live Demo (IE6, IE7 and...

A while back I wrote a post about adding animation effects to the AjaxControlToolkit's Tab control.  The demo I created for the post used the toolkit's FadeIn animation to fade the selected tab into view as it became active.  I thought this turned out pretty well, however I noticed that after the fade animation finished running the tab's text contents remained a little blurry.  Compare the before and after.   To see this for yourself, open the demo page and click on the 'Play Fade Animation' button at the top of the screen.  Notice how the text looks a little blurry after the animation runs?   Ted Glaza responded to that original post and provided a hint as to what might be causing the problem The problem you're seeing with the FadeIn animation has to do with how IE and ClearType work together. Searching "IE ClearType Opacity" should provide more details....

One of the designers on our UI team requested a screen mockup with a page layout that is similar to your typical email client.  The page is divided vertically into 2 panes.  The left pane contains a 2 level hierarchy of categories and subcategories.  As the user selects different subcategories the designer wants the right pane's content to be updated with the corresponding information.  Just like Outlook, the designer wants the subcategories to be displayed within expanding and collapsing panels. I am familiar enough with the AjaxControlToolkit's Accordion control to know that it should be the right tool for the job here, but I haven't actually used it before.  So I did a little research on the Accordion and created a small demo page that we used to get a feel for how the control behaves and what it takes to build and style it. Live Demo (IE6, IE7 and...

I was browsing through the YUI developer site and came across another component that I thought would make a nice addition to my ever growing toolbox.  It's their Logger Control.  The YUI guys have created a floating debug console window that displays messages as they are written to the YUI log object.  You can check it out for yourself on their demo page.  Besides just displaying the messages, the Logger Control also supports a few of the other standard log browsing features, including Viewing messages by severity (info, warning, or error) Viewing messages by source (global or LogReader in their sample) Pausing and clearing the trace Collapsing the trace console window Repositioning the trace console window by 'drag and drop' Live Demo (IE6, IE7 and FF) | Download (ASP.NET 2.0 and Toolkit Version 1.0.10920.0) I think this Logger Control could be quite useful.  ASP.NET AJAX has a similar concept, however...

As far as web development goes, I came a little late to the party.  I started life as a developer working on the absolute guts of a fairly complex object persistence engine.  At my next stop I hand-coded an obscene number of business objects that fed our presentation layer (which is pretty ironic considering I just worked on an ORM!).  Needless to say I didn't stay at that place too long.  From there I finally took a stab at user interface when I took a gig as a WinForms developer.  I did that for a little over a year and it was OK.  Finally I ended up where I am now, about 60% of my day to day activities includes web developer on Microsoft's ASP.NET 2.0 platform.  I did a little bit of web development with 1.1, but nothing substantial.  Hands down, I enjoy web development the best (I have never once been complimented on how nice...

As I mentioned in a previous post, I am currently researching what advantages ASP.NET 3.5's new ListView control would have over the GridView.  To continue down this path, I thought it would be a good idea to look into how paging work with the ListView.  To direct my research, I created a sample data table that supports paging via the standard paging buttons as well as with a slider bar.  Below is a screenshot of the table.  As usual you can follow the links below to view the live demo as well as download the code. Download (.Net 3.5 and AjaxControlToolkit 3.5.11119.0) | Live Demo (IE6, IE7 and FF) If you are interested in the implementation details, they are outlined below. Overview of the DataPager Control Before today, I had not yet worked with the DataPager.  So to start off, I went out to MSDN's documentation and read through it.  To summarize MSDN, the DataPager can be used to display paging navigation controls...

While waiting for VS 2008 Web Developer to download, I took some time to browse through the Visual Studio Express site.  I am not usually a fan of sites that use a black background, but I thought it actually looked pretty good here.  The contrast between the white text and black background makes it hard to look at for too long, however in general the site gives off that sleek and cool vibe that I am certain the designers were shooting for.  One visual item in particular that caught my eye was the nice reflection effect all of the images on the page had.  Check it out in the screen shot below.    Live Demo | Download (IE6, IE7 and FF) I have briefly looked into this before so I was curious how this page had implemented it.  I opened up the IE Developer Toolbar and took a quick look.  For this page, the developers created a single image that contains both the image and the reflection.  You can...

I use Yahoo! for my email client.  The main screen has the standard email client three section layout.  One area for selecting a folder (Inbox, Drafts, Sent Items, etc...), another area that displays the messages in a table or grid, and the last region shows a preview of the selected message.  You can select messages to delete, forward, move by clicking a checkbox to select the messages, and then by clicking the button that corresponds to the action you want taken.      Live Demo (IE6, IE7 and FF) | Download (This includes the complete AjaxControlToolkit solution plus the code for my patch) I am currently building a new screen for a project I am working on and I would like to use a similar design.  I want to allow the user to use checkboxes to select rows.  Once one or more rows are selected, clicking a command button (Delete, Copy, Export) will execute the actions...

While doing some research this afternoon I ended up on dev.opera.com.  Its a nice looking site.  The combination of colors, fonts, and images make browsing the sites content enjoyable.  I was especially impressed with the tabbed menu that sits at the top of the page.  The tabs are rounded, have rollover states and are very professional looking.  So during some downtime this afternoon I created a new theme for the AjaxControlToolkit's TabContainer control using the same images and styles as dev.opera.com.  Because I have created a few themes before (jquery, yui and technorati), I was able to reuse the general structure of one of my previous stylesheet's and just plugged in my new images.   Live Demo (IE6, IE7 and FF) | Download (.Net 2.0 and Toolkit Version 1.0.10920.0)  Tab Header Images This tab theme uses images to form the rounded corners.  The original images on dev.opera.com didn't have transparent background, so I used Paint.NET to set the background transparency (if you haven't used...

A few posts back I described a technique you could use to add Animation effects to your ModalPopup controls.  A similar technique can be used to implement a JQuery style fade animation that runs as the user navigates between selected tabs.  While the technique I used is very similar to the one I blogged about before, I thought I would pass along the stylesheet for the JQuery tab theme as well as a quick overview of how I implemented the transition. Live Demo (IE6, IE7, FF) | Download (Uses Toolkit Version 1.0.10920.0) JQuery Tab Theme Creating this JQuery theme wasn't too difficult.  I grabbed one of the stylesheets from a theme I had created before and tweaked the style attributes to what was required to look like the JQuery tabs.  My JQuery themed stylesheet is divided into 3 sections: common styles, styles for the inactive tabs and finally the styles for the active tab.  Just...

When I was in college I took a course on Software Construction.  With 3 weeks left in the semester, the professor assigned us a project that he knew would take close to 6 weeks to implement.  To meet the deadline he allowed us to leverage 3rd party components where possible.  He encouraged us to think about a solution that was constructed from other components as opposed to one that we developed from scratch.  This professor was good.  This is exactly the same type of problem I encounter everyday. Live Demo (IE6, IE7 and FF) | Download (Uses Toolkit Version 1.0.10920.0) I took this construction approach on a recent project.  Our team is looking to soften some of our UI elements by using the toolkit's RoundedCornerExtender control.  The toolkit's rounded corner implementation does not include anti-aliasing and as a result, the corners look pretty rough. (Anti-aliasing is a technique that is used to make graphics and text easier to read.  Here is...

The web application I am currently developing has a fair number of popup windows.  Some are modal, some aren't.  All open new browser windows and this annoys more than a few of our users (I hate popup's too, so I guess it shouldn't be that surprising).  So as a team we are looking into replacing our popup windows with the ModalPopupExtender and PopupExtender AjaxControlToolkit controls.  This is just fine by me - I have worked with the toolkit's popup controls on other projects and they worked quite well (It also saves me the pain of writing custom JavaScript for communicating between browser windows).  Live Demo (IE6, IE7, FF) | Download (Uses Toolkit Version 1.0.10920.0) So as an R&D task, I created a page that implements a simple 'Tip of the Day' popup control.  The functionality is basic - you click a button and the Tip of the Day panel is displayed.  Once displayed, you can click that 'Next Tip' button to fetch the...

Like I mentioned in my last post, I have been researching ways to make our web application a little more user friendly by including a handful of personalization features.  This research was oringally spawned from one of our more savvy users that was tired of always confirming deletes via our delete confirm dialog.  Our standard thus far has been to include this confirmation step at every place within the application where we allow the user to perform a delete.  For some users this confirmation step has become a little annoying.  So I nominated myself to look into what it would take to include the typical 'don't ask me this question again' checkbox to our confirmation dialogs. Live Demo (IE6, IE7, FF) | Download (Uses Toolkit Version 1.0.10920.0)        Notes on the Demo: Use the 'Reset Profile' button if you want to see the confirm dialog again I removed the connection string from the download's web.config.  You will need to point to your existing...

On my work and home PC's I have my browser's homepage set to google.com.  Like the rest of the world, for about the past 7 years or so I have been using google as my starting point for Internet searches.  Sometime within the past year I took the time to setup google's personalized homepage - igoogle.  I configured my homepage with a nice blend of sporting and tech related gadgets.  I like this because it gives me a nice dashboard to the content that interests me most. Live Demo (IE6, IE7, FF) | Download (Uses Toolkit Version 1.0.10920.0) One of the silly features I have found that I like about igoogle is how the pages color palette changes depending upon the time of day.  So as the day progresses from morning to afternoon to evening the colors on the page change as well.  Like I said, I know this is a silly feature, but I like it.  And I have asked...

I recently wrote a posting showing how GridView mouseover effects can be added to your existing GridView's through the use of a AjaxControlToolkit extender control.  In the last portion of the post I mentioned how I thought it would be useful to add other features into this extender to support column and header cell cell hover and select effects.  So on a recent road trip to Orlando FL I added a couple new features to this extender control and built a handful more grids to show off the new enhancements.  One of the new GridView themes uses the Sharepoint 2007 calendar color scheme and the other is derived from the ExtJs Data Grid.  All of the grids can be viewed on the demo site and of course you can also download the full source.   Live Demo (IE6, IE7 and FF) | Download The GridViewControlExtender now includes support for applying column hover and select CSS classes to cells that are in the same column...

In a recent post, I created a GridView that with the help of some JavaScript and CSS rendered similar to the Tablecloth style table shown here.  I like the Tablecloth sample because the presentation of the grid changes as the user interacts it.  It does a good job of keeping the user focused on the data elements the they are currently working with.            Live Demo (IE6, IE7, FF) | Download   The design of the Tablecloth grid is fairly simple.  It boils down to adding and removing CSS classes to the individual HTML Table elements (mostly TD's and TH's) in response to a four different DOM events (mouseover, mouseup, mousedown and click).  For example, when the mouse cursor is positioned over a particular cell in the table, the mouseover event fires and a bit of JavaScript runs and applies a CSS class to all of the cells that share the same rowIndex or cellIndex.  The image below shows how this works.  When the mouse is positioned over...

The calendar control that my team is using in our current web application is terrible for three reasons: it is ugly.  Viewing the control reminds me of the first time I went back to Window's 95 after having upgraded to XP it opens the calendar control in a new browser instance (something our users hate) it has a lot of supporting, custom JavaScript that has had its fair share of bugs If I am not mistaken, somehow the control survived the port from classic ASP to ASP.NET 1.1 and then again from ASP.NET 1.1 to ASP.NET 2.0.  I have no idea where the control orignally came from, but it is time to get rid of it. Live Demo (IE6, IE7, FF) | Download So my latest research tasks was to look into replacing this legacy control with something a little hipper.  I took a look at the AjaxControlToolkit's Calendar control to see if it was something we could use.  Sure enough...

If you follow my blog, you have no doubt noticed that I have been taking a tour through the Yahoo! User Interface Library (you can read my previous posts here, here and here).  Well, I think I have finally made my way through a majority of the content and feel like I have come out with a few new UI components that I can incorporate into my current web app.  But before I move on, I thought I would write one last brief post describing how you can incorporate the YUI style progress panel into your existing ASP.NET AJAX web application. Live Demo (FF, IE6 and IE7) | Download The markup for the progress panel is below.  <asp:Panel ID="pnlPopup" runat="server" CssClass="progress" style="display:none;"> <div class="container"> <div class="header">Loading, please wait...</div> <div class="body"> <img src="img/activity.gif" /> </div> </div> </asp:Panel> .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode...

The codebase for the web application I am currently working on is pretty new.  We ported our legacy application from .Net 1.1 to .Net 2.0 and in the process we did a complete redesign of our presentation and business logic layers.  However, we did not do the same with our data model.  We upgraded from SQL Server 2000 to 2005, but for the most part we kept the exact same datamodel.  So while from a technology standpoint we have a completely new platform, our data model is about 5 years old.  Over those 5 years most of datamodel changes have been the addition of new columns to existing tables.  As a result, a number of our core tables have become quite wide.  And as the tables in our underlying datamodel get wider over time, so do the grids that present the data.         Live Demo (FF, IE6, IE7) | Download So during a recent visit to the Ajax Rain site, I came across a sample that had a few...

If you have read a few of my most recent posts (here and here) you have probably noticed that I have been spending some time with  Yahoo!'s YUI control library.  During my most recent visit I came across a great looking confirm dialog.  It's simple and straight to the point ... Live Demo (FF, IE6, IE7) | Download The team I currently work on had already been debating whether or not we needed to replace our existing standard confirm dialog with something a little better looking.  Watching the demo pretty much sealed it.  So I signed up for investigating what markup and style classes were needed to get this dialog into our application and working with the AjaxControlToolkit's ModalPopupExtender control.  The following are the steps I did to accomplish this ... Design the HTML Structure and CSS Classes Our existing confirm dialog is not CSS friendly.  That made tweaking the look and feel a little harder than it should have been.  So this time around, I...

I recently stumbled across the following post.  In the entry, the author describes a simple modal popup he has created for his hotel reservation ASP.NET AJAX web application.  While developing the popup control, he ran into a problem when trying to include both a 'Close' button at the bottom of the dialog as well as a close 'X' button in the top right corner: I ran into a bit of a stumbling block because I wanted to have multiple buttons close the popup.  I had the OK button and the cancel button centered and vertically aligned at the bottom of the window, but I also wanted a cancel button in the top right  (ie "Cancel [X]") - with the familiar [X] that we know and love for closing something.  The problem is, I couldn't figure out how to assign more than one control to the CancelControlID.  Live Demo | Download [Update 10/3/2007]: As Koen points out, the...

I recently blogged about how to create a YUI TabView theme for the AjaxControlToolkit's TabContainer control.  As a follow up to this entry, Peter Kassenaar asked the question: I just don't quite get how the CSS is able to extract the different (background) images from a single sprite.png file. I've googled for this, but that didn't help me much. Can you point us to a direction where this is further explained? This would give me the perfect opportunity to clean up my /images folder on the various themes of a project... In the YUI theme I created, I used a single sprite image and used CSS to pinpoint the location within the sprite for the background image of the tab panel header's.  Peter is asking how I did this.  To be honest, I just reverse engineered the CSS style attributes from Yahoo!'s demo site along with the exact same sprite image...

After working on a YUI TabView theme for the AjaxControlToolkit's TabContainer control, I thought it might be fun to create a few more TabContainer themes for some of the other tab-style controls that I have seen floating around the web.  I was especially curious in seeing what it would take to include images in each of the tab panel header's.        Below are the controls I was targeting, where on the Internet I found them, and a short description of what it took to create the corresponding theme.  If you are not familiar with how theming the TabContainer works, I recommend reading the documentation for the TabContainer control.  Download | Live Demo | View Stylesheet   Technorati Tab Theme I like Technorati's tab control because it simple, yet in my opinion it still has a nicer presentation than the default xp style TabContainer theme.  Here is a link to the page where I found this control. Notes: To use this theme, include a link to...

I was browsing the YUI documentation and I came across a very nice looking tab control.  I thought it would be interesting to create a similar styled theme for the AjaxControlToolkit's TabContainer control.  I don't mind the default XP-themed TabContainer, but I think the XP style tab's are getting a little bit dated.  I had not previously created a theme for a TabContainer, so I had no idea what to expect.  It turns out it was very easy to do.  Below are the steps I followed ... Live Demo | Download Code [Update 10/1/2007] : Updated CSS so it would work with IE6 Check out here for additional TabContainer theme Check out here for an XP without the roll-over flicker   Read the 'Tab Theming' Section of the TabContainer's Documentation Because I haven't created a custom theme for this control yet, I needed to do a little research before getting started.  I read through the paragraph on the toolkit's sample site that explains how...

I recently stumbled upon this site again.  I remember on my first visit, I thought it was pretty cool how the modal popup's incorporate subtle animation effects that give the pages a little extra pop.  If you go to the site you can check it out for yourself.  Try clicking on any of the 3 images on the page and watch closely for the animation.  [Update: 9/20/2007] I followed up with Ted Glaza on his comment and he provided some additional information.  I included the email thread at the bottom of this post. Live Demo | Download This page appears to be using PHP, but I thought it might be interesting to re-engineer the modal popup using ASP.NET AJAX plus the ModalPopupExtender control from the AjaxControlToolkit.  I figured there should be some way to run an AjaxControlToolkit Animation when the dialog is displayed ... It turned out this was a little more difficult that I...

I was recently reading Dan Wahlin's excellent 'How To' for creating a GridView extender control.  While I was going through his code samples, I thought it might be interesting to create another GridView extender that allows you to resize the column widths of the GridView by clicking and dragging the header cell borders.  Before I went down the path of actually implementing the extender control, I wanted to get a feel for what the client side code for handling this might look like.  So I quick created a sample application where I added this functionality to the Google Analytics GridView I blogged about in an earlier post. ** Because this sample is a proof of concept, I only tested in IE7.  If I move the code to an extender control I will go back and test it with other browsers.  Live Demo | Download Before I get into the implementation details, here is a quick screen shot of the grid. ...

In the web application I am currently developing there is a page which allows user's to start an off-line process.  There are a number of parameters the user can configure that will effect how long each of the processes take to complete.  When the system in under a typical load an operation can take anywhere from 30 seconds to 30 minutes depending upon how it is configured.  After the user kicks off the operation, we redirect them to a status page that contains a list of all of the finished, queued and currently executing operations in the system.  The idea being that the user could see where there process is in the queue so they could get an idea of when it might complete.  After the page was in production for a few months, we started getting feedback from our users saying they would like it if this status page would automatically refresh every 30 seconds or so so they can continuously view the most up to date state...

If you have been working with Microsoft's ASP.NET AJAX components, you are probably very familiar with the $get and $find JavaScript shortcut functions.  If not, here is a quick refresher. $get Overview $get can be used as shorthand for the document.getElementById and element.getElementById functions.  The $get shortcut function points to the Sys.UI.DomElement.getElementById JavaScript function which is defined as part of the ASP.NET AJAX client side library (which means you will need to include a ScriptManager on the page to be able to use it).  $get accepts two parameters, the first is the ID of the DOM element you want to retrieve, the second is the parent element of where the search starts.  The second parameter is optional and when it is not supplied defaults to the document element.  Here is the official API reference. If you happen to step into $get during a debugging session you will find that it basically comes down to the following function ... function get(id, element) { // validation code...

The web application I am currently developing has a handful of cases where modal windows are used to gather user input.  Lately, I have been considering replacing these modal windows with an asp:Panel that is displayed as a modal popup using the AjaxControlToolkit's ModalPopupExtender control.  In the process I noticed a small usability issue with the ModalPopupExtender's behavior.  Unlike other modal windows, the popup is not dismissed when the user presses the 'Esc' key.  I am one of those users that relies heavily on the keyboard and only uses the mouse as a last resort - so I find this rather annoying. Live Demo | Download Hopefully, this functionality will make it into the toolkit one day.  Until then, you can add it to your pages by including a small amount of JavaScript.  In the sample page I created for this demo, I attached a handler to the document's onkeydown event.  In the handler I check to see if the key pressed was the 'esc' key, if so I find the ModalPopup component...

I was recently working on a research project with the purpose of exploring how ASP.NET AJAX could be combined with Microsoft's Virtual Earth Map Control to implement the common master - details UI pattern.  Our application allows users to browse zip-codes using the Virtual Earth Map Control and we thought it would be useful to display details for the zip-code as it was being hovered over. While investigating this I created a prototype web application that does the following: Renders purple polygons on the VEMap surface representing the following 3 zip-codes: 32224, 32246, and 32256. When the user hovers over the polygons, 2 things happen: The border of the polygon changes to a thicker width.  This is a visual cue meant to inform the user of their action The information displayed in the table to the right of the map updates.  This table displays some high-level demographic and weather statistics. Live Demo | Download Here is a brief explanation of how I accomplished this.  The example...

I love the AjaxControlToolkit.  The controls are free, the code can be downloaded, and the documentation is well above average.  However, I was a little surprised when I looked at the code and supporting documentation for the HoverMenuExtender's sample page.  The documentation states the following In the sample above, an ASP.NET GridView is populated with data from a database. In each row of the GridView, a HoverMenu associates the content of the row with a Panel containing links that operate on that row. The sample page does contain a GridView, but it doesn't look too much like the GridViews I have created or seen in the web applications I have worked with.  The main differences are the following The sample GridView doesn't support Sorting  The markup for the GridView doesn't use BoundFields, but instead has a single TemplateField that has an embedded table for both the ItemTemplate and EditItemTemplate The first item are show stoppers for me because the DataSources I...

My current employer uses a web based tool for project management.  The tool is visually appealing and provides users with a great web experience.  It's an ASP.NET application that relies heavily on ASP.NET AJAX.  One of the AJAX features I like is the use of a popup control for status/type selection (i.e. what state is this bug {Open, Closed, Pending Acceptance, ...}).  Most existing web and windows applications usually present this as a drop down list.  Live Demo | Download Obviously, there is nothing wrong with the drop down approach, but I thought I would create an example showing an alternative technique using the PopupControlExtender found in the AjaxControlToolkit along with the regular ASP.NET RadioButtonList control.  The main advantage the PopupControl/RadioButtonList approach has over the standard ASP.NET DropDownList is that it provides the developer with a finer grained control over the presentation.  Here are a couple of screen shots that show this alternative technique.  Because the RadioButtonList control exposes attributes for controlling the layout, it is easy to configure exactly how...

Did you know that the when a partial postback starts, the OnUpdating animation for all of the UpdatePanelAnimationExtender's on the page will play.  Here is part of the documentation taken from the UpdatePanelAnimationExtender page It is important to note that because of the UpdatePanel architecture, the OnUpdating animation will always play when any partial postback starts, but the OnUpdated animation will only play at the end of a partial postback if its UpdatePanel was changed (note: setting the UpdatePanel's UpdateMode="Always" will ensure the OnUpdated animation plays when every partial postback completes). Unless I am mistaken, I believe this behavior is for the scenario where an UpdatePanel's UpdateMode is set to Conditional, and the code on the server handling the partial postback explicitly calls Update on the UpdatePanel.  In this case, where logic on the server decides if an UpdatePanel is refreshed, the UpdatePanelAnimationExtender has no way of knowing if it should have played the...

I recently wrote a post showing how the contents of an UpdatePanel can be disabled using a technique similar to what the ModalPopupExtender control does.  The ModalPopup control adds a div onto the page that covers the all other elements by setting the width and height to the windows width and height and then sets the div's z-order to a very high number (like 1,000) ensuring that is it the top most element.  This div covers all of the other elements on the screen which provides the modal behavior. I received two comments from this post It doesn't work with FireFox  It would be nice if this was an ASP.NET AJAX extender control I have not created an AjaxControlToolkit extender control before so I figured this would be a good opportunity to learn something new.  Because I had already developed the code for the previous entry, I figured it would come down to copying and pasting the code into the appropriate methods of the AjaxControlToolkit framework.  Sure...

In the web application I am currently working on I use the ModalPopupExtender control in a handful of places.  When I first added it to a page, I noticed the browser (tested in both IE and FireFox) would display the contents of the popup for a split second before hiding it.  In IE, the popup contents is visible long enough that I was able to snag a screen shot of it in only 3 tries (in the screen shot below, 'Hi' is supposed to be displayed in the popup when the button is clicked).  Demo With Flicker | Demo Without Flicker To get around this, I explicitly set the display style to 'none' on the popup Panel.  This has solved the problem.<asp:Panel ID="pnlPopup" runat="server" style="display:none"> Hi </asp:Panel> .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem...

About a month ago I wrote a post describing how an UpdatePanel could be used to enhance the regular asp:Wizard control.  In response to this post, Bilal posted the following comment Is there a good way to disable the wizard control when the updateprogress is showing and not only fade it out? Live Demo 1 | Live Demo 2 | Live Demo 3 | Download [Update: 8/9/2007] I updated the sample site, download and code samples to include the trailing 'px' when setting the width/height so it would work with FireFox. [Update 8/6/2007] I followed a Ryan and MichaelD's advice and converted this example into an extender control.  You can view the posting here.  This posting also provides an interactive demo and the full source code.  It also fixes the FireFox problem. I hadn't tried this before, but I can see how it would be useful.  In the web application I am currently working on,...

I am currently working on a data-centric web application.  The page I most recently worked on allows the user to browse data from six different tables (a primary table, and five other tables that have 1-M relationships to the rows in the primary table).  A row from the primary table is displayed in a DetailsView.  Below the DetailsView is a TabContainer control with five tabs; each tab contains a GridView that displays the related rows in the other five tables.  Below is a screen shot of what the TabContainer portion of the page looks like.  Live Demo | Download Sample Site When I first developed the page, I bound the DetailsView and each of the GridViews to the corresponding DataSources like I usually do.  Everything worked great in our development environment.  The grids filled nicely and I could move around from tab to tab with no problems.  However, when we moved the page into our production environment loading the page was terribly slow.  In production, we have n-times more data and...

In a previous post I discussed how to use combine the TreeView, GridView and UpdatePanel controls to create an AJAX style folder browser.  I tagged this previous post as 'prototype' with the intentions of coming back to it and updating it to something that is more production ready.  This evening I found some time to work on it again.  I made a couple of enhancements that help both the usability (no more full postback when a folder is clicked in the right hand pane) as well as the codebehind (I created a FileSystemDataSource control for interacting with the file system)   Live Demo: AJAX Folder Browser Download: Sample Web Site [Update 7/25/07] Thanks to some feedback from Bilal, I fixed a bug where clicking on the pdf text would cause the famous PageRequestManagerParserError.  The problem was that I registered the ImageButton as a postback control, but not the LinkButton.  This has now been fixed and...

I recently read a dotnetkicks article where the author laid out an approach for using the ASP.NET AJAX client-side framework to synchronously execute a WebMethod that does some sort of server-side validation or computation.  I believe the idea here was while this validation is executing the page designer does not want the end user interacting with the other elements on the page.  I had not encountered this issue before, but I started working out how I would have approached it.  I enjoyed the authors article and I liked how he leveraged the existing ASP.NET AJAX framework and that the solution should would work with the existing ASP.NET CustomValidator.  Because the operation is synchronous, you can invoke the WebMethod from the ClientValidationFunction and set the IsValid bit to true or false depending upon the result.  However, I am not sure if I would like having the page go unresponsive while this validation is taking place.  Especially if it is unclear to me that the field I entered data into was going to require...

I recently created a folder explorer using a combination of the ASP.NET TreeView and GridView controls as well as the new ASP.NET AJAX UpdatePanel.  You can view a live demo of the folder explorer here. The code for this sample is at the bottom of the page. [Update 7/24/2007]: Here is another post regarding this, except with a few more enhancements [Update 7/17/2007]: Per Ruckus' comments, I would like to make the following clarifications: The sample provides read-only access to the folders and files, making it more of a 'Folder Browser' instead of an Explorer A full-postback is done when a folder is clicked in the right hand pane.  If you have a suggestion to a nice way to have the Folder image buttons cause async-postbacks instead of complete post-backs, let me know.  I thought about possibly handling the RowDataBound event and explicitly calling RegisterAsyncPostBackControl ... Offically the TreeView control is not supposed to...

I was looking for good examples of how the ModalPopupExtender control could be used as a confirmation dialog.  I was especially curious in seeing implementations where the popup is used to confirm deletes performed on rows of a GridView.  I couldn't find any good samples so I figured I would take a shot at it.  Live Demo If you would like to view a running version of the sample, just follow the Live Demo link.  If don't really care about the step by step break down of this implementation you can jump to the bottom of the page to view the full code sample.  As always, feedback is encouraged.      Step 1: Add the GridView to your page, placing it inside an UpdatePanel.  <asp:UpdatePanel ID="updatePanel" runat="server" UpdateMode="Conditional"> <ContentTemplate> <asp:Label ID="lblTitle" runat="server" Text="ToDo List" BackColor="lightblue" Width="95%" /> <asp:GridView ID="gvToDoList" runat="server" AutoGenerateColumns="false" Width="95%"> <AlternatingRowStyle BackColor="aliceBlue" /> <HeaderStyle HorizontalAlign="Left" /> <Columns> <asp:BoundField DataField="ID" HeaderText="ID" /> <asp:BoundField DataField="Item" HeaderText="Description" />...

The web application I am currently working on is a data-centric, internal facing application targeted at the knowledge workers within our enterprise.  A majority of the pages are our core 'search' pages that contain a GridView and a number of input elements for entering search criteria.  Each row in our GridViews contain a hyperlink to a supporting 'details' page that has additional information for the selected row - usually contained in a DetailsView.  Our standard for implementing this has been to render the values for the GridViews primary key column as a hyperlink that takes the user to the details page passing the PK through the query string.  This all works fine and our users seem to be OK with this type of naviagation.  But when I was recently doing some work with the ModalPopupExtender, I was curious if we could improve this flow by keeping the user on the main search page by moving the DetailsView to the ModalPopupExtender.  See the screen...

Yesterday I was fiddling around with my MovableType blog looking for a plug-in for MovableType 3.2 that could render my category tags as a tag cloud  (by the way, I am still looking).  Along the way I came across the following site that had a nifty way of displaying screenshots of their product by clicking on the corresponding thumbnails.  Instead of having the browser take you to a page with the full image displayed by itself, the site displayed the image on top of the page in an ajax modal style window.  Besides just the image, the modal window also contained a few buttons as well as some additional information that was specific to the image.  Very nice.  I was curious of what this would take to implement using ASP.NET AJAX, so I created a sample web site (screen shot is above-right) that allows uses to browse thumbnail images.  When a thumbnail is clicked, the modal window is displayed showing the user the...

Here is a quick tip that you might find helpful when working with the JavaScript proxy classes the ASP.NET AJAX ScriptManager server control auto-generates.  You can view the source for the proxy by entering the following url into the browser: http://[server]/[website]/[webservice].asmx/js  For example, assuming you have created an ASP.NET AJAX web site called SampleWebSite and within the web site there is a web service called SampleWebService, all you have to do to view the JavaScript proxy is navigate to: http://localhost/SampleWebSite/SampleWebService.asmx/js I recently wrote a post describing how ASP.NET AJAX web services can be used with the Microsoft Virtual Earth Map Control to create a nice web based map application (the article is here, the online demo is here).  You can view the JavaScript proxy for the web service I used to look-up the lat/longs for the zip-codes by clicking on the following link:  http://mattberseth2.com/virtual_earth_polygon/ZipCodeService.asmx/js ...

Lately I have been playing around with AJAX progress indicators (gmal-like progress indicator, apply an UpdatePanel to an asp.net Wizard, and animated GridViews).  I saw this one (see screen shot below) on one of the Google Analyitics pages.  I liked it - so I figured I would write up a quick sample using it.  I am not going to go into detail regarding the specifics of the implementation, but the complete source for the page is listed below (it requires the AjaxControlToolkit).  Also, here is the animated gif  and here is the link to the tool that I used to create it.  Enjoy! [Update: 7/31/2007] I have included a link to download this sample website.  The site contains 2 pages both displaying the same demo.  The first page (Default.aspx) uses C# for the codebehind and the second one (Default2.aspx) uses VB. View Live Demo | Download Code Complete source for this example:<%@ Page Language="C#" %> <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0...

Like most people, I use more than a few of Google's web applications on a day to day basis.  I think what I like best about their applications is the elegance of the user interface.  Just recently I started using their analytics web application to learn more about what drives visitors to my site.  One of the pages within the tool is a dashboard screen that displays a handful of different panels, each containing summary information pertaining to the web traffic for my site.  Some of the panels display charts and graphs, while others contain tables with aggregated data.    As you can see, there is a lot of information being displayed on this page.  And as far as the user experience is concerned, this page is great.  It delay loads each of the panels instead of waiting until all of the data for all of the panels has been processed before serving the page.  As a result, the page loads almost immediately and the panels come to life one at a...

By using asynchronous post-backs with the new ASP.NET AJAX UpdatePanel server control, you have the unique opportunity to improve both performance and user experience of your web pages. [Update: 7/31/2007] Per request I have included the code for the live demo for download Download Code Performance gains are achieved because ... Less data is round-tripped during an asynchronous post-back - keeping the network load light  The browser does not have to rerender the complete page, just the part that was updated The server does not need to generate the full page output, just the portion(s) that are updated User experience is improved because ... Responsiveness is increased as the user can continue to interact with the page while the asynchronous operation is executing The complete page is not always reloading If you are not familiar with AJAX, or if you are familiar but need a refresher, here is a live demo page.  The page contains two GridViews, the top one does not...

Lately I have been working quite a bit with the UpdatePanelAnimationExtender control.  I have been using this control along with the animation framework to spice up my ASP.NET GridViews, DetailViews and Wizards by running a simple animation script before and after the control has been updated via an async postback (typically the animation disabled a button, faded out the control, and/or popped up a progress indicator) .  This has worked great for the past few months, but recently a new requirement came in from the field requesting for a way to cancel an async operation.  Being aware of the abortPostBack method the PageRequestManager, I figured (more like hoped) it would be pretty simple to implement this feature.  I added a 'Cancel' button to my progress indicator and wired the onclick handler to invoke the abortPostBack method.   Live Demo | View Source  Clicking cancel did abort the async postback however, because the OnUpdated animation only runs when the UpdatePanel is updated my indicator was never being hidden and it was appearing as if...

Ever had the need to read or write a piece of session data from the browser?  Here is an example of an easy way this can be accomplished using ASP.NET AJAX.  The approach is pretty simple.  First, add a couple of static methods to the page for setting and retrieving the session value (SetSession and GetSession) as well as the ASP.NET AJAX ScriptManager control.  Then write the javascript code that calls the PageMethods proxy to invoke these methods on the server (in my simple example, I wired the onclick handlers of 2 buttons). There only 2 details that are really worth mentioning.  The first is that the static methods need to be marked with the System.Web.Services.WebMethod attribute.  The second is that the EnablePageMethods attribute of the ScriptManager needs to be set to true so the ScriptManager will autogenerate the PageMethods proxy for us.  Thats it for the implementation details, but I should probably add a quick disclaimer that the sample below is just for demonstration - showing that...

I came across a blog post discussing a slick way to use the ASP.NET AJAX UpdateProgress control to add a gmail-like progress indicator to an ASP.NET web page.       I liked the approach the author used and it clearly works great for scenarios where you want to display a single 'something is happening' message to the user while the page is being updated.  However, after the operation completes and the indicator disappears, it is still up to the user to figure out where on the screen (i.e. what control was updated?) to look for the new changes.  If your screens are relatively simple, or if you feel the update should be obvious this is probably not an issue for you.  Unfortunately things aren't so for the web application I am currently working on.  A few of the screens contain a number of different sections and users would like to see the indicator rendered over the control (most commonly a GridView...

Did you know that with ASP.NET AJAX you can easily invoke static methods declared on your ASP.NET page from script on the client?  To enable this you will need to do the following: Define the method you want invoked and make it static Add the System.Web.Services.WebServiceAttribute to the method Include the ASP.NET AJAX ScriptManager component to the web page and set the EnablePageMethods property to true Once this is done, you can asynchronously invoke the static method by using the PageMethods proxy the ScriptManager adds to the page.  The following markup and code demonstrate this by using the classic AJAX example that retrieves the current time on the server.  Because the method is invoked asynchronously, you need to supply the callback javascript function that handles dealing with the return value. View Demo The example page below demonstrates this.  GetServerTime is the static method on the page that is decorated with the WebMethod attribute.  It returns the...

In a recent post I outlined an technique that I have been using to center an animated gif over an asp:GridView while it is being refreshed via the asp:UpdatePanel.  I like this approach because it provides the user with 2 visual cues (the control fades in/out and the animated gif displays a progress bar) letting the user know the panel is in the process of being refreshed.  In this sample, I use a similar approach and apply it to the asp:Wizard control. Download code | View live demo Here is the outline of the technique: Wrap the asp:Wizard within an asp:UpdatePanel (requires the Ajax.Net) Add an HTML div tag to the page containing the animated gif that will be rendered over the asp:Wizard while the panel is refreshing Set the display style to 'none' so the image is initially hidden<div id="updateProgressDiv" style="display: none; height: 40px; width: 40px"> <img src="simple.gif" /> </div> .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier,...

 I recently was working on an Asp.Net project that contained quite a few search pages.  These pages all followed a similar structured pattern where the user had a set of fields they could filter on by typing in values and pressing the search button.  The results were displayed in a GridView where the user could sort by clicking on column headers, export the results to excel, etc...  To help improve user experience, we placed each of the GridViews in an asp UpdatePanel so while the user refined the search (sorting, adding or removing additional filters), only the GridView would be refreshed and not the entire page.  Additionally, we wanted to add a few standard UI cues (disabling the Search button, fading out the GridView, and placing a progress indicator over the GridView) letting the user know an operation was currently in progress. Download Code | View live demo It turned out that adding these UI cues was pretty easy...

In the original article, I showed an example of plotting zip-code boundaries using Microsoft Virtual Earth and Ajax.Net.  I received some feedback from John (SoulSolutions) suggesting that the transmission of latitude and longitude points could be optimized by using googles compression algorithm (described here) which exploits that fact that lat/lons can benefit from compression when there is little difference between adjacent lat/longs within a given sequence.  I thought this was an interesting suggestion so I updated the example to include this compression algorithm.  Here is the rundown of the changes that I made: The ZipCodeService now returns an encoded string of lat/lons instead of the original format that had the individual lat/lons comma separated and the pair pipe separated The ZipCode.js file now contains a routine that decodes the result from the ZipCodeService and builds a VELatLong array from the decoded points I pulled over the javascript/C# source provided by John for encoding/decoding the points.  Download Code I used fiddler to check-out the difference in...

I recently used the AJAX.NET framework in a project and I was impressed with how easy it was to implement and how much it improved the usability of our pages.  Our project had quite a few advanced search pages where users can enter in a number of different filters and then hit the search button (usually iteratively - filter/search; filter/search; etc...).  Before the Ajax framework and Ajax Control Toolkit were applied to the pages, each time the user would tweak a filter or request a different column sort, the complete page would refresh.  After adding Ajax to the pages, just the GridView is re-rendered giving the user the much nicer web 2.0 user experience.  Anyway, here are the steps I followed for adding these features to our project ... Download code | View live demo Step 1: Download and install the official ASP.NET Ajax Framework Microsoft released the RTM version of the Ajax framework (previously named Atlas) for .Net 2.0...