[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()來關閉遮罩

程式宅急便

2013年1月9日星期三