ASP.NET 後端呼叫前端 JavaScript 五大實用技巧

場景：伺服器端完成邏輯後需觸發客戶端腳本

常見於：資料儲存後彈窗提示、關閉對話框、重新整理父頁面、觸發客戶端驗證流程等。以下五種方式各有適用情境。

1. OnClientClick（控制項層級，僅限按鈕類）

<asp:Button ID="Button1" runat="server" Text="提交" 
    OnClientClick="return client_click();" OnClick="Button1_Click" />

• client_click() 為客戶端函數，回傳 false 可取消 PostBack。
• VS2003 不支援，適用於單一按鈕的前置確認邏輯。

2. Attributes.Add("onclick", ...)

Button1.Attributes.Add("onclick", "return confirm('確定刪除？');");

• 動態註冊，可在 Page_Load 依條件決定是否綁定。
• 同樣以 return false 阻止回傳。

3. ClientScript.RegisterStartupScript（最靈活、最常用）

var sb = new StringBuilder();
sb.Append("<script language='javascript'>");
sb.Append("Button2_onclick('" + serverPath + "');");
sb.Append("</script>");
ClientScript.RegisterStartupScript(this.GetType(), "LoadPicScript", sb.ToString());

• 腳本輸出在表單結尾（</form> 前），確保頁面元素已載入。
• 可呼叫外部 .js 檔中定義的函數。
• Key 參數防止重複註冊同一腳本塊。

4. Response.Write 直接輸出腳本

Response.Write("<script type='text/javascript'>alert('完成');</script>");
// 呼叫自訂函數需頂外輸出函數定義
Response.Write("<script>function myfun(){...} myfun();</script>");

• 缺點：輸出位置不可控（可能在 <html> 前），無法直接呼叫外部檔案函數，易導致腳本錯誤。
• 僅適合極簡單、獨立的內嵌腳本。

5. ClientScript.RegisterStartupScript 簡化呼叫（本質同方式 3）

ClientScript.RegisterStartupScript(
    this.GetType(), "myscript", "<script>MyFun();</script>", false);

• 最後一個參數 false 表示不自動包裹 <script> 標籤（需自行包含）。
• 同樣可呼叫外部定義函數，執行時機在頁面載入完成後。

執行順序關鍵提醒

先執行 Client 腳本（OnClientClick/onclick），再執行 Server 端事件（OnClick）。 若客戶端回傳 false，伺服器端事件不會觸發。

選擇建議