Save & Exit in Web Application

• Sample - 9.38 KB

Introduction

BusiNewsOnline Pvt. ltd. is a largest bi-monthly magazine group which has more than 1 million subscribers. The magazine has an online subscription website through which the readers can subscribe themselves for a period of one or two years. The website has three steps or stages of registration process which can be classified as:

1. Personal details - the users are required to enter their personal details
2. Subscription details - the users will enter the subscription details
3. Payment details – the users will enter the mode of payment etc.

In every stage of the subscription, the users are required to fill lots of details starting from their surname to the credit card details.

In any stage, after filling up the form partially, if the readers mistakenly click on any other link in the site, then the entire data entered by the user is lost, and the user is forced to re-enter the details to continue the registration. 'Save&Exit' functionality comes to help during these times. This functionality is a common feature for most of the data driven websites. This article explains one of the many approaches used in conjunction with ASP.NET.

Scenario

In the middle of the registration process, users may wish to look into subscription details like the total amount, discounts etc. If the users click on any other links, then the user should be prompted to save the change before visiting any other page. This article speaks about prompting the user to “Save” and if the user wishes to save, the changes are saved before the redirection to the requested page happens.

Overview of BusiNewsOnline.com

In this article, I will create a sample web site to explain “Save & Exit” functionality. Let us call this web site as “BusiNewsOnline.com” (a sample website). We will add following three 3 web pages:

1. Main menu
   This is the home page of the BusiNewsOnline.com. This will display the magazines published by the BusiNewsOnline ltd. This page will also have the provision for the users to visit orders page via a button “Order”. Clicking on the order will take the users to “order.aspx”
2. Order Book
   This page captures some user details. After entering some details if the users click on the side menu or the bread crumbs, a pop-up will prompt the user to save the details. If the user clicks OK, the details are saved and the user is re-directed to the requested page. Clicking Cancel will simply re-direct. Any change in the page can be tracked by writing a simple JS OnKeyPress method.
3. My Subscription. List of subscription registered by the current user.

Implementation Details of the BusiNewsOnline.com

Since the contents of this BusiNewsOnline.com do not cater to the topic of discussion, we will not discuss much about the web site. Going forward, our discussion will go around the implementation of “Save&Exit” functionality.

In particular, we will discuss more about the implementation of the master page and the order page where the core functionality is implemented. Landing in the “orders.aspx” and making any change in the page is considered as placing an order and hence any attempt to move away from the page will always prompt the user to save the data. Clicking "OK" on the popup will call the code to save the data, and "Cancel" will discard the changes and simply redirects as per the users wish.

Here to indicate that the user code has been saved, clicking OK to the pop up will display a message in the Book Order page. Please note that the code for redirection has been commented. However clicking “Cancel” will not show any message but simply redirects.

Technical Details

I have used following feature of ASP.NET 2005 to make the site more user friendly. Mater page - BookStoreMaster.master.

It encompasses has the following contents.

1. Banner of the website
2. A side menu with two links “Main Menu” & “My Subscription”

A sitemappath control to show the current navigation

Server Side

The Master page has the following items to achieve this functionality.

1. The 'MasterJS' is a string variable exposed to content pages via the property “MasterPageJavaScript”
   C#

   private string MasterJS = string.Empty;
   public string MasterPageJavaScript
       {
           get
           {
               return MasterJS;
           }
           set
           {
               MasterJS = value;
           }
       }

2. A CommandEventHandler UpdatecallFromMasterPage which calls the Save or an update operation in the conents pages. The content page Update events are attached to this eventhandler in the Page_Init event of the respective content page. Hence clicking on the Sitemap nodes or the side menu links will fire the event UpdatecallFromMasterPage and in turn will fire the SaveAndExit event in the content pages. This is much like a multicast delegate.
   C#

   Mater Page:
           public event CommandEventHandler UpdatecallFromMasterPage;
   
           Content Pages:
   Master.UpdatecallFromMasterPage += new CommandEventHandler(SaveAndExit);
               private void SaveAndExit(object sender, CommandEventArgs e)
   {
       //Some Code here//
   }
   This is about the server side implementation.

Client Side

A JS function which prompts the user to save “PromptSave” is written in the “OrderBook.aspx”. This JS function is written in the respective content pages as the validation & error messages may vary from page to page. Hence no common Java scripts are written in the master page. This is assigned to the master page string variable “MasterJS” via the property “MasterPageJavaScript” in the page_init event of the “OrderBook.aspx”. This string, basically a description of a JavaScript function signature is attached to the Masterpage controls as follows.

1. It is attached to the sitemap node OnClick event in the SiteMapPath1_ItemCreated event.
   
   C#

   protected void SiteMapPath1_ItemCreated(object sender, SiteMapNodeItemEventArgs e)
       {        
   if ((this.MasterJS != string.Empty) && (e.Item.ItemType !=
        SiteMapNodeItemType.PathSeparator) &&
    (e.Item.ItemType != SiteMapNodeItemType.Current)
           {
               e.Item.Attributes.Add("onclick", this.MasterJS);
           }
   else if (e.Item.ItemType == SiteMapNodeItemType.Current)
           {
               e.Item.Attributes.Add("onClick", "JavaScript: return false;");
           }
   
       }

2. The same JavaScript is attached to the ‘OnClick” event of the side menu Link buttions.
   C#

   protected void lnkBookMainMenu_Clicked(object sender, CommandEventArgs e)
       {
           if (UpdatecallFromMasterPage != null)
           { 
               UpdatecallFromMasterPage(this, new CommandEventArgs(
                   "BookStoreMainMenu.aspx", ""));
           }
           else
           {
               Response.Redirect(e.CommandArgument.ToString());
        
           }
       }

A hidden variable hdnConfirmSave is passed as parameter to the PromptSave method. If the user clicks “OK”, then the value of hdnConfirmSave is set to 1. If the user clicks “Cancel”, then the value of hdnConfirmSave is set to 0.

The “Save” or the “Update” operation is called only is value of hdnConfirmSave is set 1 or only if the user clicks “OK”.

Conclusion

The entire Save & Exit functionality works as follows.

1. Whenever the page “OrderBook.aspx” loads, it attaches the JavaScript “PromptSave” to the master page controls (i.e) sitemap nodes and side menu link buttons.
2. Clicking on any of the above mentioned controls will show a messageg “Click “Ok to Save & Exit or Cancel to Exit without saving”. Clicking OK or Cancel will call the server the event “SaveAndExit”. However the value of the variable hdnConfirmSave decides whether to save the changed data or not.
3. The redirection to the requested page always happens from the content page SaveAndExit method. The URL to be redirected is sent through commandName of the commandeventarg.

(P.S)

To check the sample code create a folder as “D:\ASPNetWebsite” and open with VS2005.

Disclaimer

The company BusiNewsOnline and the website BusiNewsOnline.com refereed in this article does not represent any company as far as I know and is used for demo purpose only.