iT邦幫忙

DAY 2
6

ASP.NET Web技術小技巧分享系列 第 2

[ASP.NET]防止使用者重複送出表單的幾種方式

****有時候使用者的操作往往讓人不敢恭維,儘管再怎樣嚴密的測試
在上線後往往會因為這些可怕的操作造成抱怨!
所以在設計介面時,往往都要把各種可能的狀態做處理
今天要介紹蠻容易忽略的小地方-重複送出表單
起源於使用者不管點什麼一定都是Double Click XD
如果不防止這種情況,可能導致重複寫入資料庫,
如果資料牽扯到很多Table,後續處理就會非常的麻煩 這邊已寫入txt做範例

protected void btn_submit_Click(object sender, EventArgs e)
{
      string path = Server.MapPath("") + "\\DataFile.txt";
      //已寫入文字檔案代替寫入DB
      string tempfile = Path.GetTempFileName();
      StreamWriter writer = new StreamWriter(tempfile);
      StreamReader reader = new StreamReader(path);
      //寫入時間做紀錄
      writer.WriteLine(DateTime.Now);
	  while (!reader.EndOfStream)
            writer.WriteLine(reader.ReadLine());
	  writer.Close();
	  reader.Close();
	  File.Copy(tempfile, path, true);
	  //讓執行續休息3秒模擬DB Connection
	  System.Threading.Thread.Sleep(3000);
}

如果寫入資料很敏感,可能造成報表重複計算之類的問題
可以用以下幾種方式來處理:
1.在Server端加入防呆功能

protected void Page_Load(object sender, EventArgs e)
{
	if (!Page.IsPostBack)
	{
		//將按鈕Disable,並修改顯示文字
		btn_submit.Attributes["onclick"] = "this.disabled = true;this.value = 'Please wait..';" + Page.ClientScript.GetPostBackEventReference(btn_submit, "");
	}
}

我們可以在Page Load時將按鈕加入onclick事件
讓使用者點選時將按鈕鎖住
如是Gridview的話,可以RowDataBound事件裡動態加入

2.使用Jquery BlockUIhttp://www.malsup.com/jquery/block/ 套件

BlockUI是一個很方便能做到訊息遮罩的Jquery套件
故只要在Click時在前端加入以下程式碼即可啟用遮罩

<script src="../../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="jquery.blockUI.js" type="text/javascript"></script>
<script type="text/javascript">
   $(document).ready(function () {
	   $('input[name=btn_submit]').click(function () {
		   $.blockUI();
	   });
   });
</script>

因為.NET PostBack的特性,故會回到Page_Load裡,故不用撰寫關閉的程式
若使用Ajax,可加入$.unblockUI()來關閉遮罩


上一篇
[ASP.NET]DataTable分頁Function
下一篇
[IDE]使用Adobe Source Code Pro字型~使用Visual Studio 2010
系列文
ASP.NET Web技術小技巧分享27

2 則留言

我要留言

立即登入留言