Отключите кнопки на сообщении назад с помощью jQuery в приложении .NET
У меня есть приложение asp.net, что я хочу отключить кнопки, как только они нажаты для предотвращения нескольких представлений. Я хотел бы использовать jQuery для этого, поскольку сайт уже подробно использует его так или иначе.
То, что я попробовал:
$(document).ready(function () {
$("#aspnetForm").submit(function () {
$('input[type=submit]', $(this)).attr("disabled", "disabled");
})
});
Вышеупомянутое отключит кнопку, и страница отправляет, но кнопку asp.net по щелчку обработчик никогда не называют. Просто удаление вышеупомянутого и кнопок работает нормальным.
Существует ли лучший путь? Или, скорее что я делаю неправильно?
ОБНОВИТЕ Хорошо, у меня наконец было немного времени для соединения очень простой страницы.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="SubTest.aspx.cs" Inherits="MyTesting.SubTest" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#form1").submit(function () {
$('input[type=submit]', $(this)).attr("disabled", "disabled");
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Button" />
<asp:Button ID="Button2" runat="server" onclick="Button2_Click" Text="Button 2" />
</div>
</form>
</body>
</html>
Код позади похож:
using System;
namespace MyTesting {
public partial class SubTest : System.Web.UI.Page {
protected void Page_Load(object sender, EventArgs e) {
if (IsPostBack) {
// this will execute when any button is pressed
Response.Write("postback");
}
}
protected void Button1_Click(object sender, EventArgs e) {
// never executes
System.Threading.Thread.Sleep(1000);
Response.Write("Button 1 clicked<br />");
} // method::Button1_Click
protected void Button2_Click(object sender, EventArgs e) {
// never executes
System.Threading.Thread.Sleep(1000);
Response.Write("Button 2 clicked<br />");
} // method::Button2_Click
}
}
При нажатии на кнопку, она, очевидно, отключает кнопки, но НИ ОДНИ из нажатий кнопок не выполняются.
Представленный HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
</title>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#form1").submit(function () {
$('input[type=submit]', $(this)).attr("disabled", "disabled");
});
});
</script>
</head>
<body>
<form name="form1" method="post" action="SubTest.aspx" id="form1">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTcxODU4OTc0MWRkParC5rVFUblFs8AkhNMEtFAWlU4=" />
</div>
<div>
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWAwKB57WhCAKM54rGBgK7q7GGCC6LlWKFoij9FIBVuI0HOVju/fTy" />
</div>
<div>
<input type="submit" name="Button1" value="Button" id="Button1" />
<input type="submit" name="Button2" value="Button 2" id="Button2" />
</div>
</form>
</body>
</html>
3 ответа
Вы можете сделать это немного по-другому, например:
$(function () {
$("#aspnetForm").submit(function () {
$('input[type=submit]').click(function() { return false; });
});
});
Это делает будущие клики неэффективными, в основном заставляя их ничего не делать. Когда вы отключаете ввод, он также удаляет пару ключ / значение из отправки с , поэтому ваше действие на стороне сервера, которое запускается им, не работает.
Стоит отметить, что в jQuery 1.4.3 вы сможете сократить это до:
$(function () {
$("#aspnetForm").submit(function () {
$('input[type=submit]').click(false);
});
});
Отключение кнопки до отправки имеет два эффекта: -
a) Кнопка принимает отключенный вид.
b) Значение кнопки не размещается в параметрах формы.
Если значение кнопки не отправляется на сервер, ASP.Net не знает, какая кнопка была нажата, и поэтому не запускает соответствующий обработчик OnClick.
Чтобы проверить, добавьте следующее в ваш код
protected void Page_Load(object sender, EventArgs e)
{
Response.Write("Load " + IsPostBack + "<br />");
foreach (string s in Request.Form.AllKeys)
{
Response.Write(string.Format("s:'{0}' = {1}<br />", s, Request.Form[s]));
}
}
А затем запустите страницу (как с J.S. для отключения кнопок, так и без него). Если значение кнопки не отправляется на сервер, ASP.Net не знает, какая кнопка была нажата, и поэтому не запускает соответствующий обработчик OnClick.
Еще одно наблюдение. В качестве альтернативы вы можете заблокировать пользовательский интерфейс с помощью красивого оверлейного сообщения о занятости.
Разметка:
$(function() { // when document has loaded
($.unblockUI); //unlock UI
//Show busy message on click event and disable UI
$('#btnHelloWorld').click(function() {
$.blockUI({ message: '<h4><img src="busy.gif" />Please wait...</h4>' });
});
});
<asp:Button ID="btnHelloWorld" runat="server" Text="Hello World" /><br/>
Код, стоящий за:
Protected Sub btnHelloWorld_Click(ByVal sender As Object, ByVal e As EventArgs) Handles btnHelloWorld.Click
Label1.Text = "Hello World"
Threading.Thread.Sleep(5000)
End Sub
Ознакомьтесь с подключаемым модулем jQuery BlockUI