It happens very often that people, the users of your application loose their changes because the accidentally closed a browser window or browser tab. Specially because all browsers now support tabs, which is not something all non-technical users completely understand.
There is however something you can use to partly overcome this issue. In the year 2004 there was an article about this on 4guysfromrolla.com. This article explains excellently how to make use of the window.onbeforeunload event in Javascript.
I thought about this a few minutes and got the following example on how to integrate this inside your Silverlight application.
First of all I wanted this window.onbeforeunload Javascript event to call a method inside my Silverlight application. So I wrote a small method that can be called inside Silverlight.
1 [ScriptableMember]
2 public string OnBeforeUnload()
3 {
4 return "Warning you're closing...";
5 }
Besides that it also needs to be registrated in Javascript.
const string scriptableObjectName = "Bridge";
HtmlPage.RegisterScriptableObject(scriptableObjectName, this);
So now we have a method that can be called from Javascript. Let’s start listening to this Javascript event from Silverlight.
string pluginName = HtmlPage.Plugin.Id;
HtmlPage.Window.Eval(string.Format(
@"window.onbeforeunload = function () {{
var slApp = document.getElementById('{0}');
var result = slApp.Content.{1}.OnBeforeUnload();
if(result.length > 0)
return result;
}}", pluginName, scriptableObjectName)
);
This does work. But do we want to always show a message? Or do we only want to show the message if it’s relevant? I think the choice will be the last, at least for me it will. So what about an IsDirty check? I created a very simple non-real one. Because of the sake of the article, it’s about the message when closing, right?
private bool isDirty = true;
public bool IsDirty
{
get
{
bool tempDirty = this.isDirty;
this.isDirty = false;
return tempDirty;
}
}
Let’s combine this with our OnBeforeUnload method in Silverlight.
[ScriptableMember]
public string OnBeforeUnload()
{
if (IsDirty)
return "The page is dirty. Are you sure you want to close?";
return string.Empty;
}
When you take a close look at my implementation of IsDirty, you’ll see it’s only dirty the first time, the second time it’s not. Now when you try to exit the page by one of the following ways, you’ll get this message:
- By closing Tab;
- By closing Window;
- By changing to a different url;
When you press Cancel you will actually stay on the page. The thing is we only have influence on the text in the middle. I have been thinking about different solutions, by using for example a dialog in Silverlight, but sadly this is just not possible. The function window.onbeforeunload only accepts a message that it can show. When nothing is return on the event, it just closes.
For your convenience the complete code of Page.xaml.cs.
1 public partial class Page : UserControl
2 {
3 private bool isDirty = true;
4 public Page()
5 {
6 InitializeComponent();
7 RegisterOnBeforeUnload();
8 }
9
10 public void RegisterOnBeforeUnload()
11 {
12 //Register Silverlight object for availability in Javascript.
13 const string scriptableObjectName = "Bridge";
14 HtmlPage.RegisterScriptableObject(scriptableObjectName, this);
15 //Start listening to Javascript event.
16 string pluginName = HtmlPage.Plugin.Id;
17 HtmlPage.Window.Eval(string.Format(
18 @"window.onbeforeunload = function () {{
19 var slApp = document.getElementById('{0}');
20 var result = slApp.Content.{1}.OnBeforeUnload();
21 if(result.length > 0)
22 return result;
23 }}",pluginName,scriptableObjectName)
24 );
25 }
26
27 [ScriptableMember]
28 public string OnBeforeUnload()
29 {
30 if (IsDirty)
31 return "The page is dirty. Are you sure you want to close?";
32 return string.Empty;
33 }
34
35 public bool IsDirty
36 {
37 get
38 {
39 bool tempDirty = this.isDirty;
40 this.isDirty = false;
41 return tempDirty;
42 }
43 }
44 }
should be document.getElementById('{0}');
The thing you're mentioning has something to do with the editor changes ' into ’.
Thanks.
Thanks
Nice and Quick work around.... but how to do this if Application is Out Of Browser
I don't know about any solution in the Out-of-Browser case, yet.
Thanks
Adam
I got the same blank one until I realised how silly it was - Did you actually give a ID to the main page div - that will solve it.
Hi Mark,
great article - but am facing yet another problem. I need to call logout when browser closes - if I send a logout message on beforeunload function it is blocked until the string is returned :(
I was trying to return a blank string - problem is if the user presses 'cancel' i cannot logout.
Is there a way to catch if 'ok' or 'cancel' is pressed or is there a way to not show 'cancel' button at all.
Any pointers will be very useful
Cheers
Krish
How Can we Know whether Browser is Closed are Refreshed in Silverlight Please Help.
Coz for Both Refresh and Close OnbeforeUnload is Executing. Then How Can we Know whether
Browser is Closed are Refreshed.i wnt to Clear my Isolatedstorage Settings once the Browser is Closed.
Thanks and Regards,
Muneer
I'm not aware of anyway to find out the difference between close and refresh.
-
Mark Monster
What a great idea! Thanks for sharing your code. It works like a charm. Of course only after I gave my silverlight object a ID. Thanks Krish! I was wondering what went wrong.
I am using SL4, IE and VWD2010. Any idea why? Thanks.
Regards
Neha
just like what lance want, i would also like a notification to the silverlight app if user selected OK.
<!--Navigate toolBar Here-->
i want to do like this:
when user update something on page supportingDocumentManager and then jump to QAManager give save message.
the mainpage.xaml :
private void SplitButton_Click(object sender, System.Windows.RoutedEventArgs e)
{
RadRibbonSplitButton radRibbonSplitButton = sender as RadRibbonSplitButton;
if (radRibbonSplitButton != null)
{
string boardName = radRibbonSplitButton.Name.ToString();
NavigateTo(boardName);
}
}
private void NavigateTo(string pageName)
{
App.currentSelectedMenu = pageName;
this.navigateFrame.Navigate(new Uri(pageName, UriKind.Relative));
}
how can i to do it
If I can get this to work, you've provided me with a perfect solution to my SL4 app problem I've been trying to solve off and on for months.
The trouble with my implementing your code is similar to one that another developer posted to you in a separate blog. My plugin name/ID is always returning an empty string, even though it appears I've followed your steps to a T (but must be missing something, unless it's possibly because I'm using Chrome 8...?).
Here's my .html and .aspx files' body definition:
<a href=" http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50401.0" rel="nofollow">
</a>
And here's my SL4/C# code:
public void RegisterOnBeforeUnload()
{
//Register Silverlight object for availability in Javascript.
const string scriptableObjectName = "Bridge";
HtmlPage.RegisterScriptableObject(scriptableObjectName, this);
//Start listening to Javascript event.
string pluginName = HtmlPage.Plugin.Id;
HtmlPage.Window.Eval(string.Format(
@"window.onbeforeunload = function () {{
var slApp = document.getElementById(’{0}’);
var result = slApp.Content.{1}.OnBeforeUnload();
if(result.length > 0)
return result;
}}", pluginName, scriptableObjectName)
);
}
This line:
string pluginName = HtmlPage.Plugin.Id;
Simply always returns ""
Hope you (or someone else?) can help me soon - thanks in advance!!
System.Windows.Browser.HtmlPage.Window.Eval(
@"window.onbeforeunload = function ()
{
var host = document.getElementById('silverlightControlHost');
var result = host.firstChild.Content." + scriptableObjectName + @".OnBeforeUnload();
if (result.length > 0)
return result;
}");
Thanks for this great article.
SL4, VS2010
I'm using Chad alteration to the code, but I'm getting an error
Line: 4
Error: Unable to get value of the property 'Bridge': object is null or undefined.
Great article, its given me an idea of how to implement it for stuff that usually only works for asp.
But my "SaveUserConfig" method in Silverlight is asyn, it doesn't get finished before the html page is closed, and the operation gets cancelled/aborted, so the user's config doesn't get saved.
Any idea of how to solve that? Thanks a lot!
I am with doubts. You have the project to send me?
Thank you.