ASP.NET前台JS与后台CS函数如何互相调用

转载 2013年10月25日 00:11:21

在实际的Web开发中,我们可能会常常遇到后台调用前台JS代码或者前台JS调用后台代码的情况。今天就把比较实用的前后台相互调用的方法总结出来和大家分享。

<1>后台代码调用前台JS代码

一、说到后台代码调用前台的JS代码很多人首先就会想到使用Clients cript对象。

Clients cript.RegisterStartups cript()方法该方法主要是注册启动脚本文本,即在后台执行调用前台JS代码

该方法有两个重载,

1Clients cript.RegisterStartups criptType type,string key ,string s cript注册启动脚本//分别表示:1、要注册的启动脚本的类型(一般直接填this.GetType()即可),2、要注册的启动脚本的键(相当于为执行脚本起一个名字,任意名即可),3、要注册的启动脚本文本(一般为"<s cript>函数()</s cript>")

示例:

Clients cript.RegisterStartups cript(this.GetType(),"SayHello","<s cript>SayHello('"+name+"')</s cript>");//先获取用户姓名,然后再调用前台的JS函数SayHello(name);

2Clients cript.RegisterStartups cript(Typetype,string key, string s cript,bool flag);//该函数和第一参数的区别在于将最后一个参数设为"ture"时,第三个参数可以直接写被调用的函数,不用再加"<s cript></s cript>",这两个方法差别不是很大。

示例:

Clients cript.RegisterStartups cript(this.GetType(),"SayHello1", "SayHello('" + name + "')", true);//跟第一方法的效果一样,调用前台SayHello(name)函数,如果最后一个值设为false,则仍需添加上"<s cript></s cript>"标记

这里需要特别注意的是在注册启动脚本的时候,键是唯一的,不能重复,如果有将会报错。

二、使用Clients cript.RegisterClients criptBlock()方法,注册客户端脚本块

该方法有两个重载,使用方法几乎和Clients cript.RegisterClients criptBlock()的两个方法一模一样。这里只是给出示例,就不再做过多的解释。

Clients cript.RegisterClients criptBlock(this.GetType(),"SayHello2", "ShowPerson('" + age + "')",true);        Clients cript.RegisterClients criptBlock(this.GetType(),"SayHello2","<s cript>SayHello('"+name+"')</s cript>");

在这里主要讲一下RegisterClients criptBlock方法和RegisterStartups cript方法和区别

RegisterStartups cript,这种方法会把JS代码嵌入在页面的底部、表单的最后 (</form>前面)适用于要在页面控件加载完成后运行的JS代码

RegisterClients criptBlock,这种方法会把JS代码嵌入在页面的顶部、表单的最前 (<form>后面)适用于要在控件加载前执行的JS代码

通过html源代码可见。

三、使用Control.Attribute属性(服务器控件

这也是一种比较简单好用的方法,可以将该方法和控件的客户端方法相关联,比如“onbluronfocusonmousemoveonmouseover“等,在这里只是把该方法作为Control的一个属性来用。

示例:

Page_Load()方法里添加如下代码:

txtname.Attributes["onblur"] ="show('" + txt.Text + "')";//当用户离开文本框时,会提示所输入的内容 (在Page_Load使用该方法,其实是在编译成源文件时在对应的html元素的属性调用js函数,如<inputtype=”text” onblur=”show()”/>)

还可以通过这种方法来控制前台的显示。其实现方法和本例的方法都是一样的,在这里就不做过多的介绍了。

四、可以使用Control的一个属性,(服务器控件),OnClientClick

为该属性赋值OnClientClick="SayHello()";则就会调用客户端的方法,该方法的本质就是一个客户端的方法。(该属性只有服务器控件具有,在编译成源文件时,其实是转换成对应的事件,如OnClientClick会转换成onclick)

示例:

       <asp:Button ID="Button1" runat="server"OnClientClick="Get()" Text="OnClientClick方法测试"/>

         

<2>前台JS调用后台的方法

一、最简单的一种方式,在前台的JS函数中写下如下代码:

Var name=<%=SayHello()%>

Asp.NET 以前的ASP就是通过这样的方式将cs代码写到apsx页的,在<% %>中就可以写cs代码了,效果跟在cs页写一样。

在前台页面<head><head>节点中添加如下代码:

<s cript type="text/javas cript>

function Get() {

      var hello="<%=SayHello() %>";

      alert(hello);

       }

   </s cript>

后台cs页代码如下:

      public string SayHello()

       {

           return " Javas cript调用后台代码显示姓名: Olive";

       }

结果:

二、通过辅助按钮实现前台JS调用后台代码(这样相当于添加多了一个按钮

1、先在前台添加一个服务器端按钮,双击,进入后台.cs页,写下将要执行的代码

如下:

protected void Button4_Click(object sender,EventArgs e)       {

         //在此方法里写下要执行的代码,此处为简单的示例  

           Response.Write("<s cript>alert('O(_)O哈哈~你好!')</s cript>");

}

2、将该按钮的Width属性设为0,将Height属性设为0,形如

<asp:Button ID="btnhoutai" runat="server"Text="" Width="0"Height="0"

            onclick="Button4_Click" />

3、在前台添加一个JS函数,如下:

function Show1() {

           document.getElementById("btnhoutai").click();

        }

4、添加html按钮并将其onclick="Show1()";

如下:

<input id="btnjs"type="button" value="Js 调用后台C#函数" onclick="Show1()"/>

经过以上这四步就可以实现JS调用后台的代码了。

ASP.NET前台JS与后台CS函数如何互相调用

在实际的Web开发中,我们可能会常常遇到后台调用前台JS代码或者前台JS调用后台代码的情况。今天就把比较实用的前后台相互调用的方法总结出来和大家分享。 后台代码调用前台JS代码 一、说到后台代码调...
  • skyandcode
  • skyandcode
  • 2013年07月06日 18:12
  • 22532

C#和JavaScript交互(asp.net前台和后台互调)

C#代码与javaScript函数的相互调用: 1.如何在JavaScript访问C#函数? 2.如何在JavaScript访问C#变量? 3.如何在C#中访问JavaScript的...
  • u014180504
  • u014180504
  • 2017年04月26日 08:49
  • 1147

多种方式实现JS调用后台方法进行数据交互

多种方式实现JS调用后台方法进行数据交互     项目开发过程中很多地方都需要前端和后台的数据交互,几种典型常用的方法如利用控件的AutopostBack属性、Button提交表...
  • u011233568
  • u011233568
  • 2015年04月29日 14:25
  • 2265

ASP.NET前台JS与后台CS函数如何互相调用

在实际的Web开发中,我们可能会常常遇到后台调用前台JS代码或者前台JS调用后台代码的情况。今天就把比较实用的前后台相互调用的方法总结出来和大家分享。 后台代码调用前台JS代码 一、说到后...
  • u014023256
  • u014023256
  • 2014年04月01日 15:09
  • 264

javascript与cs代码互相调用 asp.net中前台javascript与后台C#交互 这里主要包括了javascipt与后台CS代码四种方法互调(其中包括函数与变量的访问)

这里主要包括了javascipt与后台CS代码四种方法互调(其中包括函数与变量的访问)。   1.JavaScript访问C#函数    javaScript函数中执行C#代码中的函数: ...
  • hxkjnet360
  • hxkjnet360
  • 2012年08月29日 13:35
  • 1140

javascript与cs代码互相调用 asp.net中前台javascript与后台C#交互(转)

这里主要包括了javascipt与后台CS代码四种方法互调(其中包括函数与变量的访问)。   1.JavaScript访问C#函数    javaScript函数中执行C#代码中的函数...
  • breaker892902
  • breaker892902
  • 2013年06月05日 20:54
  • 2724

Asp.net中后台*.cs与前台JS脚本之间相互调用的几点心得

Asp.net中后台*.cs与前台JS脚本之间相互调用的几点心得 一、 经 常需要在asp.net中“后台代码*.cs文件中调用javascript脚本中已经定义好的脚本函数”。 ...
  • xb12369
  • xb12369
  • 2012年06月08日 10:59
  • 744

Asp.net中后台*.cs与前台JS脚本之间相互调用的几点心得

Asp.net中后台*.cs与前台JS脚本之间相互调用的几点心得      一、 经 常需要在asp.net中“后台代码*.cs文件中调用javascript脚本中已经定义好的脚本函数”。 ...
  • minsenwu
  • minsenwu
  • 2012年04月25日 12:17
  • 9392

关于“Asp.net 中后台CS读取数据库数据生成数组传递给前台页面JS使用”

最近,由于项目需要需要将传感器的地理位置信息标记在百度地图上,无线传感器节点能够将自身经纬度信息,通过网络传递到数据库存储起来,然后将其读出来并在百度地图在地图上标记显示出来. 首先,在后台CS需要将...
  • zjx8613
  • zjx8613
  • 2012年05月30日 16:12
  • 6087

asp.net中前台js变量与后台c#的相互调用方法

C#代码与javaScript函数的相互调用 问: 1.如何在JavaScript访问C#函数? 2.如何在JavaScript访问C#变量? 3.如何在C#中访问JavaScript...
  • immortal_mcl
  • immortal_mcl
  • 2013年10月16日 21:37
  • 2646
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:ASP.NET前台JS与后台CS函数如何互相调用
举报原因:
原因补充:

(最多只允许输入30个字)