`
webdev2014
  • 浏览: 699974 次
文章分类
社区版块
存档分类
最新评论

js前台与后台数据交互-后台调前台（后台调用、注册客户端脚本）

 
阅读更多

客户端脚本一般都在前台，这里讲的是（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 事件引发之前执行


　　举例：

　　前台代码：

　　

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="RegisterStartupScript.aspx.cs" Inherits="WebApplication4.WebForm12" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script type="text/javascript">
        function test() {
            alert("前台定义的客户端脚本");
        }
        
    </script>
</head>

<body>
    <form id="form1" runat="server">
    </form>
</body>
</html>


　　后台代码：

　　

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace WebApplication4
{
    public partial class WebForm12 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            //从 Page 对象的 ClientScript 属性获取对 ClientScriptManager 类的引用
            ClientScriptManager cs = Page.ClientScript;

            //方法中直接嵌入脚本，有弊端
            Response.Write("<script>alert('方法中直接嵌入脚本');</script>");

            //ClientScript直接在后台注册客户端脚本
            String csname1 = "PopupScript1";
            Type cstype = this.GetType();
            //判断startup script是否已被注册
            if (!cs.IsStartupScriptRegistered(cstype, csname1))
            {
                String cstext1 = "alert('后台定义的客户端脚本');";//后台定义客户端脚本
                cs.RegisterStartupScript(cstype, csname1, cstext1, true);
            }

            //ClientScript调用前台定义的客户端脚本
            String csname2 = "PopupScript2";
            //判断startup script是否已被注册
            if (!cs.IsStartupScriptRegistered(cstype, csname1))
            {
                String cstext2 = "test();";//test()为前台定义的客户端脚本
                cs.RegisterStartupScript(cstype, csname2, cstext2, true);
            }

            //ClientScript.RegisterStartupScript（Type type,string key ,string script）方法
            string csname3 = "PopupScript3";
            //判断startup script是否已被注册
            if (!cs.IsStartupScriptRegistered(cstype, csname1))
            {
                String cstext3 = "<script>test();</script)";
                cs.RegisterStartupScript(cstype, csname3, cstext3);
            }
        }


    }
}

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

　　　　多了一个参数：addScriptTags

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


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

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

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

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

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

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


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

　

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Text;
namespace WebApplication4
{
    public partial class WebForm13 : System.Web.UI.Page
    {
        public void Page_Load(Object sender, EventArgs e)
        {
            // 定义参数变量
            String csname1 = "PopupScript";
            Type cstype = this.GetType();

            // 从 Page 对象的 ClientScript 属性获取对 ClientScriptManager 类的引用
            ClientScriptManager cs = Page.ClientScript;

            // 判断startup script是否已被注册
            if (!cs.IsClientScriptBlockRegistered(cstype, csname1))
            {
                //运用StringBuilder需要导入using System.Text命名空间
                StringBuilder cstext2 = new StringBuilder();
                //注册客户端脚本，由前台调用
                cstext2.Append("<script type=text/javascript> function DoClick() {");
                cstext2.Append("alert('hello')} </");
                cstext2.Append("script>");
                cs.RegisterClientScriptBlock(cstype, csname1, cstext2.ToString(), false);
            }

            //调用前台定义的脚本与方法一类似，不做介绍
        }
    }
}


　　前台代码：

　

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="RegisterClientScriptBlock.aspx.cs" Inherits="WebApplication4.WebForm13" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>ClientScriptManager Example</title>
</head>
  <body>
	 <form id="Form1"
         runat="server">
         <%--调用后台注册的客户端脚本--%>
		 <input type="button" value="ClickMe" onclick="DoClick()"/>
	 </form>
  </body>
</html>


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

　　参数

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

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


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

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

　　直接看实例：

　　testJs.js文件中的代码：

　　

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


　　后台代码：　　

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace WebApplication4
{
    public partial class RegisterClientScriptInclude : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
           
             //定义参数变量
            String csname = "ButtonClickScript";
            String csurl = "~/testJs.js";
            Type cstype = this.GetType();

            // 从 Page 对象的 ClientScript 属性获取对 ClientScriptManager 类的引用
            ClientScriptManager cs = Page.ClientScript;

            // 判断script是否已被注册
            if (!cs.IsClientScriptIncludeRegistered(cstype, csname))
            {
                //在后台注册客户端脚本
                cs.RegisterClientScriptInclude(cstype, csname, ResolveClientUrl(csurl));
            }

           //当然可以用RegisterStartupScript方法直接调用js文件代码，如下
            ClientScript.RegisterStartupScript(this.GetType(), "csname2", "testFun()", true);
        }
    }
}


　　前台代码：

　

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="RegisterClientScriptInclude.aspx.cs" Inherits="WebApplication4.RegisterClientScriptInclude" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    不必用下面的语句在前台注册testJs.js脚本文件，已在后台注册
    <%--<script src="testJs.js" type="text/javascript">
        
    </script>--%>
</head>
<body>
    <form id="form1" runat="server">
      <div>
          <%--调用后台注册的testJs.js文件中的脚本--%>
        <input type="button" value="ClickMe" onclick="testFun()"/>
     </div>
    </form>
</body>
</html>


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

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

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

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

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

　　实例：　　

　　后台代码：

　

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace WebApplication4
{
    public partial class RegisterOnSubmitStatement : System.Web.UI.Page
    {
        public void Page_Load(Object sender, EventArgs e)
        {
            // 定义参数变量
            String csname = "OnSubmitScript";
            Type cstype = this.GetType();

            // 从 Page 对象的 ClientScript 属性获取对 ClientScriptManager 类的引用
            ClientScriptManager cs = Page.ClientScript;

            // 判断script是否已被注册
            if (!cs.IsOnSubmitStatementRegistered(cstype, csname))
            {
                String cstext = "document.write('Text from OnSubmit statement');";
                cs.RegisterOnSubmitStatement(cstype, csname, cstext);
            }
        }
    }
}


　　前台代码：　

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="RegisterOnSubmitStatement.aspx.cs" Inherits="WebApplication4.RegisterOnSubmitStatement" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <%--定义sumit按钮，点击提交页面，以触发后台注册的脚本--%>
    <input type="submit" value="Submit"/>
    </form>
</body>
</html>


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

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

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

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

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

　　举例：

　　前台代码：

　　

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="testServerControls.aspx.cs" Inherits="WebApplication4.testServerControls" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script type="text/javascript">
        function test() {
            alert("hello new world");
        }
        
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Button ID="btnServer" runat="server" Text="Button"/>
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        <span id="spanCounter"></span>
    </div>
    </form>
</body>
</html>

　后台代码：　　

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace WebApplication4
{
    public partial class testServerControls : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
           //将客户端按钮控件的属性设置为客户端脚本test()
            btnServer.OnClientClick = "test()";

            //调用控件的 Attributes 集合的 Add 方法
            String displayControlName = "spanCounter";
            //在span中显示文本框的字符长度
            TextBox1.Attributes.Add("onkeyup", displayControlName + ".innerText=this.value.length;");
                
        }
    }
}


总结

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


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


分享到：
| 俺的新书《Sencha Touch实战》终于出版了
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    后台注册前台脚本代码

    综上所述，后台注册前台脚本是ASP.NET开发中的重要技能，它使得开发者能更灵活地控制页面的行为，同时提供了与客户端交互的强大能力。理解并熟练掌握这些知识点，对于提升ASP.NET应用的用户体验和功能完整性具有重要...

    c# webform js文件获取客户端控件，后台cs获取前台客户端控件的值，c#和js的交互

    在C# WebForm应用中，JavaScript（JS）与C#（CS）的交互是常见的需求，主要用于处理客户端的动态事件和数据验证。本教程将详细讲解如何使用JS获取客户端控件的值，并在C#后台代码（CS）中获取这些前端输入的数据。...

    ASP.NET中前台javascript与后台代码调用

    本文将深入探讨ASP.NET中前台JavaScript与后台代码调用的技术细节，包括IPostBackEventHandler接口的使用、ClientScript对象的功能以及如何通过__doPostBack函数实现前后端的通信。 ### ASP.NET中前后端通信的基础 ...

    .net前台调用后台方法和后台调用前台js.pdf

    .NET 前台调用后台方法以及后台调用前端JavaScript是Web开发中常见的交互方式，尤其是在ASP.NET框架中。以下是对这两种技术的详细说明： **一、前台调用后台方法** 1. **OnClientClick**：ASP.NET的控件属性，如...

    .net前台调用后台方法和后台调用前台js.docx

    标题和描述中提到的是.NET（特别是C#）中前端（客户端）与后端（服务器端）交互的方法，主要涉及如何从HTML页面（前端）调用ASP.NET后台代码以及如何从后台代码调用前端JavaScript函数。这里我们将详细探讨这两种...

    c# webform无刷新前后台交互

    "无刷新前后台交互"则是现代Web应用的一个重要特性，它允许用户在不重新加载整个页面的情况下与服务器进行通信，提升了用户体验。下面将详细探讨C# WebForm实现无刷新前后台交互的方法、技术以及相关知识点。 1. **...

    .net中前台javascript与后台c#函数相互调用问题.docx

    在.NET开发中，前端JavaScript与后端C#之间的交互是常见的需求。以下是对标题和描述中涉及知识点的详细说明： 1. **JavaScript访问C#函数**： - 方法一：利用按钮点击事件，将C#代码逻辑放入按钮的Click事件处理...

    asp.net ajax异步获取数据...前台直接调用后台方法版..

    在标题和描述中提到的"前台直接调用后台方法"，正是ASP.NET AJAX的核心特性之一，即通过AJAX调用在客户端实现对服务器端方法的调用，从而提高用户体验。 ASP.NET AJAX主要由两部分组成：客户端库（MicrosoftAjax.js...

    基于ThinkPHP的Ajax数据交互研究.pdf

    Ajax 技术是动态网页技术的重要组成部分，它使用客户端脚本与服务器交换数据，广泛应用于网站网页设计。Ajax 技术的核心是 XmlHttpRequest 对象（简称 XHR），使用前台脚本创建相应的对象，通过实例向后台发送 HTTP ...

    JAVA培训C#后台调用前台javascript的五种方法.pdf

    在IT行业中，尤其是在Web开发领域，经常需要在服务器端（后台）与客户端（前台）之间进行交互。在ASP.NET框架下，C#作为后台语言，有时需要调用前端的JavaScript函数来实现某些功能，例如更新用户界面或者进行复杂的...

    微信小程序商城前后台完整版源码，小程序商城商城全套源码

    三、前后台交互 1. 小程序调用API：小程序通过wx.request()函数发起网络请求，与PHP后台的API进行通信，获取或提交数据。如商品列表的获取、用户登录注册、下单支付等操作。 2. JWT令牌认证：为了保证安全，前后端间...

    Netanvantage UltraWebGrid前台后台生成表格

    6. **JavaScript方法**：NetAdvantage UltraWebGrid支持客户端脚本事件处理，允许在浏览器端进行交互和操作。虽然示例中没有详细列出JS方法，但通常包括如排序、筛选、编辑、选择行等操作。这些方法可以通过 ...

    C#后台调用前台javascript的五种方法小结

    在Web开发中，尤其是***项目中，C#作为后台脚本语言经常需要与前台的JavaScript进行交互。由于后台代码运行在服务器端，而JavaScript运行在客户端，这就要求我们采用一些特殊的方法来实现两者之间的通信。下面将详细...

    【ASP.NET编程知识】总结ASP.NET C#中经常用到的13个JS脚本代码.docx

    JavaScript（JS）是ASP.NET中常用的脚本语言之一，用于实现客户端的交互操作。本文将总结ASP.NET C#中经常用到的13个JS脚本代码，旨在帮助开发者快速掌握JS脚本的应用。 一、按钮前后台事件 在ASP.NET中，按钮的...

    C#后台调用前台JS函数方法

    在开发Web应用程序时，有时需要在服务器端（C#后台）与客户端（前端JavaScript）之间进行交互。本文将详细介绍三种不同的方法，使C#后台能够调用前台的JavaScript函数。 ### 方法一：通过HTML控件注入JavaScript ...

    [原创]基于FLASH机制实现的不同域窗口相互调用js的插件-虫洞

    2)本插件是基于同一台电脑上的FLASH之间能进行LocalConnection以及FLASH与JS能相互调用的原理而设计，将客户端不同域页面间Javascript相互调用转化为了FLASH之间的"本地命令发送". 3)本插件在不同域页面间Javascript...

    亲测：京东完美版_ECSHOP网站模板js代码前台前端H5页面+后台整站源码.rar

    JavaScript（简称js）作为客户端脚本语言，用于实现动态效果和交互性，如下拉菜单、轮播图、表单验证等，提升了用户体验。 其次，"后台整站源码"是指整个网站的后端管理系统的源代码，这通常包括用户管理、商品管理...

    jquery ajax跨域html前台 php后台

    在Web开发中，跨域（Cross-Origin）是一个常见的问题，特别是在使用Ajax进行异步数据交互时。本示例主要展示了如何使用jQuery的Ajax功能解决HTML与PHP之间的跨域问题，结合JSON进行数据交换。让我们详细了解一下这个...

    .net后台代码调用前台JS的两种方式

    在***开发中，我们经常会遇到需要在服务器端代码（后台）调用客户端脚本（前台）的场景。本文将介绍两种.NET后台代码调用前台JavaScript（JS）的方法。 首先，我们来谈谈.NET与JavaScript交互的必要性。***主要负责...

    贵美商城后台源码jsp+servlet

    JSP页面可以包含HTML、CSS、JavaScript以及内嵌的Java表达式和脚本片段，这些脚本可以在服务器端运行并生成HTML响应，返回给客户端浏览器。 2. **Servlet技术**： Servlet是Java的一个接口，用于扩展服务器的功能...

Magicbox
Global site tag (gtag.js) - Google Analytics