按鈕加上詢問訊息

摘要:按鈕加上詢問訊息

在 ASP.NET 中 Button 是唯一預設會 PostBack 的控制項,若要在按下按鈕時,出現執行的詢問訊息,可以在 OnClientClick 屬性加入JavaScript 的 confirm 函式來處理。Button 控制項輸出到前端的 HTML 碼時,會依 UseSubmitBehavior 屬性值的 True 或 False 而有不同,而在處理詢問訊息時也會有差異。

在頁面上置放一個 Button,UseSubmitBehavior 屬性值預設為 True,將 OnClientClick 屬性值設為 "return confirm('確定執行嗎?');" 。

aspx 原始碼

輸出 HTML 原始碼

從 HTML 原始碼可以看出它的 type 是 submit,這種按鈕相當於執行 form1 的 submit,所以在 onclick 事件中無須去呼叫 __doPostBack 函式。在 onclick 的事件中,當使用者按下「是」時會傳回 True,此時就會執行 form1 的 submit 動作;當使用者按下「否」時就會傳回 False,而 form1 的 submit 動作就不會執行。

 

接下來將 Button 的 UseSubmitBehavior 屬性值預設為 False,重新執行一次看一下結果。

aspx 原始碼

輸出 HTML 原始碼

從 HTML 原始碼可以看出它的 type 是 button,它需要在 onclick 自行呼叫 __doPostBack 函式。這時去執行程式,你會發現在詢問視窗無論是按「是」或「否」,都不會有 PostBack 動作,到底發生了什麼問題呢? 

主要是 return 指令的問題,因為在 JavaScript 中只要下了 return 指令,就會跳出函式回傳值;也就是說後面的 __doPostBack 永遠不會被執行到,所以無論使用者作什麼回應都無法 PostBack。

其實只要修改一下 JavaScript 就可以正常了,將 OnClientClick 屬性值修改為 "if (confirm('確定執行嗎?')==false) {return false;}"。

aspx 原始碼

 

輸出 HTML 原始碼

這時只有當使用者按「否」時才會傳回 Fasle,而按「是」時就不會執行 return 的動作,所以就會執行後面的 __doPostBack 函式了。這種寫法就算是 Button 的 UseSubmitBehavior 屬性值預設為 True,一樣可以正常執行,所以結論就是以第二種方法來做比較具通用性。

 

ASP.NET 魔法學院