JQuety调用C#后台
一、下载jquery.js文件,这个有很多版本的,百度一下自行下载,我这里测试时用jquery-1.4.2.min.js。
二、创建cs的方法,待javascript测试调用。
cs的方法必须声明为public static才行,而且前面还要添加“[WebMethod]”,这时候要引入包using System.Web.Services;。
例如:
[WebMethod]
public static string getString(string str)
{
return “aaa”;
}
三、在aspx、htm等页面进行调用cs的方法。
3.1首先htm页面要引入jquery-1.4.2.min.js文件。
<script src="js/jquery-1.4.2.min.js" language="javascript" type="text/javascript"></script>
3.2然后创建一个通用的javaScript方法getValueByAjax(requestUrl, paramsString)来调用cs的方法,这样就很方便了,具体调用方法如下:
假如cs方法是test.aspx.cs里面有两个方法,一个是没有参数的,一个是有参数的,
[WebMethod]
public static string getName()
{
return “aaa”;
}
[WebMethod]
public static string getString(string str,int id)
{
return str+"_"+id;
}
这时候在javascript里面调用如下:
var name = getValueByAjax("test.aspx\getName");
var str = getValueByAjax("test.aspx\getName","str:'"+"hahaha’,id:"+123);
在这里要特别注意一下:getValueByAjax方法的参数paramsString可以多个,或者没有,这个要根据调用的cs方法的参数有关系,paramsString的输入值是与cs方法的参数名称和类型有关系的,格式是:参数名称:参数值,假如参数是字符串则参数值还要加上单引号“‘”。
四、完整的代码。
cs代码:
- using System;
- using System.Collections.Generic;
- using System.Linq;
- using System.Web;
- using System.Web.UI;
- using System.Web.UI.WebControls;
- using System.Web.Services;
- public partial class ObjManage : System.Web.UI.Page
- {
- protected void Page_Load(object sender, EventArgs e)
- {
- }
- [WebMethod]
- public static string getString()
- {
- return "This is JQuery";
- }
- [WebMethod]
- public static string getName(string name,int id)
- {
- return name + "_" + id;
- }
- }
htm代码:
- <!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>
- <title></title>
- <script src="js/jquery-1.4.2.min.js" language="javascript" type="text/javascript"></script>
- <script type="text/javascript">
- var ajaxType = "Post";
- var ajaxAsync = false;
- var ajaxContentType = "application/json; charset=utf-8";
- var ajaxDataType = "json";
- function getValueByAjax(requestUrl, paramsString) {
- var strRetValue = "";
- if (paramsString != null)
- paramsString = "{" + paramsString + "}";
- $.ajax({
- type: ajaxType,
- async: ajaxAsync,
- url: requestUrl,
- contentType: ajaxContentType,
- dataType: ajaxDataType,
- data: paramsString,
- success: function(data) {
- strRetValue = data.d;
- },
- error: function(err) {
- strRetValue = "";
- }
- });
- return String(strRetValue);
- }
- function alertString() {
- var str = getValueByAjax("ObjManage.aspx/getString");
- alert(str);
- var name = getValueByAjax("ObjManage.aspx/getName", "name:'Jony', id:" + 123);
- alert(name);
- }
- </script>
- </head>
- <body>
- <input type="button" value="获取信息" onclick="alertString();" />
- </body>
- </html>
以上都通过了测试,假如哪位有什么问题,可留言!
C#后台调用JQuery
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="testJqFun.aspx.cs" Inherits="testJqFun" %>
<!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"
src
=
"js/jquery.js"
></
script
>
<
script
type
=
"text/javascript"
>
function jqueryFun() {
alert("我是被后台调用的");
alert("用jq获取div内容为:"+$("#d1").html());
}
</
script
>
</
head
>
<
body
>
<
form
id
=
"form1"
runat
=
"server"
>
<
div
id
=
"d1"
style
=
"display:none"
>
asdfasdf
</
div
>
</
form
>
</
body
>
</
html
>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
using
System;
using
System.Collections.Generic;
using
System.Web;
using
System.Web.UI;
using
System.Web.UI.WebControls;
public
partial
class
testJqFun : System.Web.UI.Page
{
protected
void
Page_Load(
object
sender, EventArgs e)
{
//调用前台jq方法
Page.ClientScript.RegisterStartupScript(
this
.GetType(),
"pop"
,
"jqueryFun()"
,
true
);
}
}
|