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.
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
ASPX.CS code
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.
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>
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 = "";
}
}
}
Sir,
ReplyDeleteIs it possible to detect if Browser Refresh button is clicked or Browser Close button is clicked?
Thanks
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
ReplyDeleteThanks sir