"Your work will be lost. Do you want to exit? YES|NO" message after click on browser back button

Question

User-1546622187 posted

Hi, I'm implementing a Web Application using ASP.NET MVC and razor view sintax for View(s). 

Initially, I want to disable the back button on the browser (to test my app I'm using Google Chrome), but doing some searches on internet, it is not recommended. So, I want something like this: if a user click on the back button of the browser, a message appears: 

"YOU WORK WILL BE LOST. DO YOU WANT TO EXIT FROM THIS PAGE? YES | NO"

• YES: the back page is re-loaded
• NO: nothing happens. The user "remains" on the current page  

How I can do this in my .cshtml View? 

Answer 1

User-821857111 posted

Set a boolean variable in Javascript called unsavedchanges and if the content of a textarea/textbox changes, set it to true. Once you have detected that the user has saved their work, set it to false. Then add this:

$(window).on('beforeunload', function () {
    if (unsavedChanges) {
        return confirm();
    }
});

Answer 2

User-17257777 posted

Hi nopatchforhumancruelty,

As Mike said, you can use 'beforeunload' event to confirm when you leave the current page. However, you have no way to customize the message "Changes you made may not be saved" since it is widely considered a security issue in chrome, and most vendors have removed support.

For more details, refer to

https://stackoverflow.com/questions/40570164/how-to-customize-the-message-changes-you-made-may-not-be-saved-for-window-onb

Best Regards,

Jiadong Meng

Answer 3

User-1546622187 posted

Hi, I don't want that the user save something. So, this page in a result search page. If the user click on back arrow in browser, i obtain an empty result search page.  So, to say this to user I want to use the box DO YOU WANT TO BLABLABLA. 

Your answer, that is correct, is too "hard"

Answer 4

User-821857111 posted

If you want to retain a search result, make the form that submits the search criteria use the GET method rather than POST. Then the search criteria appears as part of the URL (in the query string). Since this forms part of the URL, this information is retained as part of the browser history. Clicking the Back button will effectively result in the same search being processed again.