如何：向 ASP.NET 网页动态添加客户端脚本

趋明 2012-03-13

展开全文

.NET Framework 4

其他版本

此主题尚未评级评价此主题

使用服务器代码可以向页中添加客户端脚本。当客户端脚本的内容依赖于直到运行时才可用的信息时，使用服务器代码创建客户端脚本很有用。当您希望客户端脚本在下列情况下执行时，向页动态添加客户端脚本也很有用：

当页已完成加载时
当用户提交页时

注意

还可以向各个控件添加客户端事件，如 onmouseover 和 onkeyup。有关详细信息，请参见如何：向 ASP.NET Web 服务器控件添加客户端脚本事件。

向 ASP.NET 网页动态添加客户端脚本

在服务器代码中，调用下表中列出的一种方法。

方法	说明
RegisterClientScriptBlock	向页的顶部添加一个脚本块。以字符串形式创建脚本，然后将其传递给方法，方法再将脚本添加到页中。可以使用此方法将任何脚本插入到页中。请注意，脚本可能在所有元素完成之前呈现到页中；因此，您可能无法从脚本中引用页上的所有元素。
RegisterClientScriptInclude	与 RegisterClientScriptBlock 方法类似，但此方法将添加引用外部 .js 文件的脚本块。包含文件在任何其他动态添加的脚本之前添加；因此，您可能无法引用页上的某些元素。
RegisterStartupScript	向页中添加一个脚本块，该脚本块在页完成加载后引发页的 onload 事件之前执行。该脚本通常不创建为事件处理程序或函数；它通常只包含要执行一次的语句。
RegisterOnSubmitStatement	添加响应页的 onsubmit 事件而执行的脚本。该脚本在提交页之前执行，允许您取消提交。

下面的代码示例演示如何向用户单击按钮时所执行的页面添加客户端脚本。该按钮具有 ID ConfirmSubmit，可将页面回发给服务器。客户端脚本将显示弹出窗口，请求用户确认回发。

复制

Protected Sub Page_Load(ByVal sender As Object, _
        ByVal e As System.EventArgs)
    Dim scriptText As String
    scriptText = "return confirm('Do you want to submit the page?')"
    ClientScript.RegisterOnSubmitStatement(Me.GetType(), _
        "ConfirmSubmit", scriptText)
End Sub

复制

protected void Page_Load(Object sender, EventArgs e)
{
    String scriptText = 
        "return confirm('Do you want to submit the page?')";
    ClientScript.RegisterOnSubmitStatement(this.GetType(), 
        "ConfirmSubmit", scriptText);
}

下面的代码示例演示如何以动态方式将生成的客户端代码添加到页面中。此代码检查是否已选中 ID 为 checkDisplayCount 的复选框。如果是，此代码将执行下列任务：

创建一个客户端脚本函数，以使用 span 元素显示名为 TextBox1 的 TextBox 控件中的字符数。
向 TextBox 控件添加一个客户端事件。
生成 span 元素。

此代码假定该页面包含一个名为 checkDisplayCount 的复选框以及一个名为 PlaceHolder1 的 PlaceHolder 控件，并且该复选框的 AutoPostBack 属性已设置为 true。

复制

Protected Sub Page_Load(ByVal sender As Object, _
        ByVal e As System.EventArgs)
    If checkDisplayCount.Checked Then
        Dim scriptText As String = ""
        scriptText &= "function DisplayCharCount(){"
        scriptText &= "   spanCounter.innerText = " & _
            "document.forms[0].TextBox1.value.length"
        scriptText &= "}"
        ClientScript.RegisterClientScriptBlock(Me.GetType(), _
            "CounterScript", scriptText, True)
        TextBox1.Attributes.Add("onkeyup", "DisplayCharCount()")
        Dim spanLiteral As New LiteralControl()
        spanLiteral.Text = "<span id=""spanCounter""></span>"
        PlaceHolder1.Controls.Add(spanLiteral)
    End If
End Sub

复制

void Page_Load(object sender, EventArgs e)
{
    if(checkDisplayCount.Checked)
    {
        String scriptText = "";
        scriptText += "function DisplayCharCount(){";
        scriptText += "   spanCounter.innerText = " + 
            " document.forms[0].TextBox1.value.length";
        scriptText += "}";
        ClientScript.RegisterClientScriptBlock(this.GetType(), 
           "CounterScript", scriptText, true);
        TextBox1.Attributes.Add("onkeyup", "DisplayCharCount()");
        LiteralControl spanLiteral = new 
            LiteralControl("<span id=\"spanCounter\"></span>");
        PlaceHolder1.Controls.Add(spanLiteral);
    }
}