Support us .Net Basics C# SQL ASP.NET Aarvi MVC Slides C# Programs Subscribe Download

Warn user before leaving web page with unsaved changes

Suggested Videos
Part 9 - RegisterStartupScript and RegisterClientScriptBlock methods
Part 10 - ASP.NET control client id in JavaScript
Part 11 - JavaScript calendar date picker for ASP.NET



In this video, we will discuss how to warn the user before leaving web page with unsaved changes. Let us understand this with an example.



Here is what we want to do

1. When the WebForm is first loaded, the Save button must be disabled as there is nothing to save on the form.
javascript save changes before leaving page

2. As we start to type in the text box the Save button should be enabled
page closing event in javascript

3. At this point, 
a) If we try to close the browser or
b) Refresh the page by hitting F5 key or
c) If we try to navigate to another page by changing the URL in the address bar

We should get a warning message stating that we have unsaved data on the page
javascript onbeforeunload event

4. If we have some data to save in the textbox and When we hit the Save button, the data should be saved and when the page reloads the textbox should be empty and the Save button should be disabled.

5. If there is nothing to save and when we try to close or refresh or navigate to a different URL, no warning message should be displayed.

ASPX Code
<%@ Page Language="C#" CodeBehind="WebForm1.aspx.cs"
         AutoEventWireup="true"  Inherits="Demo.WebForm1" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
</head>
<body style="font-family:Arial">
    <form id="form1" runat="server">
    <asp:TextBox ID="TextBox1" runat="server" TextMode="MultiLine"
        Rows="5" Columns="30" onkeyup="hasPendingChanges()">
    </asp:TextBox>
    <br /><br />
    <asp:Button ID="Button1" runat="server" Text="Save" disabled="true"
        OnClientClick="onSaveButtonClick()" onclick="Button1_Click" />
    <script type="text/javascript">
        var changesSaved = true;

        function onSaveButtonClick()
        {
            changesSaved = true;
        }

        function hasPendingChanges()
        {
            changesSaved = document.getElementById('TextBox1').value.length == 0;
            document.getElementById('Button1').disabled = changesSaved;
        }

        window.onbeforeunload = function ()
        {
            if (!changesSaved)
            {
                return "You haven't saved your changes";
            }
        };
    </script>
    </form>
</body>
</html>

ASPX.CS code
using System;
namespace Demo
{
    public partial class WebForm1 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        { }

        protected void Button1_Click(object sender, EventArgs e)
        {
            // ADO.NET Code to save changes to the DB
            TextBox1.Text = "";
        }
    }
}

JavaScript with ASP.NET tutorial

2 comments:

  1. Sir,
    Is it possible to detect if Browser Refresh button is clicked or Browser Close button is clicked?

    Thanks

    ReplyDelete
  2. these videos are very usefull for beginers but plz make 1-2 video on 3-tier arch so that beginers can work in companys efficentl
    Thanks sir

    ReplyDelete

It would be great if you can help share these free resources