转自：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. 第11条：理解objc_msgSend的作用

    C语言使用“静态绑定”,也就是说,在编译期就能决定运行时所应调用的函数(也就是说函数地址硬编码在指令之中). 如果是内联函数,就无法硬编码在指令之中,而是要在运行期读取出来(也就是动态绑定). 在底层 ...

  2. ZIP压缩文件夹中上个月的文件，并将备份文件拷贝到服务器

    遍历文件夹的子文件夹下的所有文件,将上个月的文件集中到一起,然互压缩,并copy到服务器的映射磁盘. static void Main(string[] args) { //原始文件存放的位置 Dir ...

  3. js和css分别实现透明度的动画实现

    js实现 两个函数 即setInterval和setTimeout setTimeout((function(){})(1/10),1*100) 该函数有两个参数,第一个为执行的函数,第二个为事件参数 ...

  4. 2014年12月23日00:42:54——PS4

    http://tieba.baidu.com/p/3415598015?see_lz=1&pn=1 http://tieba.baidu.com/p/3188981817 http://tie ...

  5. （LightOJ 1004） Monkey Banana Problem 简单dp

    You are in the world of mathematics to solve the great "Monkey Banana Problem". It states ...

  6. (转) oc static extern 和const

    static 全局的,可以改的,如果在一个类中声明static,类中其他地方用到的时候,也是使用的改变量.和java类似,但不能用类名直接访问. const 是常量,不可以改的 extern 1.假如 ...

  7. 24种设计模式--原型模式【Prototype Pattern】

    今天我们来讲原型模式,这个模式的简单程度是仅次于单例模式和迭代器模式,非常简单,但是要使用好这个模式还有很多注意事项.我们通过一个例子来解释一下什么是原型模式. 现在电子账单越来越流行了,比如你的信用 ...

  8. Windows7 下安装 CentOS6.5

    内容来自:http://blog.163.com/for_log/blog/static/2162830282013031031278/第一部分:安装前准备1. 准备两个fat32格式的分区,一个用于 ...

  9. linux根目录详解

    ubuntu 文件说明:http://tech.ccidnet.com/art/302/20080118/1347213_1.html/ 根目录  |  |-boot/ 启动文件.所有与系统启动有关的 ...

  10. PL/SQL学习（四）存储过程和函数

    原文参考:http://plsql-tutorial.com/ PL/SQL存储过程 存储过程相当于一个有名字的PL/SQL块,经过第一次编译后再次调用时不需要再次编译 创建格式: CREATE [O ...