转自：http://blog.csdn.net/wang379275614/article/details/17049721

客户端脚本一般都在前台，这里讲的是（1）在后台调用前台定义的脚本（2）在后台如何注册客户端脚本

 

用途

　　何时使用服务器代码向页中添加客户端脚本：

　　u  当客户端脚本的内容依赖于直到运行时才可用的信息时

　　u  当您希望客户端脚本在当页已完成加载或当用户提交页时执行

方法

（一）用Response.Write方法写入脚本

　　比如在你单击按钮后，先操作数据库，完了后进行弹出框提示Response.Write("<scripttype='text/javascript'>alert();</script>");

　　缺陷：这个方法不能调用脚本文件中的自定义的函数，只能调用内部函数，具体调用自定义的函数只能在Response.Write写上函数定义，比如Response.Write("<scripttype='text/javascript'>function myfun(){alert(‘a’)}</script>");

　　（注意,后一个response方法与前一个不同，不会立即弹出框，因为它只是注册了一个客户端脚本函数，并不会执行该函数，所以只有调用myfun()函数时才会弹出框）

（二）通过Page 对象的 ClientScript 属性获取对 ClientScriptManager 类的引用以动态注册、调用客户端脚本

　　ClientScriptManager类简介：ClientScriptManager 类用于管理客户端脚本并将它们添加到Web 应用程序中，通过键 String 和 Type 唯一地标识脚本。具有相同的键和类型的脚本被视为重复脚本。使用脚本类型有助于避免混淆可能用在页中的来自不同用户控件的相似脚本。

（1）方法ClientScriptManager.RegisterStartupScript(Type type, String key , String  script)

　　参数

　　　　type：要注册的启动脚本的类型（一般直接填this.GetType()即可）。

　　　　key：要注册的启动脚本的键（相当于为执行脚本起一个名字,任意名即可）。

　　　　script：要注册的启动脚本文本（"<script>函数（）</script>"，函数（）可以为系统函数也可以为前台定义的js函数）。

　　Ø  客户端脚本由它的键(key)和类型(type)唯一标识。具有相同的键和类型的脚本被视为重复脚本。

　　Ø  调用 IsStartupScriptRegistered 方法以确定具有给定的键和类型对的启动脚本是否已经注册，从而避免不必要的添加脚本尝试。

　　Ø  RegisterStartupScript 方法添加的脚本块在页面加载完成但页面的 OnLoad 事件引发之前执行

　　举例：

　　前台代码：

　　

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="RegisterStartupScript.aspx.cs" Inherits="WebApplication4.WebForm12" %>
  2. <!DOCTYPE html>
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head runat="server">
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  6. <title></title>
  7. <script type="text/javascript">
  8. function test() {
  9. alert("前台定义的客户端脚本");
  10. }
  11. </script>
  12. </head>
  13. <body>
  14. <form id="form1" runat="server">
  15. </form>
  16. </body>
  17. </html>

　　后台代码：

　　

  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Web;
  5. using System.Web.UI;
  6. using System.Web.UI.WebControls;
  7. namespace WebApplication4
  8. {
  9. public partial class WebForm12 : System.Web.UI.Page
  10. {
  11. protected void Page_Load(object sender, EventArgs e)
  12. {
  13. //从 Page 对象的 ClientScript 属性获取对 ClientScriptManager 类的引用
  14. ClientScriptManager cs = Page.ClientScript;
  15. //方法中直接嵌入脚本，有弊端
  16. Response.Write("<script>alert('方法中直接嵌入脚本');</script>");
  17. //ClientScript直接在后台注册客户端脚本
  18. String csname1 = "PopupScript1";
  19. Type cstype = this.GetType();
  20. //判断startup script是否已被注册
  21. if (!cs.IsStartupScriptRegistered(cstype, csname1))
  22. {
  23. String cstext1 = "alert('后台定义的客户端脚本');";//后台定义客户端脚本
  24. cs.RegisterStartupScript(cstype, csname1, cstext1, true);
  25. }
  26. //ClientScript调用前台定义的客户端脚本
  27. String csname2 = "PopupScript2";
  28. //判断startup script是否已被注册
  29. if (!cs.IsStartupScriptRegistered(cstype, csname1))
  30. {
  31. String cstext2 = "test();";//test()为前台定义的客户端脚本
  32. cs.RegisterStartupScript(cstype, csname2, cstext2, true);
  33. }
  34. //ClientScript.RegisterStartupScript（Type type,string key ,string script）方法
  35. string csname3 = "PopupScript3";
  36. //判断startup script是否已被注册
  37. if (!cs.IsStartupScriptRegistered(cstype, csname1))
  38. {
  39. String cstext3 = "<script>test();</script)";
  40. cs.RegisterStartupScript(cstype, csname3, cstext3);
  41. }
  42. }
  43. }
  44. }

　　注：重载方法 ClientScript.RegisterStartupScript(Typetype,stringkey, string script,bool flag)

　　　　多了一个参数：addScriptTags

　　　　指示是否添加脚本标记的布尔值，指示 script 参数中提供的脚本是否包装在 <script> 元素块中。将 addScriptTags 设置为 true 指示脚本标记将自动添加。设置为 false，所以脚本开始标记和结束标记包含在 script 参数中。

（2）方法 ClientScriptManager.RegisterClientScriptBlock(Type, String, String)

　　参数与重载方法与方法一很类似，不多介绍

　　Ø  向页的顶部添加一个脚本块。以字符串形式创建脚本，然后将其传递给方法，方法再将脚本添加到页中。

　　Ø  可以使用此方法将任何脚本插入到页中。请注意，脚本可能在所有元素完成之前呈现到页中；因此，您可能无法从脚本中引用页上的所有元素。

　　Ø  调用 IsClientScriptBlockRegistered 方法以确定具有给定的键和类型对的客户端脚本是否已经注册，从而避免不必要的添加脚本尝试

　　使用方法与方法一也大致相同，直接看实例：

　　后台代码（注册客户端脚本）：

　

  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Web;
  5. using System.Web.UI;
  6. using System.Web.UI.WebControls;
  7. using System.Text;
  8. namespace WebApplication4
  9. {
  10. public partial class WebForm13 : System.Web.UI.Page
  11. {
  12. public void Page_Load(Object sender, EventArgs e)
  13. {
  14. // 定义参数变量
  15. String csname1 = "PopupScript";
  16. Type cstype = this.GetType();
  17. // 从 Page 对象的 ClientScript 属性获取对 ClientScriptManager 类的引用
  18. ClientScriptManager cs = Page.ClientScript;
  19. // 判断startup script是否已被注册
  20. if (!cs.IsClientScriptBlockRegistered(cstype, csname1))
  21. {
  22. //运用StringBuilder需要导入using System.Text命名空间
  23. StringBuilder cstext2 = new StringBuilder();
  24. //注册客户端脚本，由前台调用
  25. cstext2.Append("<script type=text/javascript> function DoClick() {");
  26. cstext2.Append("alert('hello')} </");
  27. cstext2.Append("script>");
  28. cs.RegisterClientScriptBlock(cstype, csname1, cstext2.ToString(), false);
  29. }
  30. //调用前台定义的脚本与方法一类似，不做介绍
  31. }
  32. }
  33. }

　　前台代码：

　

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="RegisterClientScriptBlock.aspx.cs" Inherits="WebApplication4.WebForm13" %>
  2. <!DOCTYPE html>
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head runat="server">
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  6. <title>ClientScriptManager Example</title>
  7. </head>
  8. <body>
  9. <form id="Form1"
  10. runat="server">
  11. <%--调用后台注册的客户端脚本--%>
  12. <input type="button" value="ClickMe" onclick="DoClick()"/>
  13. </form>
  14. </body>
  15. </html>

（3）方法ClientScriptManager.RegisterClientScriptInclude(Stringkey, String src)

　　参数

　　　　key：要注册的客户端脚本包含的键。

　　　　url：要注册的客户端脚本所在的js文件的URL。

　　Ø  调用 IsStartupScriptRegistered 方法以确定具有给定的键和类型对的客户端脚本包含是否已经注册

　　Ø  与 RegisterClientScriptBlock 方法类似，但此方法将添加引用外部 .js 文件的脚本块。包含文件在任何其他动态添加的脚本之前添加；因此，您可能无法引用页上的某些元素。（重载方法不多说）

　　直接看实例：

　　testJs.js文件中的代码：

　　

  1. function testFun(){
  2. alert("这是独立的js文件中得客户端脚本");
  3. }

　　后台代码：　　

  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Web;
  5. using System.Web.UI;
  6. using System.Web.UI.WebControls;
  7. namespace WebApplication4
  8. {
  9. public partial class RegisterClientScriptInclude : System.Web.UI.Page
  10. {
  11. protected void Page_Load(object sender, EventArgs e)
  12. {
  13. //定义参数变量
  14. String csname = "ButtonClickScript";
  15. String csurl = "~/testJs.js";
  16. Type cstype = this.GetType();
  17. // 从 Page 对象的 ClientScript 属性获取对 ClientScriptManager 类的引用
  18. ClientScriptManager cs = Page.ClientScript;
  19. // 判断script是否已被注册
  20. if (!cs.IsClientScriptIncludeRegistered(cstype, csname))
  21. {
  22. //在后台注册客户端脚本
  23. cs.RegisterClientScriptInclude(cstype, csname, ResolveClientUrl(csurl));
  24. }
  25. //当然可以用RegisterStartupScript方法直接调用js文件代码，如下
  26. ClientScript.RegisterStartupScript(this.GetType(), "csname2", "testFun()", true);
  27. }
  28. }
  29. }

　　前台代码：

　

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="RegisterClientScriptInclude.aspx.cs" Inherits="WebApplication4.RegisterClientScriptInclude" %>
  2. <!DOCTYPE html>
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head runat="server">
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  6. <title></title>
  7. 不必用下面的语句在前台注册testJs.js脚本文件，已在后台注册
  8. <%--<script src="testJs.js" type="text/javascript">
  9. </script>--%>
  10. </head>
  11. <body>
  12. <form id="form1" runat="server">
  13. <div>
  14. <%--调用后台注册的testJs.js文件中的脚本--%>
  15. <input type="button" value="ClickMe" onclick="testFun()"/>
  16. </div>
  17. </form>
  18. </body>
  19. </html>

（4）方法ClientScriptManager.RegisterOnSubmitStatement(Type type,String key, String script)

　　Ø  添加响应页的 onsubmit 事件而执行的脚本。

　　Ø  调用 IsOnSubmitStatementRegistered 方法可确定某 OnSubmit 语句是否已通过给定的键/类型对注册，从而避免不必要地添加脚本的尝试。

　　Ø  RegisterOnSubmitStatement 方法的 script 参数可以包含多个脚本命令，只要它们以分号 (;) 正确地分隔。

　　Ø  RegisterOnSubmitStatement 添加一个脚本，该脚本在页面提交前执行并提供取消提交的机会。

　　实例：　　

　　后台代码：

　

  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Web;
  5. using System.Web.UI;
  6. using System.Web.UI.WebControls;
  7. namespace WebApplication4
  8. {
  9. public partial class RegisterOnSubmitStatement : System.Web.UI.Page
  10. {
  11. public void Page_Load(Object sender, EventArgs e)
  12. {
  13. // 定义参数变量
  14. String csname = "OnSubmitScript";
  15. Type cstype = this.GetType();
  16. // 从 Page 对象的 ClientScript 属性获取对 ClientScriptManager 类的引用
  17. ClientScriptManager cs = Page.ClientScript;
  18. // 判断script是否已被注册
  19. if (!cs.IsOnSubmitStatementRegistered(cstype, csname))
  20. {
  21. String cstext = "document.write('Text from OnSubmit statement');";
  22. cs.RegisterOnSubmitStatement(cstype, csname, cstext);
  23. }
  24. }
  25. }
  26. }

　　前台代码：　

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="RegisterOnSubmitStatement.aspx.cs" Inherits="WebApplication4.RegisterOnSubmitStatement" %>
  2. <!DOCTYPE html>
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head runat="server">
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  6. <title></title>
  7. </head>
  8. <body>
  9. <form id="form1" runat="server">
  10. <%--定义sumit按钮，点击提交页面，以触发后台注册的脚本--%>
  11. <input type="submit" value="Submit"/>
  12. </form>
  13. </body>
  14. </html>

（三）向 asp.net web服务器控件添加客户端脚本事件

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

　　　　＃在页面的 Init 或 Load 事件中调用控件的 Attributes 集合的 Add 方法。

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

　　　　＃在按钮控件（Button、LinkButton 和 ImageButton 控件）中，将 OnClientClick 属性设置为要执行的客户端脚本

　　举例：

　　前台代码：

　　

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="testServerControls.aspx.cs" Inherits="WebApplication4.testServerControls" %>
  2. <!DOCTYPE html>
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head runat="server">
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  6. <title></title>
  7. <script type="text/javascript">
  8. function test() {
  9. alert("hello new world");
  10. }
  11. </script>
  12. </head>
  13. <body>
  14. <form id="form1" runat="server">
  15. <div>
  16. <asp:Button ID="btnServer" runat="server" Text="Button"/>
  17. <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
  18. <span id="spanCounter"></span>
  19. </div>
  20. </form>
  21. </body>
  22. </html>

　后台代码：　　

  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Web;
  5. using System.Web.UI;
  6. using System.Web.UI.WebControls;
  7. namespace WebApplication4
  8. {
  9. public partial class testServerControls : System.Web.UI.Page
  10. {
  11. protected void Page_Load(object sender, EventArgs e)
  12. {
  13. //将客户端按钮控件的属性设置为客户端脚本test()
  14. btnServer.OnClientClick = "test()";
  15. //调用控件的 Attributes 集合的 Add 方法
  16. String displayControlName = "spanCounter";
  17. //在span中显示文本框的字符长度
  18. TextBox1.Attributes.Add("onkeyup", displayControlName + ".innerText=this.value.length;");
  19. }
  20. }
  21. }

总结

　　因为js非常灵活强大，我们往往在后台需要用到它的方法；当客户端脚本的内容依赖于直到运行时才可用的信息时；当您希望客户端脚本在当页已完成加载或当用户提交页时执行；都会用到后台调用或注册客户端脚本的技术。

　　以上是总结的后台注册、调用客户端脚本的方法，请参考。。。

js前台与后台数据交互-后台调前台（后台调用、注册客户端脚本）的更多相关文章

  1. js前台与后台数据交互

    客户端脚本一般都在前台,这里讲的是(1)在后台调用前台定义的脚本(2)在后台如何注册客户端脚本 用途 何时使用服务器代码向页中添加客户端脚本: u 当客户端脚本的内容依赖于直到运行时才可用的信息时 u ...

  2. --@angularJS--自定义服务与后台数据交互小实例

    1.myService.html: <!DOCTYPE HTML><html ng-app="app"><head>    <title& ...

  3. --@angularJS--$http服务与后台数据交互

    1.httpBasic.html: <!DOCTYPE HTML><html ng-app="app"><head>    <title& ...

  4. MUI框架-09-MUI 与后台数据交互

    MUI框架-09-MUI 与后台数据交互 本篇介绍使用 art-template 和原生 MUI 的数据交互 mui.ajax 来实现 我们大家都知道,想要数据交互就要有数据,每次当我们发送请求,我们 ...

  5. AntDesign(React)学习-10 Dva 与后台数据交互

    明天正式在线办公没时间学习了,今天晚上再更新一篇, 代码提交一次:https://github.com/zhaogaojian/jgdemo 1.src下创建services目录 创建文件userSr ...

  6. js前台与后台数据交互-前台调后台

    转自:http://blog.csdn.net/wang379275614/article/details/17033981   网站是围绕数据库来编程的,以数据库中的数据为中心,通过后台来操作这些数 ...

  7. vue-cli模拟后台数据交互

    作为一个前端入坑的妹子,在学习vue的道路上挣扎徘徊,由一开始的对vue一直蒙圈只知道双向数据绑定和一些'V-x'的指令,慢慢通过一个视频的学习渐渐入坑,对于我这个js基础不怎么好而且编程思维又不是很 ...

  8. Salesforce LWC学习(五) LDS & Wire Service 实现和后台数据交互 & meta xml配置

    之前的几节都是基于前台变量进行相关的操作和学习,我们在项目中不可避免的需要获取数据以及进行DML操作.之前的内容中也有提到wire注解,今天就详细的介绍一下对数据进行查询以及DML操作以及Wire S ...

  9. web前端与后台数据交互

    1.前端请求数据URL由谁来写? 在开发中,URL主要是由后台来写的,写好了给前端开发者.如果后台在查询数据,需要借助查询条件才能查询到前端需要的数据时,这时后台会要求前端提供相关的查询参数,这里的查 ...

随机推荐

  1. 初尝 Perl

    本文将阐述以下几方面内容: 1.什么是Perl 2.Perl有什么用 3.Windows 下的Perl环境搭建 4.Perl 版Hello World 5.Perl 语法梗概 6.一些参考资料 什么是 ...

  2. 虚拟机环境Centos如何上网

    虚拟机环境Centos如何上网----------by ruffianfish.痞子鱼 因为我是用的虚拟机的环境,所以一切操作角度从虚拟机出发. 虚拟机环境的优点: 适合新手学习linux 永远不要怕 ...

  3. APUE学习笔记-文件I/O

    这次回顾APUE中第三四章的内容,主要是文件I/O操作相关的接口函数.    UNIX系统的文件I/O是不带缓冲的I/O,不带缓冲是指每个read和write都调用系统内核的一个系统调用. 1.文件描 ...

  4. javascript 返回顶部

    <style> #linGoTopBtn {    POSITION: fixed; TEXT-ALIGN: center; LINE-HEIGHT: 30px; WIDTH: 30px; ...

  5. think ajax 应用

    首先得引入 jquery 文件,另外定义一个处理的 js.js 文件 如实现用 post 传输方法: 模板文件: <script type="text/javascript" ...

  6. 上传文件到服务器端后进一步推送到sftp服务器

    扩展安装 要想sftp服务端发送文件,就需要php脚本具有作为ssh客户端的能力,所以需先为php安装如下扩展 openssl openssl-dev libssh php ssh 扩展 按照下面的命 ...

  7. Sublime Text 3 LESS、SASS、SCSS高亮插件、提示插件

    为sublime text 添加LESS语法高亮 功能:LESS高亮插件   下载   https://packagecontrol.io/packages/LESS 简介:用LESS的同学都知道,s ...

  8. [转]Vim 复制粘贴探秘

    Vim作为最好用的文本编辑器之一,使用vim来编文档,写代码实在是很惬意的事情.每当学会了vim的一个新功能,就会很大地提高工作效率.有人使用vim几十年,还没有完全掌握vim的功能,这也说明了vim ...

  9. JDOM

    JDOM是什么: To provide a complete, Java-based solution for accessing, manipulating, and outputting XML ...

  10. bzoj2427: [HAOI2010]软件安装

    Description 现在我们的手头有N个软件,对于一个软件i,它要占用Wi的磁盘空间,它的价值为Vi.我们希望从中选择一些软件安装到一台磁盘容量为M计算机上,使得这些软件的价值尽可能大(即Vi的和 ...