js和cs的值相互传递和函数的相互调用

转载于：Js与cs的值相互传递和函数的相互调用

 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="JsCallCsValue.aspx.cs" Inherits="JsCallCsValue" %><!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 language="javascript" type="text/javascript"><!--//宣告一个变量，方便调用var jsVariable ;//在Javascript使用WebControl Literal 可以调用aspx.cs需要的值。<asp:Literal id="Literal1" runat="server" />    //下面是调用变量。当然你的处理代码不是简单的如下只抛出信息而已。alert(jsVariable);// --></script></head><body><form id="form1" runat="server"><div></div></form></body></html>

cs后台代码：

using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.UI;using System.Web.UI.WebControls;public partial class JsCallCsValue : System.Web.UI.Page{protected void Page_Load(object sender, EventArgs e){//宣告一个cs变量string csVariable = "Hello Insus.NET!";//为Web控件赋值，值中有一个js的变量jsVariable,即是aspx页面12行的变量。this.Literal1.Text = "jsVariable=\"" + csVariable + "\";";}}

这里通过<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);///得到你要编辑文章的idString 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后台向前端传值。

js和cs的值相互传递和函数的相互调用相关推荐

vue.js之定义组件和子父组件数据传递及函数的相互调用
import Vue from 'vue'// 定义一个名称为componentOne的组件 const componentOne = {// props 用来接收父项所传递过来的数据,该数据是挂载在 ...
js 自由变量的取值
函数在定义的时候(不是调用的时候),就已经确定了函数体内部自由变量的作用域在函数中this到底取何值,是在函数真正被调用执行的时候确定的,函数定义的时候确定不了. 因为this的取值是执行上下文环境 ...
c语言方程改main的值_c语言main函数里的参数argv和argc解析
前言一般我们平时写main函数的话,一般都是写不带参数的比较多,而且也习惯了这样写:其实标准的形式写法,main函数是带两个参数的,这两个参数分别是:argc和argv,那么这两个参数是表示什么意思 ...
qt如何把父窗口的变量传给子窗口_父窗口和iframe子窗口之间相互传递参数和调用函数或方法...
1.父窗口向子窗口传递参数: 可以在url中添加参数:2.html?a=1&b=2&c=3 然后在子页面上可用js解析,提供一个函数: function getQueryStr(sAr ...
vue 跳添加编辑页面传两个值_vue两个组件间值的传递或修改方式
1.可以用公共的父组件来实现: 2.可以在store.js里面在设置公共变量: 3.也可以用本地存储localStorage.setItem()和localStorage.getItem(),通过修改 ...
JS面向对象特性和值类型与复合类型
JS面向对象之特性已经值类型与复合类型一些属性空对象空对象也是对象, 只是有存变量的变量名, 没有对象属性 var o ={}; 参数传递值类型: 函数内外两个变量, 两个数据, 都不相同引 ...
react组件之间传递信息/react组件之间值的传递
react组件之间传递信息/react组件之间值的传递首先咱们先来了解一下,数据是怎么进行相互间传递的; api和组件的区别:一个是逻辑层的方法函数,一个是表现层的组件(方法函数). api是一组预 ...
2019.9.18 Unity3D与Android相互传递消息 unity与ios相互传递消息
unity与Android相互传递消息参考1:http://www.xuanyusong.com/archives/667 参考2:http://www.xuanyusong.com/archive ...
C++ 笔记（14）— 指针（指针声明、取地址、取值、new/delete、NULL指针、指针运算、指针数组、数组指针、指针传递给函数、从函数返回指针）
1. 声明指针指针是一个变量,其值为另一个变量的地址,即,内存位置的直接地址.就像其他变量或常量一样,您必须在使用指针存储其他变量地址之前,对其进行声明. 指针变量声明的一般形式为: type * ...

js和cs的值相互传递和函数的相互调用

js传值给cs后台

js调用后台cs函数

cs调用js函数的方法

js和cs的值相互传递和函数的相互调用相关推荐

最新文章

热门文章