****有時候使用者的操作往往讓人不敢恭維,儘管再怎樣嚴密的測試
在上線後往往會因為這些可怕的操作造成抱怨!
所以在設計介面時,往往都要把各種可能的狀態做處理
今天要介紹蠻容易忽略的小地方-重複送出表單
起源於使用者不管點什麼一定都是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()來關閉遮罩