[ASP.NET] 在網頁上執行靜態 JavaScript 的超級小技巧

我想, 凡是已經寫 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 關閉。

當然, 既然可以顯示成功畫面, 它也可以顯示失敗畫面。自己試試吧!