js和cs后台的值相互传递和函数的相互调用
cs传值给js
aspx代码:
1 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="JsCallCsValue.aspx.cs" Inherits="JsCallCsValue" %>
2
3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4
5 <html xmlns="http://www.w3.org/1999/xhtml">
6 <head runat="server">
7 <title></title>
8
9 <script language="javascript" type="text/javascript">
10 <!--
11 //宣告一个变量,方便调用
12 var jsVariable ;
13 //在Javascript使用WebControl Literal 可以调用aspx.cs需要的值。
14 <asp:Literal id="Literal1" runat="server" />
15 //下面是调用变量。当然你的处理代码不是简单的如下只抛出信息而已。
16 alert(jsVariable);
17
18 // -->
19 </script>
20 </head>
21 <body>
22 <form id="form1" runat="server">
23 <div>
24
25 </div>
26 </form>
27 </body>
28 </html>
cs后台代码:
1 using System;
2 using System.Collections.Generic;
3 using System.Linq;
4 using System.Web;
5 using System.Web.UI;
6 using System.Web.UI.WebControls;
7
8 public partial class JsCallCsValue : System.Web.UI.Page
9 {
10 protected void Page_Load(object sender, EventArgs e)
11 {
12 //宣告一个cs变量
13 string csVariable = "Hello Insus.NET!";
14 //为Web控件赋值,值中有一个js的变量jsVariable,即是aspx页面12行的变量。
15 this.Literal1.Text = "jsVariable=\"" + csVariable + "\";";
16 }
17 }
这里通过<asp:Literal id=“Literal1” runat=“server” /> 控件实现将cs后台中的csVariable变量传递到前端js中的jsVariable 中。这是相对于其他方法简单快捷的方式。
js传值给cs后台
常见的是通过Ajax将js中的值传递到cs,也可以用另一种方式,就是通过调用函数时传参的方式传到后台。ps:代码在后面的函数调用
js调用后台cs函数
无参数调用
aspx代码:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>无标题页</title>
<mce:script type="text/javascript" ><!--
var demo=function(){
var b= "<%=test() %>";
alert(b);
}
// --></mce:script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="button" id="id1" onclick="demo()" value="JS调用CS" />
</div>
</form>
</body>
</html>
cs后台代码:
public string test()
{
return "Hello World";
}
这里调用通过 "<%=test() %>"的方式调用cs中的 test()函数。这里是无参数调用。
有参数调用
aspx代码:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>无标题页</title>
<mce:script type="text/javascript" ><!--
var demo=function(){
var a="Hello World";
var b= '<%=test("'+a+'") %>';//这里一定注意单引号和双引号的使用!!!!!
alert(b);
}
// --></mce:script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="button" id="id1" onclick="demo()" value="JS调用CS" />
</div>
</form>
</body>
</html>
cs后台代码:
public string test(string a)
{
return a;
}
这里通过 ‘<%=test("’+a+’") %>‘调用函数test(string a) ,但是你测试时会发现根本没有将变量a传递了,只是传递了定值’+a+’,这是一个坑。所以通过此方法只能是调用无参数的函数。
接下来用另一种既可以传无参数函数也可以传有参数函数。
PageMethods
aspx代码:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>无标题页</title>
<script type="text/javascript" language="javascript">
<!--
function minbzdm()
{
PageMethods.OK(xxx);
}
function xxx(result)
{
alert(result);
}
//-->
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true">
</asp:ScriptManager>
<div>
<input type='button' value='删除' onclick='minbzdm()' />
</div>
</form>
</body>
</html>
cs代码:
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
[System.Web.Services.WebMethod]
public static string OK()
{
return "OK";
}
}
这是通过PageMethods实现js调用cs后台函数的方法。有参数和无参数都可以。并且可以传值给后台。
通过PageMethods方法来实现JS调用CS,必须注意一下几点:
【1】静态的方法
public static
【2】需要在cs方法上加上:
[System.Web.Services.WebMethod]
【3】需要自定义一个函数接受结果
function xxx(result)
{
alert(result);
}
【4】ScriptManager 必须设置成 EnablePageMethods=“true”
cs调用js函数的方法
cs后台代码:
protected void OnEditing(object sender, GridViewEditEventArgs e)
{
int id = Int32.Parse(GridView1.Rows[e.NewEditIndex].Cells[1].Text);///得到你要编辑文章的id
String Url = "AddArticle.aspx?ID=" + id.ToString();AddArticle.aspx是你要找到编辑的页面
ScriptManager.RegisterStartupScript(UpdatePanel1, this.GetType(), "redirectMe", "confirm_1('"+code+"');", true);
}
aspx中js函数代码:
function confirm_1(code) {
alertify.confirm("是否和微信号绑定?以后方便联系您!", function (e) {
if (e) {
PageMethods.WXconnect(code, openid);
alertify.success("绑定成功");
return true;
} else {
PageMethods.WXdisconnect(code);
alertify.error("绑定失败");
return false;
}
});
};
另一种cs调用js的方法是直接在后台cs中写js
string script = "if ( window.confirm('找回密码成功"+role.Rolename+",点击确认跳转到登录页面')) { window.location.href='login.aspx' } ;";
ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "key", script, true);
这种方法不仅可以调用js而且可以引用cs中的变量,不用cs后台向前端传值。