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

VS2005中新的服務器端注冊JS等腳本 
this.Page.ClientScript.RegisterStartupScript(Type type,string key,string value)
    其用如下:
    ClientScript.RegisterClientScriptBlock(this.GetType(), "test", "<script language='javascript'>alert('test');</script>");

RegisterStartupScript 方法在 Page 对象的 <form runat= server> 元素的结束标记之前发出该脚本。请务必在 script 参数所指定的脚本块字符串周围包括开始和结束 <script> 元素。

由于此方法使用键来识别脚本块,所以不需要在每次不同的服务器控件实例请求脚本块时都向输出流发出脚本块

具有相同 key 参数值的任何脚本块均被视为重复的。

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

    方法 说明

    RegisterClientScriptBlock

    向页的顶部添加一个脚本块。以字符串形式创建脚本,然后将其传递给方法,方法再将脚本添加到页中。可以使用此方法将任何脚本插入到页中。请注意,脚本可能在所有元素完成之前呈现到页中;因此,您可能无法从脚本中引用页上的所有元素。

    RegisterClientScriptInclude

    与 RegisterClientScriptBlock 方法类似,但此方法将添加引用外部 .js 文件的脚本块。包含文件在任何其他动态添加的脚本之前添加;因此,您可能无法引用页上的某些元素。

    RegisterStartupScript

    向页中添加一个脚本块,该脚本块在页完成加载后引发页的 onload 事件之前执行。该脚本通常不创建为事件处理程序或函数;它通常只包含要执行一次的语句。

    RegisterOnSubmitStatement

    添加响应页的 onsubmit 事件而执行的脚本。该脚本在提交页之前执行,允许您取消提交。

    下面的代码示例演示如何向页中添加在用户单击按钮(该按钮将页回发至服务器)时执行的客户端脚本。客户端脚本将显示弹出窗口,请求用户确认回发。

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);
            }

可以像对 HTML 元素那样,以声明方式向 ASP.NET 网页上的控件添加客户端脚本。或者,如果事件或代码依赖仅在运行时可用的信息,可以通过编程方式向 ASP.NET Web 服务器控件添加客户端脚本事件。

Note注意

可以在客户端脚本中通过 ID 引用控件。有关更多信息,请参见 ASP.NET 网页中的客户端脚本

向按钮添加客户端脚本 onclick 事件需要一个专门过程,本主题后面的内容会对此进行介绍。

Note注意

对客户端脚本的支持取决于浏览器。例如,Internet Explorer、Mozilla 和移动设备浏览器可能会对客户端脚本提供不同类型的支持。

以声明方式向 ASP.NET 服务器控件添加客户端事件处理程序

  • 在控件的标记中添加事件属性,例如,onmouseover 或 onkeyup。针对属性值添加要执行的客户端脚本。

    Note注意

    始终都要在属性中的客户端脚本之后添加一个分号 (;)。这是必需的,这样就可以在 ASP.NET 生成控件的客户端脚本(例如,如果控件的 AutoPostBack 属性设置为 true)时首先运行此代码。

    控件标记中任何不与控件属性 (property) 对应的属性 (attribute)/值对都会按原样传递给浏览器。

    下面的代码示例演示一个包含客户端脚本的 ASP.NET 网页,当用户将鼠标移到按钮上方时,此脚本就会更改该按钮的文本颜色。

C# 
<%@ Page Language="C#" %>
            <html>
            <head runat="server">
            <title>Untitled Page</title>
            <script type="text/javascript">
            var previousColor;
            function MakeRed()
            {
            previousColor = window.event.srcElement.style.color;
            window.event.srcElement.style.color = "#FF0000";
            }
            function RestoreColor()
            {
            window.event.srcElement.style.color = previousColor;
            }
            </script>
            </head>
            <body>
            <form id="form1" runat="server">
            <asp:button id="Button1" runat="server"
            text="Button1"
            onmouseover="MakeRed();"onmouseout="RestoreColor();" />
            </form>
            </body>
            </html>

以编程方式向 ASP.NET 控件添加客户端事件处理程序

  • 在页面的 InitLoad 事件中调用控件的 Attributes 集合的 Add 方法。

    下面的代码示例演示如何向 TextBox 控件添加客户端脚本。该客户端脚本显示 TextBox 控件中的文本长度。该脚本假定页面包含一个名为 spanCounter 的 span 元素。

C# 
protected void Page_Load(object sender, EventArgs e)
            {
            String displayControlName = "spanCounter";
            TextBox1.Attributes.Add("onkeyup", displayControlName +
            ".innerText=this.value.length;");
            }

向按钮控件添加客户端 Onclick 事件

  • 在按钮控件(ButtonLinkButtonImageButton 控件)中,将 OnClientClick 属性设置为要执行的客户端脚本。

    下面的代码示例演示如何向 Button 控件添加客户端脚本 Click 事件。

C# 
<%@ Page Language="C#" %>
            <script runat="server">
            protected void Button1_Click(Object sender, EventArgs e)
            {
            Label1.Text = "Server click handler called.";
            }
            </script>
            <html xmlns="http://www.w3.org/1999/xhtml" >
            <body>
            <form id="form1" runat="server">
            <asp:Button ID="Button1" Runat="server"
            OnClick="Button1_Click"
            OnClientClick="return confirm('Ready to submit.')"
            Text="Test Client Click" />
            <br />
            <asp:Label ID="Label1" Runat="server" text="" />
            </form>
            </body>
            </html>
原文地址:https://www.cnblogs.com/RuiLei/p/432950.html