我想, 凡是已經寫 ASP.NET 很久的程式設計師, 一定都知道如何透過 RegisterStartupScript(key, script) 和 RegisterClientScriptBlock(key, script) 這兩種指令在頁面中插入動態的 JavaScript 程式。但是只有這種方法嗎? 以下, 我要示範一個「超級小」的技巧, 以更簡單的方式達到相同或類似的功能。只不過, 這種方式比較適合「罐頭」式的 JavaScript 指令, 也就是比較偏向靜態、很少改變的 JavaScript 程式。我將使用 ASP.NET 的網頁的 PostBack 機制, 讓已經寫好的 JavaScript 程式在網頁 PostBack 之後自動執行...
我想, 凡是已經寫 ASP.NET 很久的程式設計師, 一定都知道如何透過 RegisterStartupScript(key, script) 和 RegisterClientScriptBlock(key, script) 這兩種指令在頁面中插入動態的 JavaScript 程式。但是只有這種方法嗎?
以下, 我要示範一個「超級小」的技巧, 以更簡單的方式達到相同或類似的功能。只不過, 這種方式比較適合「罐頭」式的 JavaScript 指令, 也就是比較偏向靜態、很少改變的 JavaScript 程式。我將使用 ASP.NET 的網頁的 PostBack 機制, 讓已經寫好的 JavaScript 程式在網頁 PostBack 之後自動執行。
那麼, 這個小技巧的使用時機是什麼時候呢? 例如, 如果我們使用 Bootstrap 的話, 它提供了一個很強大卻又簡單的 Modal 顯示機制; 在以下情境中, 我假設有一個資訊輸入網頁, 當使用者輸入成功之後, 畫面上會出現一個 Modal 視窗以通知使用者, 然後使用者可以將它關閉。
如果你不了解上面這一段是什麼意思的話, 那麼你可以在 Bootstrap 官網頁上看到示範。請把這一個示範網頁往下拉一點, 看到「Launch demo modal」按鈕之後, 把它按下去, 你就可以看到這個 Modal 是如何運作的。
那麼, 如果你要讓你的 Server Control 按鈕也有相同的功能, 你應該怎麼做?
我們可以透過 JavaScript 指令來做。也就是如同上述網頁稍下方所介紹的 $('#myModal').modal(options) 這個 jQuery 指令。
當然, 你也可以使用你最熟悉的 RegisterStartupScript(key, script) 和 RegisterClientScriptBlock(key, script) 這兩種指令, 也可以採用我在下面示範的另一種做法, 看你喜歡哪一種。
我先把 Modal 部份的 HTML 碼列出來:
<!-- Modal -->
<div class="modal fade" id="successfulModal" tabindex="-1" role="dialog" aria-labelledby="successfulModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<asp:Button ID="btnClose1" runat="server" CssClass="close pull-right" Text="×" data-dismiss="modal" />
<h4 class="modal-title">作業已成功</h4>
</div>
<div class="modal-body">
<p>
您的新增作業已完成</p>
<p>
<asp:Label ID="lbSuccessful" runat="server"></asp:Label></p>
</div>
<div class="modal-footer">
<asp:Button ID="btnClose2" runat="server" Text="結束" CssClass="btn btn-primary" data-dismiss="modal" />
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
基本上, 上面這段 tag 也是從 Bootstrap 的示範頁略加修改而來的, 裡面沒有什麼學問存在。把以上這段 tag 加入你的既有頁面的下方即可。由於它預設是不顯示的, 所以不會對你的網頁造成任何影響。如果你在這個階段竟然看得見這一段, 那表示你的 Bootstrap 設定有誤! 或許你可以參考一下「在 ASP.NET Web Form 專案中加入 Bootstrap 套件」這篇文章。
接著, 我把必須的 JavaScript 包在 <asp:PlaceHolder> 區段裡面。這一段就是技巧所在:
<asp:PlaceHolder runat="server" ID="phJavaScript" Visible="false">
<script type="text/javascript">
$(document).ready(function () {
$('#successfulModal').modal({
show: true
});
});
</script>
</asp:PlaceHolder>
把這段 JavaScript 包在一個隱藏的 PlaceHolder 裡面, 這一整段就根本不會被 render 到頁面去。然後, 我們在按鈕的 OnClick 事件處理函式中把它的 Visible 設定為 true, 等到頁面進行 PostBack 之後, 包在裡面的 JavaScript 就會自動執行了:
protected void btnSubmit_Click(object sender, EventArgs e)
{
phJavaScript.Visible = false;
...
if ( 資料輸入成功 )
{
phJavaScript.Visible = true;
}
}
如此, 當資料輸入成功後, 這個 Modal 就會自動出現:
使用者可以按下右下角的「結束」按鈕, 或者右上角的 X 按鈕, 甚至按下鍵盤上的 ESC, 都可以把這個 Modal 關閉。
當然, 既然可以顯示成功畫面, 它也可以顯示失敗畫面。自己試試吧!