asp.net异步触发用法（AJAX）

怪我咯

发布： 2017-03-31 13:20:35

原创

1953人浏览过

今天做项目中，由于要异步触发，就是当文本框失去焦点时到数据库去检查一次，然后就想起了三种方式。

简单介绍下它的用法：

一.ajaxpro的使用

1.在项目中添加引用，浏览找到ajaxpro.2.dll文件

2.在web.config中的system.web里面写入以下代码
</configuration>
<system.web>
<httphandlers>
<add verb="*" path="*.ashx" type="ajaxpro.ajaxhandlerfactory,ajaxpro.2"/>
</httphandlers>
</system.web>
<//configuration>

3.在加载事件中，加入
ajaxpro.utility.registertypeforajax(typeof(类名));

4.写的方法都要用
[ajaxpro.ajaxmethod]开头，然后在写方法

5.调用时必须写清楚
命名空间名.类名.方法，例:webui._default.getdata();

6.调用可分两中方法(同步调用，异步调用)

//在后台写的无参方法
[ajaxpro.ajaxmethod]
public string getstr()
{
return "hello my friends";
}
//在后台写的有参方法
[ajaxpro.ajaxmethod]
public string getstring(string str)
{
return str + "say: hello my friends";
}

a.同步调用
(1).拖入html控件button
(2).双击,自动显示在.aspx的脚本中
(3).在里面写入你要输入的内容
例:
//------------------同步调用无参-----------
function button1_onclick()
{
var res=webui._default.getstr();
alert(res.value);
}

//------------------同步调用有参------------
function button2_onclick() //textbox1为服务器控件
{
var str=document.getelementbyid("<%=textbox1.clientid%>").value;
var res=webui._default.getstr(str);
alert(res.value);
}

b.异步调用
(1).拖入html控件button
(2).双击,自动显示在.aspx的脚本中
(3).在里面写入你要输入的内容
例：
//-----------------异步调用无参-----------------
function button3_onclick() {
webui._default.getstr(getstrcallback);
}
function getstrcallback(res)
{
alert(res.value);
}
//-----------------异步调用有参-----------------
function button4_onclick() {
var str=document.getelementbyid("<%=textbox1.clientid %>").value;
webui._default.getstring(str,getstringcallback);
}
function getstringcallback(res)
{
alert(res.value);
}

7.调用对象

//对象
[ajaxpro.ajaxmethod]
public class getclass()
{
class cla = new class();
cla.c_id = 100;
cla.c_name = "34班";
cla.count = 20;
return cla;
}
//------------------同步调用对象-----------
function button5_onclick() {
var res=webui._default.getclass().value;
alert("班级编号："+res.c_id+"名称："+res.c_name+"人数："+res.count);
}
//------------------异步调用对象-----------
function button6_onclick() {
webui._default.getclass(getclasscallback);
}
function getclasscallback(clas)
{
var res=clas.value;
alert("班级编号："+res.c_id+"名称："+res.c_name+"人数："+res.count);
}

8.数据集的使用
//方法
[ajaxpro.ajaxmethod]
public dataset getinfo()
{
return webui.getdataset.getlist();
}

//--------------------异步调用数据集--------------
function button8_onclick() {
webui._default.getinfo(getdatasetcallback);
}
function getdatasetcallback(res)
{
var dataset=res.value;
var strhtml="";
strhtml +='<table style ="border-collapse:collapse ; border-color:gray ;" border="1px">';
strhtml +=' <tr>';
strhtml +=' <td>学生编号</td>';
strhtml +=' <td>名称</td>';
strhtml +=' <td>年龄</td>';
strhtml +=' </tr>';

for(var i=0;i<dataset.tables[0].rows.length;i++)
{
strhtml +=' <tr>';
strhtml +=' <td>'+ dataset.tables[0].rows[i].stu_id +'</td>';
strhtml +=' <td>'+ dataset.tables[0].rows[i].stu_name +'</td>';
strhtml +=' <td>'+ dataset.tables[0].rows[i].stu_age +'</td>';
strhtml +=' </tr>';
}
strhtml +=' </table>';
thedata.innerhtml=strhtml;//thedata是一个<p id="thedata"></p>中的thedata
}

9.验证码的使用

//----------------------验证码的使用(必须采用同步调用)----------------------

//验证码的使用
[ajaxpro.ajaxmethod]
public bool validcodedata(string code)
{
return (httpcontext.current.session["checkcode"].tostring()==code);
}

function button9_onclick() {
var code=document.getelementbyid("<%=textbox2.clientid %>").value;
var bool=webui._default.validcodedata(code).value;
if(bool==true)
{
alert("ok");
}else
{
alert("no");
}
}
ajaxpro.dll文件网上很多的，自己下，如果找不到呢，给我发个留言，我发你邮箱

二，直接调用：
javascript中：<%=后台方法%>
function says()
{
alert("<%=say()%>");
}
function del()
{
alert("<%=deletebyid(8)%>");//deletebyid(8)后台方法名
}

三，采用icallbackeventhandler回调

/**//*
* 对icallbackeventhandler接口进行声明，要在客户端调用服务端代码而不回发，必须声明该接口并且实现它的两个方法：
* raisecallbackevent()、getcallbackresult()
* raisecallbackevent()的参数是从前台传过来的,根据传来的参数执行不同的代码并将结果用getcallbackresult()返回前台
*/

//必须声明system.web.ui.icallbackeventhandler接口
public partial class _default : system.web.ui.page, system.web.ui.icallbackeventhandler
{
//定义一个回调的返回值
private string result;
//定义两个变量，用来接收页面传过来到操作数
private string num1;
private string num2;
protected void page_load(object sender, eventargs e)
{

}

/**//// <summary>
/// 该方法是回调执行的方法，根据参数在这个方法中处理回调的内容,该方法没有返回值
/// </summary>
/// <param name="eventargument">此参数是从客户端传过来的</param>
public void raisecallbackevent(string eventargument)
{
//eventargumeng 为javascript从客户端传递的参数，本例传过来三个参数用“/”分割将每个参数取出存入加载事件0
string[] pagparams = eventargument.split('/');
num1 = pagparams[1];
num2 = pagparams[2];
//根据第一个参数（所选的加载事件1），调用不同的执行加载事件2
switch (pagparams[0])
{
case "0":
result = add(); break;
case "1":
result = sub(); break;
case "2":
result = multi(); break;
case "3":
result = pision(); break;
}
}

/**//// <summary>
/// 该方法是返回回调的结果给客户端
/// </summary>
/// <returns></returns>
public string getcallbackresult()
{
return result;
}

//一下四个函数是通过raisecallbackevent方法，调用的回调要执行操作的函数
private string add()
{
double addresult = double.parse(num1) + double.parse(num2);
return addresult.tostring();
}

private string sub()
{
double addresult = double.parse(num1) - double.parse(num2);
return addresult.tostring();
}

private string multi()
{
double addresult = double.parse(num1) * double.parse(num2);
return addresult.tostring();
}

private string pision()
{
double addresult = double.parse(num1) / double.parse(num2);
return addresult.tostring();
}
}