2013年1月9日 星期三

[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);
}














如果寫入資料很敏感,可能造成報表重複計算之類的問題

可以用以下幾種方式來處理:

在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事件裡動態加入










使用Jquery BlockUI 套件


BlockUI是一個很方便能做到訊息遮罩的Jquery套件

故只要在Click時在前端加入以下程式碼即可啟用遮罩



  
 
    
    

因為.NET PostBack的特性,故會回到Page_Load裡,故不用撰寫關閉的程式

若使用Ajax,可加入$.unblockUI()來關閉遮罩



沒有留言:

張貼留言