在实际的Web开发中,我们可能会常常遇到后台调用前台JS代码或者前台JS调用后台代码的情况。今天就把比较实用的前后台相互调用的方法总结出来和大家分享。
<1>后台代码调用前台JS代码
一、说到后台代码调用前台的JS代码很多人首先就会想到使用 ClientScript.RegisterStartupScript()方法,该方法主要是注册启动脚本文本,即在后台执行调用前台JS代码
该方法有两个重载,
1、ClientScript.RegisterStartupScript(Type type,string key ,string script)//分别表示:1、要注册的启动脚本的类型(一般直接填this.GetType()即可),2、要注册的启动脚本的键(相当于为执行脚本起一个名字,任意名即可),3、要注册的启动脚本文本(一般为"<script>函数()</script>");
示例:
ClientScript.RegisterStartupScript(this.GetType(), "SayHello", "<script>SayHello('"+name+"')</script>");//先获取用户姓名,然后再调用前台的JS函数SayHello(name);
2、ClientScript.RegisterStartupScript(Type type,string key, string script,bool flag);//该函数和第一参数的区别在于将最后一个参数设为"ture"时,第三个参数可以直接写被调用的函数,不用再加"<script></script>",这两个方法差别不是很大。
示例:
ClientScript.RegisterStartupScript(this.GetType(), "SayHello1", "SayHello('" + name + "')", true);//跟第一方法的效果一样,调用前台SayHello(name)函数,如果最后一个值设为false,则仍需添加上"<script></script>"标记
这里需要特别注意的是在注册启动脚本的时候,键是唯一的,不能重复,如果有将会报错。
二、使用ClientScript.RegisterClientScriptBloc
该方法有两个重载,使用方法几乎和ClientScript.RegisterClientScriptBloc
ClientScript.RegisterClientScriptBloc
在这里主要讲一下RegisterClientScriptBloc
RegisterStartupScript,这种方法会把JS代码嵌入在页面的底部、表单的最后 (</form>前面),适用于要在页面控件加载完成后运行的JS代
RegisterClientScriptBloc
前台JS代码:
<head runat="server">
<title></title>
<script type="text/javascript" language="javascript">
function Ceshi()
{
var a = "你们好啊!"
alert(a);
}
</script>
</head>
后台Button click事件:(选择以下任何一个都可以)
ClientScript.RegisterStartupScript(GetType(), "", "<script>Ceshi()</script>");
ClientScript.RegisterStartupScript(this.GetType(), "js", "Ceshi()", true);
ClientScript.RegisterStartupScript(GetType(), "", "Ceshi()", true);
ClientScript.RegisterStartupScript(ClientScript.GetType(), "myscript", "<script>Ceshi();</script>");
Response.Write("<script type='text/javascript'>alert('密码错误');</script>");
三、使用Control.Attribute属性
这也是一种比较简单好用的方法,可以将该方法和控件的客户端方法相关联,比如“onblur,onfocus,onmousemove,onmouseover“等,在这里只是把该方法作为Control的一个属性来用。
示例:
在Page_Load()方法里添加如下代码:
txtname.Attributes["onblur"] = "show('" + txt.Text + "')";//当用户离开文本框时,会提示所输入的内容
还可以通过这种方法来控制前台的显示。其实现方法和本例的方法都是一样的,在这里就不做过多的介绍了。
四、可以使用Control的一个属性,OnClientClick
为该属性赋值OnClientClick="SayHello()";则就会调用客户端的方法,该方法的本质就是一个客户端的方法。
示例:
<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>节点中添加如下代码:
<script type="text/javascript>
function Get() {
var hello="<%=SayHello() %>";
alert(hello);
}
</script>
后台cs页代码如下:
public string SayHello()
{
return " Javascript调用后台代码显示姓名: Olive";
}
结果:
二、通过辅助按钮实现前台JS调用后台代码
1、先在前台添加一个服务器端按钮,双击,进入后台.cs页,写下将要执行的代码
如下:
protected void Button4_Click(object sender, EventArgs e) {
//在此方法里写下要执行的代码,此处为简单的示例
Response.Write("<script>alert('O(∩_∩)O哈哈~你好!')</script>");
}
2、将该按钮的Width属性设为0,将Height属性设为0,形如
<asp:Button ID="btnhoutai" runat="server" Text="" Width="0" Height="0"
οnclick="Button4_Click" />
3、在前台添加一个JS函数,如下:
function Show1() {
document.getElementByIdx_x("btnhoutai").click();
}
4、添加html按钮并将其οnclick="Show1()";
如下:
<input id="btnjs" type="button" value="Js 调用后台C#函数" οnclick="Show1()"/>
经过以上这四步就可以实现JS调用后台的代码了。