aspx代碼：
<%@ 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);///得到你要編輯文章的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後臺向前端傳值。