輸入型頁面儲存時遮罩效果避免再次提交的方法
阿新 • • 發佈:2019-02-20
其實本人的目的是想試驗一個這樣的功能,前臺的按鈕在後臺事件中能給其他伺服器控制元件賦值,特別是GridView繫結資料這種,但是由於資料量多,這個過程會比較慢,又想在前臺加一個等待的遮罩提示,直到資料完全繫結到GridView上,遮罩層才消失。這就必須用Ajax。
剛發現了一種不需要Ajax的方法,但是重新整理了整個頁面,悲劇。若按鈕事件執行完後,就跳轉去其他頁面,就不用介意是否重新整理本頁面了,最好是輸入型頁面,不適合資料查詢類頁面。先見程式碼,
頁面程式碼:
<asp:Label ID="lblName" runat="server">abc</asp:Label> <asp:Button ID="btnNone" runat="server" Text="None" OnClientClick="javascript: bsl_showLoadingDialog('請稍等');" onclick="btnNone_Click" />
JS程式碼:
<script language="javascript" type="text/javascript" src="JScripts/jquery-1.8.3.js"></script> <script language="javascript" type="text/javascript" src="JScripts/jquery-ui-1.9.2.custom.min.js"></script> <link type="text/css" rel="Stylesheet" href="Css/jquery-ui-1.9.2.custom.min.css" /> <script language="javascript" type="text/javascript"> var loadingDialog = $('<div id="dialog" title="" width="100%"><p class="center"><img src="Images/loading.gif"/></p><br/><p class="center">Please wait for a little while.</p></div>'); function bsl_showLoadingDialog(title) { //此處是一個遮罩效果 loadingDialog.dialog({ modal: true, title: title, width: 400, height: 300, closeOnEscape: false, resizable: false }); loadingDialog.parent().find('.ui-dialog-titlebar-close').hide(); } </script>
C#後臺程式碼:
protected void btnNone_Click(object sender, EventArgs e)
{
Thread.Sleep(3000); //此處睡眠3秒,模擬等待時間
lblName.Text = DateTime.Now.ToString();
}
原理分析:按鈕的客戶端Click事件添加了一個遮罩層,服務端的Click事件執行完後,由於Asp.net頁面會重新呈現Render,因此就將遮罩給去掉了