ASP.NET前台JS与后台CS函数如何互相调用
2013-10-25 00:11
811 查看
在实际的Web开发中，我们可能会常常遇到后台调用前台JS代码或者前台JS调用后台代码的情况。今天就把比较实用的前后台相互调用的方法总结出来和大家分享。
<1>后台代码调用前台JS代码
一、说到后台代码调用前台的JS代码很多人首先就会想到使用Clients
cript对象。
Clients cript.RegisterStartups cript()方法，该方法主要是注册启动脚本文本，即在后台执行调用前台JS代码
该方法有两个重载，
1、Clients cript.RegisterStartups
cript（Type 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);
2、Clients 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属性（服务器控件）
这也是一种比较简单好用的方法，可以将该方法和控件的客户端方法相关联，比如“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方法测试"/>
<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调用后台的代码了。
<1>后台代码调用前台JS代码
一、说到后台代码调用前台的JS代码很多人首先就会想到使用Clients
cript对象。
Clients cript.RegisterStartups cript()方法，该方法主要是注册启动脚本文本，即在后台执行调用前台JS代码
该方法有两个重载，
1、Clients cript.RegisterStartups
cript（Type 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);
2、Clients 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属性（服务器控件）
这也是一种比较简单好用的方法，可以将该方法和控件的客户端方法相关联，比如“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方法测试"/>
<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后台关闭当前页面并传值的两种方法
- asp.net表单提交时防重复提交并执行前台的JS验证
- Asp.net .net(C#) 获取当前命名空间,类名,方法名的方法
- asp.net弹出多个模态窗口
- 解决asp服务器端接收不到中文参数的问题
- ASP.NET安全
- 基于SSH2框架AspectJ的登录登出日志实现
- 技术贴：asp.net实现唯一账户在线 禁止同一帐号同时在线 asp.net实现您的帐号在别处登录，您已被迫下线！
- 一个看上去简单的问题(1)：Asp.Net动态设定事件 - 1
- win7下 IIS7配置 和 asp.net项目部署
- 在ASP.NET里面读取textarea的值
- asp.net 文件下载
- asp.net 验证码生成
- asp.net中将gridview数据导出成Excel
- Asp.net简单概念知识
- asp.net 获取客户端ip
- 一个看上去简单的问题(1)：Asp.Net动态设定事件;
- asp.net程序集编绎dll并且引用的问题！（自己备用）
- ASP.NET FORM认证配置排错记录
- asp 回发的时候样式变化