ASP.NET 伺服器端需彈出訊息時,最直覺寫 Response.Write(""),但這會導致**訊息框出現在空白頁面**,使用者關閉後才看見原頁面。本文對比三種寫法,並推薦現代前端替代方案。
Response.Write("<script>alert('彈出的訊息')</script>");
腳本注入在 `` 之前,瀏覽器優先執行 alert,阻塞頁面渲染 → **空白背景**。
Page.ClientScript.RegisterStartupScript(
this.GetType(), "alertKey",
"<script>alert('彈出的訊息');</script>", false);
腳本渲染在 `` 之前,頁面內容已顯示 → **正常頁面背景**。注意:別用 `RegisterClientScriptBlock`**,它渲染在表單開頭,同樣會阻塞。
Response.Write("<script>window.onload=function(){alert('彈出的訊息');}</script>");
確保 DOM 完全載入後再彈出,同樣避免空白頁。缺點:若頁面有其他 `onload` 會被覆蓋,建議改用 `addEventListener`。
| 方法 | 背景 | 優點 | 缺點 |
|---|---|---|---|
| Response.Write | 空白頁 | 最簡短 | 體驗極差、阻塞渲染 |
| RegisterStartupScript | 正常頁 | WebForms 官方 API、位置正確 | 需引用 ClientScriptManager |
| window.onload | 正常頁 | 無框架依賴 | 可能衝突、不支援多處註冊 |
// 伺服器端 (WebAPI / MVC Action)
public IActionResult Save(DataDto dto)
{
if (!ModelState.IsValid) return BadRequest(ModelState);
_service.Save(dto);
return Ok(new { message = "儲存成功" });
}
// 前端 (jQuery / fetch / axios)
fetch('/api/save', { method:'POST', body: JSON.stringify(data) })
.then(r => r.json())
.then(res => {
if (res.message) Swal.fire({ title: '成功', text: res.message, icon: 'success' });
// 或 Toastr, SweetAlert2, Ant Design Message 等成熟 UI 庫
});
優點:
維護舊 WebForms 專案時,請用 RegisterStartupScript 替換 `Response.Write alert`。新專務請**徹底移除伺服器端彈窗邏輯**,改用前端通知庫 + API 回傳訊息碼,才是現代 Web 應有的體驗標準。