Мы должны запретить или предложить пользователю, что при выполнении этих действий он потеряет свои данные.
- Нажмите кнопку браузера назад.
- Нажмите на кнопку обновления браузера.
- Нажмите на кнопку закрытия браузера.
- Нажатие кнопки браузера вперед.
- Клавиатура - Alt + F4 (Закрыть)
- ход клавиатуры - F5 (Обновить)
- Ход клавиатуры - CTRL + F5 (Обновить)
- Ход клавиатуры - Shift + F5 (Обновить)
- Смена URL
- Или что-либо, что вызывает обратную передачу, кроме вашей конкретной кнопки отправки.
Чтобы объяснить, что я использовал два текстовых поля, одну кнопку отправки Asp.net с идентификатором TestButton.
Другие элементы управления обратной передачей, которые я взял
Еще одна кнопка asp.net, один флажок со свойством autopostback true, один выпадающий список со свойством autopostback true.
Теперь я использовал все эти элементы управления обратной передачей, чтобы показать вам, что нам также нужно показать пользователю подсказку о потере данных при выполнении пользователем действий с этими элементами управления.
На кнопке отправки мы не будем отображать приглашение, так как нам нужно отправить данные с этим действием элемента управления. Вот пример кода. Я установил метод window.onbeforeunload при изменении элементов управления.
<html >
<head id="Head1">
<title></title>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function()
{
// Prevent accidental navigation away
$(':input').bind(
'change', function() { setConfirmUnload(true); });
$('.noprompt-required').click(
function() { setConfirmUnload(false); });
function setConfirmUnload(on)
{
window.onbeforeunload = on ? unloadMessage : null;
}
function unloadMessage()
{
return ('You have entered new data on this page. ' +
'If you navigate away from this page without ' +
'first saving your data, the changes will be lost.');
}
window.onerror = UnspecifiedErrorHandler;
function UnspecifiedErrorHandler()
{
return true;
}
});
</script>
</head>
<body>
<form id="form1" name="myForm" runat="server">
<div>
First Name :<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><br />
<br />
Last Name :<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox><br />
<br />
IsMarried :<asp:CheckBox ID="CheckBox1" runat="server" /><br />
<br />
<asp:Button runat="server" ID="TestButton" Text="Submit" CssClass="noprompt-required" /><br />
<br />
<br />
<br />
<br />
<asp:Button runat="server" ID="AnotherPostbackButton" Text="AnotherPostbackButton"
/><br />
<br />
<asp:CheckBox runat="server" ID="CheckboxWhichCausePostback" Text="CheckboxWhichCausePostback"
AutoPostBack="true" /><br />
<br />
DropdownWhichCausePostback<asp:DropDownList runat="server" ID="DropdownWhichCausePostback"
AutoPostBack="true">
<asp:ListItem Text="Text1"></asp:ListItem>
<asp:ListItem Text="Text2"></asp:ListItem>
</asp:DropDownList>
<br />
<br />
</div>
</form>
</body>
Выше я использовал:
$('.noprompt-required').click(function() { setConfirmUnload(false); });
Что я сделал в этой строке, так это то, что я вызываю setConfirmUnload метод и передаю false в качестве аргумента, который установит window.onbeforeunload в ноль.
Так что это означает, что на любом элементе управления, где вы хотите, чтобы пользователь не запрашивался, присвойте этому элементу управления класс .noprompt-required и оставьте другой как есть.