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

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

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

===============后台代码调用前台JS代码===============

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

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

该方法有两个重载,

、要注册的启动脚本文本(一般为"<s cript>函数()</s cript>");

示例:

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

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

示例:

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

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

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

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

Clientscript.RegisterClients criptBlock(this.GetType(),"SayHello2", "ShowPerson('" + age + "')",true);       Clientscript.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属性(服务器控件)

这也是一种比较简单好用的方法,可以将该方法和控件的客户端方法相关联,比如“onblur,onfocus,onmousemove,onmouseover“等,在这里只是把该方法作为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方法测试"/>

===============前台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调用后台代码(这样相当于添加多了一个按钮)

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

如下:

protected void Button4_Click(object sender,EventArgs e)       {

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

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

}

,形如

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

onclick="Button4_Click" />

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

function Show1() {

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

}

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

如下:

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

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

from:http://www.bdqn.cn/news/201307/10227.shtml

ASP.NET前台JS与后台CS函数如何互相调用的更多相关文章

  1. asp&period;net 前台js和后台得到FormView中的控件,以TextBox为例

    一.前台js获取FormView中的控件 js得到前端控件的ID,比如TextBox(这里设置其ID为TextBox1),大家都知道,是document.getElementById("&l ...

  2. ASP&period;NET前台代码绑定后台变量方法总结

    经常会碰到在前台代码中要使用(或绑定)后台代码中变量值的问题.一般有<%= str%>和<%# str %>两种方式,这里简单总结一下.如有错误或异议之处,敬请各位指教. 一方 ...

  3. 转:ASP&period;NET前台代码绑定后台变量方法总结

    经常会碰到在前台代码中要使用(或绑定)后台代码中变量值的问题.一般有<%= str%>和<%# str %>两种方式,这里简单总结一下.如有错误或异议之处,敬请各位指教. 一方 ...

  4. &lbrack;ASP&period;NET&rsqb; 前台代码绑定后台变量方法总结 &lbrack;转&rsqb;

    原文链接:https://www.cnblogs.com/lerit/archive/2010/10/22/1858007.html 经常会碰到在前台代码中要使用(或绑定)后台代码中变量值的问题.一般 ...

  5. WebView中Js与Android本地函数的相互调用

    介绍 随着Html5的普及,html在表现力上不一定比原生应用差,并且有很强的扩展兼容性,所以越来越多的应用是采用Html与Android原生混合开发模式实现. 既然要实现混合开发,那么Js与Andr ...

  6. net中前台javascript与后台c&num;函数相互调用

    问: 1.如何在JavaScript访问C#函数? 2.如何在JavaScript访问C#变量? 3.如何在C#中访问JavaScript的已有变量? 4.如何在C#中访问JavaScript函数? ...

  7. 前台js与后台方法互调

    一:后台调用前台js的方法 ClientScript.RegisterStartupScript(ClientScript.GetType(), "myscript", &quot ...

  8. RSA前台js加密&comma;后台C&num;解密

    一.需求: 为了安全,项目中前台登陆用的密码需要加密传到后台,后台c#解密登陆密码. 二.解决方案 采用非对称加密算法RSA来达到目的,前台登陆页面一加载便发送一次ajax请求获取后台产生的公钥,用于 ...

  9. 前台js接收后台的json数据

    后台返回的json数据,如php的: return json_encode($data); 在前台 js接收如下: function json2object(str){ var jsstr = str ...

随机推荐

  1. 什么是F&num;

    作者:Alexey Bykov@EastBancTech原文:http://bit.ly/1nGroOz翻译:kk1982.com转载请注明 简介 F#是由微软研究团队为.NET平台研发的一种现代函数 ...

  2. &lbrack;工作中的设计模式&rsqb;桥接模式bridge

    一.模式解析: 策略模式一节讲过,通过扩展持有者,使持有者形成抽象类,然后实现多个具体持有者,策略模式可以转化为桥接模式. 桥接模式定义为:将抽象部分与实现部分分离,使它们都可以独立的变化,在软件系统 ...

  3. saltstack学习

    1. 创建基础镜像 2. 创建配置文件 3. 启动容器 4. 检查创建是否成功 1. 创建基础镜像 salt-master, 文件名Dockerfile # VERSION 1.0 # TO_BUIL ...

  4. Zabbix通过percona监控MySQL

    因为Zabbix自带的MySQL监控没有提供可以直接使用的Key,所以一般不采用,业界的同学们都使用Percona Monitoring Plugins 监控 MySQL的方式 Percona介绍 P ...

  5. 3&period;6html学习笔记之样式选择

    1.元素选择器 *{padding:0;margin:0;} p,span{} 2.类选择器 *.class{} p.class{} <p class="important class ...

  6. js脚本同步、异步与延迟

    一般,我们通过src引入js文件时建议在页面末尾引入,因为会阻塞页面的渲染.defer和async可以达到同样效果 当HTML解析器遇到<script>元素时,它必须先执行脚本,然后再恢复 ...

  7. Tomcat 7&period;0 进入项目管理页面时的密码问题

    tomcat7 这个版本,官方网下载的原始包项目管理页面的权限和之前版本的配置有点区别. 到Tomcat的conf文件夹下找到tomcat-users.xml文件,有配置权限的配置文件.     ma ...

  8. Atlas-手淘组件化框架的前世今生和未来的路

    今天手淘技术团队宣布正式开源它们的容器框架Atlas,项目地址: https://github.com/alibaba/atlas 同时他们还推出了项目官网,上线了技术文档: http://atlas ...

  9. CCF-201604-1-折点计数

    问题描述 试题编号: 201604-1 试题名称: 折点计数 时间限制: 1.0s 内存限制: 256.0MB 问题描述: 问题描述 给定n个整数表示一个商店连续n天的销售量.如果某天之前销售量在增长 ...

  10. Java经典设计模式之十一种行为型模式(附实例和详解)

    Java经典设计模式共有21中,分为三大类:创建型模式(5种).结构型模式(7种)和行为型模式(11种). 本文主要讲行为型模式,创建型模式和结构型模式可以看博主的另外两篇文章:Java经典设计模式之 ...