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.
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 aspnetdb to run my sample locally
- 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)
- 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 ...
) 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 ...
- 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)
- 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
- 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.
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!
No comments:
Post a Comment