Warn user before leaving web page with unsaved changes

Link for all dot net and sql server video tutorial playlists
http://www.youtube.com/user/kudvenkat/playlists

Link for slides, code samples and text version of the video
http://csharp-video-tutorials.....blogspot.com/2015/03

Healthy diet is very important both for the body and mind. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking our YouTube channel. Hope you can help.
https://www.youtube.com/channe....l/UC7sEwIXM_YfAMyonQ

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.

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

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

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 = "";
}
}
}