Click here to Skip to main content
15,886,110 members
Articles / Web Development / ASP.NET

Save Changes on Close of Browser or When Exiting the Page

Rate me:
Please Sign up or sign in to vote.
4.36/5 (23 votes)
24 Sep 2007CPOL4 min read 265.9K   5.2K   115  
This article will show how to save changes on the close of the browser or when exiting a page.
<%@ Page Language="VB" AutoEventWireup="true" CodeFile="SaveonClosewithJavascript.aspx.vb" Inherits="Default2" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Save on Close of Browser or Leaving the Browser</title>
   <link href="styles.css" type="text/css" rel="stylesheet" />
   <script type="text/javascript" language="javascript" src="JScript.js"></script> 
   <script>
   //Function to submit the form and call the Page_load function on server side.
   function FunctiontoCallSaveData()
   {
            document.getElementById("<%=hdtoSaveData.ClientID %>").value="PageClosed";
            document.form1.submit();           
   }
    </script>
   </head>
<body onbeforeunload="HandleOnClose(event)" onkeydown="setKeyValue(event)"> 
    <form id="form1" runat="server">
    <div>
        <table style="width: 100%">
            <tr>
                <td valign="top">
                    <table style="width: 100%">
                        <tr>
                            <td bgcolor="#3333cc" class="special">
                                Different ways to navigate to another page within the site (default save on redirect
                                not required. The save should be called within the control)</td>
                        </tr>
                        <tr>
                            <td>
                                <table border="1" bordercolor="black" cellpadding="1" cellspacing="1" style="width: 100%">
                                    <tr>
                                        <td align="center">
                                            1</td>
                                        <td>
                                            Link buttons</td>
                                        <td align="center" width="25%">
                                            <asp:LinkButton ID="LinkButton1" runat="server">Click Me</asp:LinkButton></td>
                                    </tr>
                                    <tr>
                                        <td align="center">
                                            2</td>
                                        <td>
                                            Submit Buttons</td>
                                        <td align="center" width="25%">
                                            <asp:Button ID="Button1" runat="server" Text="Click Me" /></td>
                                    </tr>
                                    <tr>
                                        <td align="center">
                                            3</td>
                                        <td>
                                            Image Buttons</td>
                                        <td align="center" width="25%">
                                            <asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="~/next_btn.gif" /></td>
                                    </tr>
                                    <tr>
                                        <td align="center">
                                            4</td>
                                        <td>
                                            Any control with Autopostback</td>
                                        <td align="center" width="25%">
                                            <asp:DropDownList ID="DropDownList2" runat="server" AutoPostBack="True">
                                                <asp:ListItem Selected="True">Select</asp:ListItem>
                                                <asp:ListItem>Value 1</asp:ListItem>
                                                <asp:ListItem>Value 2</asp:ListItem>
                                                <asp:ListItem>Value 3</asp:ListItem>
                                                <asp:ListItem>Value 4</asp:ListItem>
                                            </asp:DropDownList></td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                How does save work for the above controls? <a href="Explain.htm" runat="server" id="myhref1">Answer</a></td>
                        </tr>
                    </table>
                </td>
                <td rowspan="2" style="width: 25%" valign="top">
                    <table style="width: 100%">
                        <tr>
                            <td colspan="2">
                                Change data here to save</td>
                        </tr>
                        <tr>
                            <td style="width: 100px">
                                Text Info</td>
                            <td style="width: 100px">
   <asp:TextBox ID="mytxt" runat="server" BorderStyle="Groove"></asp:TextBox></td>
                        </tr>
                        <tr>
                            <td colspan="2">
                                Should
   Error Occur and be captured in the DB</td>
                        </tr>
                        <tr>
                            <td colspan="2">
                                <asp:DropDownList ID="drpError" runat="server">
   <asp:ListItem Text="Yes" Value="Yes"></asp:ListItem>
   <asp:ListItem Text="No" Value="No"></asp:ListItem>
   </asp:DropDownList></td>
                        </tr>
                    </table>
    <asp:HiddenField ID="hdtoSaveData" runat="server" EnableViewState="true" />
   <asp:HiddenField ID="hdError" runat="server" /> 
                    <br />
                    <table style="width: 100%">
                        <tr>
                            <td>
                                <table style="width: 100%">
                                    <tr>
                                        <td bgcolor="#3333cc" class="special">
                                            Data in table to be saved.</td>
                                    </tr>
                                    <tr>
                                        <td>
                                       <div style="overflow:scroll;overflow-x:hidden; height:250px" >
                                            <asp:GridView ID="grdData" runat="server" AutoGenerateColumns="False" CellPadding="4"
                                                ForeColor="#333333" GridLines="None" Width="100%" ShowHeader="false">
                                                <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
                                                <Columns>
                                                    <asp:BoundField HeaderText="Data in Table" DataField="name" />
                                                </Columns>
                                                <RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
                                                <EditRowStyle BackColor="#999999" />
                                                <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
                                                <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
                                                <HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
                                                <AlternatingRowStyle BackColor="White" ForeColor="#284775" />
                                            </asp:GridView></div>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                        <tr>
                            <td>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr>
                <td valign="top">
                    <table style="width: 100%">
                        <tr>
                            <td bgcolor="#3333cc" class="special">
                                Different ways to navigate to another page not within the current site. (Save on
                                redirect need to be called as the proper source element is not known through which
                                the navigation happened.)</td>
                        </tr>
                        <tr>
                            <td>
                                <table border="1" bordercolor="black" cellpadding="1" cellspacing="1" style="width: 100%">
                                    <tr>
                                        <td align="center">
                                            1</td>
                                        <td>
                                            Back button on the Browser Toolbar</td>
                                        <td align="center">
                                            9</td>
                                        <td>
                                            Typing a URL and navigating to a different page</td>
                                    </tr>
                                    <tr>
                                        <td align="center">
                                            2</td>
                                        <td>
                                            Refresh button on the Browser Toolbar</td>
                                        <td align="center">
                                            10</td>
                                        <td>
                                            Selecting a URL from the favorites toolbar</td>
                                    </tr>
                                    <tr>
                                        <td align="center">
                                            3</td>
                                        <td colspan="3">
                                            Close button on the Browser Toolbar</td>
                                    </tr>
                                    <tr>
                                        <td align="center">
                                            4</td>
                                        <td colspan="3">
                                            Home button on the Browser Toolbar</td>
                                    </tr>
                                    <tr>
                                        <td align="center">
                                            5</td>
                                        <td colspan="3">
                                            ALT + F4 to close the browser</td>
                                    </tr>
                                    <tr>
                                        <td align="center">
                                            6</td>
                                        <td colspan="3">
                                            CTRL + F4 (for tabbed browsers)</td>
                                    </tr>
                                    <tr>
                                        <td align="center">
                                            7</td>
                                        <td colspan="3">
                                            F5 or CTRL + R or Right click for refresh</td>
                                    </tr>
                                    <tr>
                                        <td align="center">
                                            8</td>
                                        <td colspan="3">
                                            ALT + Home button (to navigate to client's Home page)</td>
                                    </tr>
                                    <tr>
                                        <td align="center">
                                            8</td>
                                        <td colspan="3">
                                            Click backspace (alternative for Back button)</td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                How does save work for the above actions? <a href="Explain.htm" runat="server" id="myhref2">Answer</a></td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr>
                <td colspan="2" valign="top">
                                <table style="width: 100%">
                                    <tr>
                                        <td bgcolor="#3333cc" class="special">
                                            Data in Error Log Table.</td>
                                    </tr>
                                    <tr>
                                        <td>
                                       <div style="overflow:scroll;overflow-x:hidden; height:110px" > 
                                            <asp:GridView ID="grdError" runat="server" AutoGenerateColumns="False" CellPadding="4"
                                                ForeColor="#333333" GridLines="None" Width="100%" ShowHeader="false">
                                                <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
                                                <Columns>
                                                    <asp:BoundField HeaderText="Error" DataField="name" />
                                                </Columns>
                                                <RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
                                                <EditRowStyle BackColor="#999999" />
                                                <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
                                                <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
                                                <HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
                                                <AlternatingRowStyle BackColor="White" ForeColor="#284775" />
                                            </asp:GridView></div>
                                        </td>
                                    </tr>
                                </table>
                </td>
            </tr>
        </table>
   
    </div>
    </form>
</body>
</html>

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Architect Spozzle
India India
A highly experienced and influential Technical Manager / Team Leader and Architect, an inspirational leader who has effectively managed, developed and motivated internal and external teams. Strong ability to quickly understand and analyze business strategies ensuring technology solutions meet business requirement, to quickly adapt to all new technologies and challenges.

My attention to detail, high technical aptitude and hands on approach together with a high degree of motivation and professionalism would make me an asset to any progressive organization or demanding position within IT industry.

What do I do?

I work at Spozzle(www.spozzle.me) as a Software Architect and currently working on the following technologies.

Web Technologies using

Java
PHP
XCode 4 and IPhone Development
HTML 5 and CSS
Android Development

My Experience

I have spent my last 7 years working on .NET Technology building application both on the Web and Windows.

I provide Technical consultations to people on

- .NET Development, Best Practices and Issues
- Best Practices on Web based Architecture and Hosting applications on Cloud.

I have not moved on to PHP, Java and Mobile Development. I now work at Spozzle developing really cool application for the Sports Fanatics on Facebook. Checkout http://apps.facebook.com/spozzle

Comments and Discussions