asp:Button 搭配 UseSubmitBehavior 屬性 行為觀察

1. asp:Button 搭配 UseSubmitBehavior 屬性 行為觀察
   UseSubmitBehavior="false" 配上 OnClientClick="return onClientClick()"

   表面上就是讓 Asp:Button 不會執行 Postback (不論回傳的 script 是 true/ false, 只會乖乖的執行 script 內容)

   實際上事後端的產生的 Script 檔下來 Postback 後面的內容
   ASP.NET 會產生 return onClientClick();__doPostBack('Button1','') 的 Runtime script
   由於 return 命令在 __doPostBack('Button1','') 之前
   因此 __doPostBack('Button1','') 不會被執行
   執行起來就像是一般的 Button <input type="button">
  
   UseSubmitBehavior="true"
   會執行 Javascript 但是只有 script 回傳結果為 true 時, 系統才會執行 Server 端的 script
   如同一般 <input type="submit">
  
   asp:ImageButton 與 asp:Button UseSubmitBehavior="true" 是一樣的結果
  
        protected void Button1_Click(object sender, EventArgs e)
        {  Response.Write("CLICK1");   }

        protected void Button2_Click(object sender, EventArgs e)
        {  Response.Write("CLICK2");   }

        function onClientClick() {
           if (confirm('Run Server Script'))
           {
               alert("YES");
              return true;
           }  else {
              alert("NO");
              return false;
           }
        }

        <asp:Button ID="Button1" runat="server" CommandArgument="1" onclick="Button1_Click" Text="Button1" UseSubmitBehavior="false"  OnClientClick="return onClientClick()"/>
        <asp:Button ID="Button2" runat="server" CommandArgument="2" onclick="Button2_Click" Text="Button2" OnClientClick="return onClientClick()"/>
                <asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="Query.jpg"  OnClientClick="return onClientClick()" onclick="ImageButton1_Click" style="height: 16px" />

2. Runtime result

    <input type="button" name="Button1" value="Button1" onclick="return onClientClick();__doPostBack('Button1','')" id="Button1" />
    <input type="submit" name="Button2" value="Button2" onclick="return onClientClick();" id="Button2" />
        <input type="image" name="ImageButton1" id="ImageButton1" src="Query.jpg" onclick="return onClientClick();" style="border-width:0px;height: 16px" />

3. 容易出錯的地方

   OnClientClick="return onClientClick()"
   寫成
  
   OnClientClick="onClientClick"
   Script engine 找不到一個叫做 onClientClick 的 function,
   因此這段 Button1, Button2, ImageButton1 直接 Postback  給 Server  
  
   或是
   OnClientClick="onClientClick()"
   Script engine 會找到一個 onClientClick() 的 function 並執行這段 script
   接著再執行 __doPostBack('Button1','') (若是 UseSubmitBehavior="true")
   但是不管 onClientClick() 的結果
   Button1, Button2, ImageButton1 最後還是會 Postback  給 Server
  
4. 結論
   Button/ ImageButton 務必以 return onClientClick(); 方式呼叫
   若程式不需要被 postback, onClienClick()
   最後傳回 return false;
   告知系統不需要 postback