Matt Berseth

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...

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....

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 -...

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...

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 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...

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...

As mentioned in my previous post, I am currently researching different ways my current projects web application can better leverage the Virtual Earth Map Control. Currently, we have a single page buried deep in our sitemap that users can use to view an aerial photo of a particular property.  Users love the mapping feature and have requested that it be made available on more of our screens.  Our applications most heavily used screen allows users to search for real estate that is currently for sale.  The page is setup as a standard search page with a handful of input elements at the top of the page that the user enters parameters into.  When they click search, we run fetch the records that meet their criteria and populate a GridView with the results.  We thought it might be interesting if we could display the Virtual Earth Map as a popup right on this search screen.  To see what this would take I created a sample page that displays the names, address and geo information from...

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...

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 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...