ClientScriptManager 類動態建立 JavaScript 詳解

其實在很多情況下都必須在頁面中動態產生 JavaScript ，

比如彈出一個頁面對話方塊，或者返回一個頁面語句，

有可能朋友會說直接使用

Response.Write(“alert(‘你好！！！’)”);

就OK了，事實上，並非如此，比如在使用 ASP.NET AJAX 架構進行 AJAX 開發時，

使用上面的語句便有可能使整個頁面載入失敗，或者使整個頁面的布局亂套，

而在 ASP.NET 中，要在頁面上以 C# 程式碼的方式動態添加 JavaScript 代碼，

事實上還是比較簡單的，這主要要歸功於 ClientScriptManager 類，

通過使用這個類的如下四個基本方法，可以實現動態在頁面中建立 JavaScript 代碼，

方法一：   RegisterClientScriptBlock

方法二：   RegisterClientScriptInclude

方法三：   RegisterStartupScript

方法四：   RegisterOnSubmitStatement

通過這四個方法基本上便可以實現動態建立 JavaScript 了。

首先是 RegisterClientScriptBlock 方法：

這個方法主要是在頁面中動態添加一些比較基本的 JavaScript 代碼，

添加的這些代碼可以寫成函數，然後可以實現多次調用，和普通的 JavaScript 基本類似。

比如實現簡單的計算機，或者實現簡單的演算法問題，均是採用這種方式進行註冊。

然後是 RegisterClientScriptInclude 方法：

這個方法和 RegisterClientScriptBlock 功能基本相同，

唯一的區別就是使用這個方法時引用的 JavaScript 是從外部參考的 .js 檔案進行動態註冊，

而 RegisterClientScriptBlock  則是使用 string

或者使用 System.Text.StringBuilder 來進行拼接字串，

然後再對這個拼接起來的字串實現註冊。

再就是 RegisterStartupScript 方法：

這個方法呢，又有一些不同，

這個方法一般來說只是對於只要執行一次的 JavaScript 語句進行註冊，

比如在某處彈出一個錯誤或者提醒對話方塊之類的，僅僅是單條或者多條，

且只需執行一次的語句。

最後便是 RegisterOnSubmitStatement 方法了：

這個方法呢，比較特殊，

因為它註冊的 JavaScript 代碼只有在整個頁面要進行回傳時才會執行，

也就是當使用這個方法註冊的 JavaScript 代碼將會在頁面回傳的時候執行，

所以如果要是想取消頁面回傳的話，可以使用這個方法定義 JavaScript 語句，

比如 return confirm(“確認要提交頁面？”);

四種方法除了 RegisterClientScriptInclude 外，

其他三種使用的 JavaScript 代碼都是通過拼接的形式產生，

只有 RegisterClientScriptInclude 是引用外部的現成的 .js 檔案

還有一定要提醒的就是，

當使用四種方法中的同一種註冊多個 JavaScript 程式碼片段時，

在執行時，有可能不會按照您註冊的順序先後執行，而是亂序執行的，

要想要先後順序執行，

那麼可以將所有的 JavaScript 程式碼片段按順序寫在同一個程式碼片段中同時註冊，

以上便是四種方法的介紹了，

接下來便要順便介紹和上面四個相對應的幾個方法，

由於在註冊一段 JavaScript 代碼時，是根據類型和 key 來進行區分的，

而類型主要是區分多個頁面之間的 JavaScript 程式碼片段，

而 key 則是區分同一個頁面中的 JavaScript 程式碼片段，

所以在對一段 JavaScript 代碼進行註冊時，

必須先判斷將要註冊的類型和索引值是否已經被註冊，

所以有下面的四種對應方法來進行判斷

RegisterClientScriptBlock -------- IsClientScriptBlockRegistered (Type,Key)

RegisterClientScriptInclude -------- IsClientScriptIncludeRegistered (Type,Key)

RegisterStartupScript -------- IsStartupScriptRefistered (Type,Key)

RegisterOnSubmitStatement -------- IsOnSubmitStatementRegisterd (Type,Key)

接下來便看一個執行個體吧：

相對於的 HTML ，其中無任何 JavaScript 代碼，

也並沒有在任何控制項中添加任何的用戶端事件

<form id="form1" runat="server">
<div>
    <br />
    姓名&nbsp;
    <asp:TextBox ID="txtName" runat="server"></asp:TextBox>
    &nbsp;<asp:Label ID="lblMsg" runat="server"></asp:Label>
    <br />
    <br />
    年齡&nbsp;
    <asp:TextBox ID="txtAge" runat="server"></asp:TextBox>
    <br />
    <br />
    <input id="Submit1" type="submit" value="提交頁面" /><br />
    <br />
</div>
</form>

一載入頁面就回彈出一個網友對話方塊，

這是使用 RegisterStartupScript 註冊的一條 JavaScript 代碼

 

伴隨著姓名上字元的輸入，會使用 JavaScript 自動計算出輸入的字元數並且顯示，

這個是使用 RegisterClientScriptBlock 實現的 JavaScript 的註冊

 

對於輸入的年齡，也會使用 JavaScript 判斷是否在 15—35 之間，

每當 txtAge 失去焦點便會調用使用 RegisterClientScritpInclude

進行註冊的 JavaScript 代碼進行驗證

 

最後就是提交網頁時也會彈出一個對話方塊，詢問使用者是否確認提交頁面

這個是使用 RegisterOnSubmitStatement 註冊的 JavaScript 實現的

 

具體的代碼實現

Type myType;
ClientScriptManager myScriptManager;

protected void Page_Load(object sender, EventArgs e)
{
    myType = this.GetType();
    myScriptManager = Page.ClientScript;

    StringBuilder strBuilder = new StringBuilder();
    strBuilder.Append("function GetNameCount(name) {");
    strBuilder.Append("var lblMsg = document.getElementById('lblMsg');");
    strBuilder.Append("lblMsg.innerText = name.length;");
    strBuilder.Append("}");

    string jsStrStartUp = "alert('歡迎大家來到 BaoBeiMe 的個人部落格');";

    string jsStrOnSubmit = "alert('你正在執行提交頁面的過程');" +

                           "return confirm('確認要提交整個頁面？')";

    string keyBlock = "Block";
    string keyStartUp = "StartUp";
    string keyOnSubmit = "OnSubmit";
    string keyInclude = "Include";

    if (!myScriptManager.IsStartupScriptRegistered(myType, keyStartUp))
    {
        myScriptManager.RegisterStartupScript(myType, keyStartUp, jsStrStartUp, true);
    }

    if (!myScriptManager.IsClientScriptBlockRegistered(myType, keyBlock))
    {
        myScriptManager.RegisterClientScriptBlock(myType,

                        keyBlock, strBuilder.ToString(), true);
    }
    txtName.Attributes.Add("onkeyup", "GetNameCount(this.value)");

    if (!myScriptManager.IsOnSubmitStatementRegistered(myType, keyOnSubmit))
    {
        myScriptManager.RegisterOnSubmitStatement(myType,

                        keyOnSubmit, jsStrOnSubmit);
    }

    if (!myScriptManager.IsClientScriptIncludeRegistered(myType, keyInclude))
    {
        myScriptManager.RegisterClientScriptInclude(myType,

                        keyInclude,ResolveClientUrl("~/JavaScript/ForThree_2.js"));
    }
    txtAge.Attributes.Add("onblur", "CheckAge(this.value)");
}

引用的 JavaScript 檔案

function CheckAge(age) {
    if (age < 15 || age > 35) {
        alert("不再年齡範圍內");
    }
}

                                        2010—1 —23 晚