'Don't Ask Me Again' Delete Confirm Using a ModalPopup and ASP.NET's Profile Properties

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:

  1. Use the 'Reset Profile' button if you want to see the confirm dialog again
  2. I removed the connection string from the download's web.config.  You will need to point to your existing aspnetdb to run my sample locally
  3. If you delete all of the rows, the grid disappears.  The items are stored in session, so open a new browser instance if you want to keep playing with it (the 'Don't ask again' value will be remembered across sessions, but the data for the grid will not be)
  4. Edit is not implemented, but I kept the icon because I liked it.  Our application always redirects edits to a seperate page, so I raise an alert here when the button is clicked

I dug up my old Delete Confirm example and started looking into what it would take to refactor this sample to add this feature.  Below are the steps I took to accomplish this ...

Find Some Style

Often when I do research tasks I build a small demo application that is outside of our current applications codebase.  I find this gives me more freedom, flexibility and faster build times than if I try to add a test page to our main solution.  I also do this because I like to take create new styles and themes based on other cool sites I come across in my day to day web usage.  I use Yahoo! as my email client and I have my color scheme set to 'Ocean' - so for this sample, I created a GridView and ModalPopup styled controls based on the ocean color palette and icons. 

Like I have mentioned before, I primarily use IE's developer toolbar for reverse engineering colors, fonts and images.  Once I have figured out the colors and fonts and have the image files downloaded, I then create the CSS style rules for my controls.  You can view the stylesheet for the live demo here.   

Add Profile Properties Plumbing

After my GridView and ModalPopup were styled to my liking, I then moved on to reading up on ASP.NET Profile Properties.  If you aren't familiar with them, here is the lowdown:

Basically, it's a nice way to have the ASP.NET 2.0 runtime to store and fetch per-user settings.

Before you can start using the Profile Properties, you have to setup the datastore (for this sample the aspnetdb database) and add a few items to your web config.  For my sample, I installed the aspnetdb on my local SQL Server by running aspnet_regsql in a command window.  Running this command opens a wizard tool that allows you to point to the server you want the database installed on. 

After the tool finishes running you should be able to open the database and view the tables that were created.

After you have the database installed, you will need to add a few items to the web.config before you can work with the Profile Properties.  Essentially you need to tell the runtime a few things before you can use the Profile Services

1.  You need to let the runtime know that you plan on using the Profile Services, as well as the names of any properties you plan on using.  The <profile /> element is a direct child of the <system.web /> element.

2.  What provider you are using for the datastore.  The connectionStringName points to the connection string for the database I created using the aspnet_regsql utility.

There, now we have our datastore created and the runtime configured so we are just about ready to make use of the Profile Properties.

Add ASP.NET AJAX Profile Services Plumbing

So as we have our app configured now, we can reference a property called DisplayDeleteConfirm and ASP.NET will auto-magically take care of reading/writing this piece of data on a per-users basis.  But ... because we really want is to be able to read and write this property value from the browser,  we need to do a little bit more work so the ASP.NET AJAX plumbing can work with this property as well ...

1.  Add another entry to the web.config so the ASP.NET AJAX infrastructure knows about our desire to use Profile Properties from the client

2.  Configure the ScripManager (or ScriptManagerProxy) to pre-load our properties by default.  If you don't do this, you will need to make additional out of band calls to fetch this information using the load function.

Read and Write the Profile Properties From the Browser

Now that we have everything configured correctly, we can finally write some code.  Because we have registered our custom property with the ScriptManager, this property will be preloaded so we can access it from the client without doing anything special.  So in my sample site, I have a bit of JavaScript that runs when the user clicks the Delete icon () that reads this property and displays the popup only if the value of this property is false ...

If the value is false, we call __doPostBack using the button that originated the event.  Otherwise we display the popup forcing the user to confirm the delete action.

Additionally, there is a second piece of JavaScript that runs when the user dismisses the confirmation dialog by pressing the 'Yes' button.

This bit of JavaScript checks to see if the 'Don't ask again' checkbox is checked and if it is sets the DisplayDeleteConfirm property value to false, calls save on the ProfileServices object, and forces the postback ...

Now that you have all of the plumbing in place, it should be much easier to incorporate similar functionality for other areas of you application. 

If you download the sample and run it locally, you will notice that after you check the 'don't ask me again' box and click 'Yes', a new record will show up in the dbo.aspnet_Profile table ...

 

Room to Improve

As with everything, there is always room to improve it further.  My goal here was to develop a prototype, but I would like to look into the following areas further before productionalizing it ...

  1. Research if ConfirmButtonExtender can be used to replace some of the custom JavaScript calls for __doPostBack (I want to keep both Cancel buttons so I am hoping this will not be an issue)
  2. Yahoo!'s delete confirmation dialog has some nice rounded corners.  I tried (briefly) using the RoundedCornersExtender, but it looked bad.  I am assuming this is user error so I should re-investigate using this
  3. I would venture a guess that 50% of our pages includes a 'Delete Confirm' button.  It would be great if this functionality could be packaged into a component that could be reused a little better than this.

References

I have really only touched on what you can do with Profile Properties.  If this area is new to you, I would recommend reading the following references to brush up on the concepts.

  1. ASP.NET 2.0 Profile Properties
  2. Personalization and User Profiles
  3. ASP.NET AJAX Profile Information

MSDN Documentation Errors

No ones perfect.  I ran into the following minor documentation bugs while researching this topic.  Beware.

1.  Malformed XML in example: http://www.asp.net/AJAX/Documentation/Live/tutoria... I believe the Backgroundcolor and Foregroundcolor properties need to be under the <properties> tag.

2.  The code sample for save is referring to the load function: http://www.asp.net/AJAX/Documentation/Live/ClientR...

That's it.  Enjoy!


TrackBack

TrackBack URL for this entry:
http://mattberseth.com/blog-mt/mt-tb.fcgi/83

Comments


Posted by: guilherme holdack on November 7, 2007 12:00 AM

hi matt,
im from brazil, and i access your blog very very often.
yours samples are amazing!
i really appreciate them a lot.
thanks for such another sample!
very cool, indeed!

@guilherme -

Thanks guilherme. I havent recieved a lot of feedback for this post yet so I wasnt sure if I missed the boat on it or not.

Thanks for you feedback.

Matt.

Posted by: Ryan on November 16, 2007 12:00 AM

Great article. I agree with your "Room to Improve" section. I tried using a ConfirmButton combined with ModalPopupExtender to achieve the same effect sans custom-javascript, but on a gridview it caused horrible script lagging, even leading to IE7 popping up warnings about script execution delays. Im assuming it has to do with all the MPE placeholders it creates more than the confirmbutton itself. Also, for some reason this._source.name was returning empty for me. I had to switch to using this._source.id and replace all of the underscores with dollar-signs whne calling the _doPostBack method.

hi,
is it possible to get this code with vb.net?
thanks
Ruth

Hey, I dig this. Very nice layout and presentation on this tutorial.

In general, kick ass blog! Keep up the good work!

:p

Hi Matt,

Thanks for the greate tip, but after i have used it, i liked the SKIN of Yahoo-Ocean with it, but it have only classes for GridView and Modal.. so can i have the all SKIN including css for all controls??

I will appreciate it alot.

Nasser

Posted by: javid on January 15, 2008 12:00 AM

hi actualluy this problum chope my three days i did find my solution for that,but if i could have finf this blog at very first i could have saved my three days.

Great work i Really appriciate this post.
(basically i was applying theme dynamically to my website so i use profile property there,so when i publish the site it throws the exception)about the database aspnetdb.)

Posted by: Maker on February 27, 2008 12:00 AM

perfect! tanks matt

Snx for you job!
It has very much helped me!

Posted by: Lukhwa on April 2, 2008 12:00 AM

Thanks!!

Your blog helps me a lot....

Hi!
Is there a way to linkup button and ModalPopup in code, instead of property settings?
I use same button for update and delete. When user selects delete, then only Delete Confirm should popup.

Thanks in Advance

Dega

Post a comment

(If you haven't left a comment here before, you may need to be approved by the site owner before your comment will appear. Until then, it won't appear on the entry. Thanks for waiting.)

Consulting Services

Yep - I also offer consulting services. And heck, I'll do just about anything. If you enjoy my blog just drop me an email describing the work you need done.

Recent Comments

  • Dega wrote: Hi! Is there a way to linkup button and ModalPopup in code, instead of property settings? I use same...
  • Lukhwa wrote: Thanks!! Your blog helps me a lot.... ...
  • dipemelia wrote: Snx for you job! It has very much helped me! ...
  • Maker wrote: perfect! tanks matt ...
  • javid wrote: hi actualluy this problum chope my three days i did find my solution for that,but if i could have fi...
  • Nasser wrote: Hi Matt, Thanks for the greate tip, but after i have used it, i liked the SKIN of Yahoo-Ocean with...
  • Ruth wrote: hi, is it possible to get this code with vb.net? thanks Ruth ...
  • Adron wrote: Hey, I dig this. Very nice layout and presentation on this tutorial. In general, kick ass blog! Ke...