本次使用 Ajax.dll,AjaxPro.dll 两个类库
1.首先添加引用:Ajax.dll,AjaxPro.dll 文件在 Libiary 目录下
2.配置 WebConfig 属性
将 下面2行 放在 httpHandlers 节点里面, 如下
<add verb="POST,GET" path="ajax/*.ashx" type="Ajax.PageHandlerFactory, Ajax"/> <add verb="*" path="ajaxpro/*.ashx" type="AjaxPro.AjaxHandlerFactory, AjaxPro"/>
例如:
<httpHandlers> <remove verb="*" path="*.asmx"/> <add verb="*" path="*.asmx" validate="false" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/> <add verb="*" path="*_AppService.axd" validate="false" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
<add verb="GET,HEAD" path="ScriptResource.axd" type="System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" validate="false"/> <-- 这两行 注册类库使用, 标记 相关文件的解析 !--> <add verb="POST,GET" path="ajax/*.ashx" type="Ajax.PageHandlerFactory, Ajax"/> <add verb="*" path="ajaxpro/*.ashx" type="AjaxPro.AjaxHandlerFactory, AjaxPro"/> </httpHandlers>
3.为页面使用做准备, *.aspx.cs 文件 里做 注册
AddUser 是 网页的名称, 也就是类名
Ajax.Utility.RegisterTypeForAjax(typeof(AddUser));
此声明 一定要在 IsPostBack 前面, 因为每一次页面刷新 都需要,
所以一般放在 Page_Load 事件的第一句话
例如:
public partial class AddUser : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { //表示当前 注册 可以调用 ajax 的类 AddUser Ajax.Utility.RegisterTypeForAjax(typeof(AddUser)); if (!IsPostBack) { } } }
4. 标记 要使用Ajax 调用 的方法
允许ajax 的 调用的 类, 必须是 public ,而且需要 做 声明标记
[Ajax.AjaxMethod(Ajax.HttpSessionStateRequirement.Read)]
例如:
[Ajax.AjaxMethod(Ajax.HttpSessionStateRequirement.Read)] public int addCategory_click(string cateName, string empId) { try { //根据输入的 参数 不同, 模拟返回 一个随机数表示 自增列的Id int categoryId = cateName.Length+empId.Length; if (categoryId==2) { //如果输入的是 用户名和密码长度 等于2, 即返回0, //说明 进入到了 本方法 return 0; } //返回随机数 1到 categoryId 的长度, 结果大于0 categoryId = new Random().Next(1, categoryId); return categoryId; } catch { return 0; } }
5.页面上的使用
先引入 jquery,当然是为了下面操作使用 btn_add_click 方法:
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
function btn_add_click() {
var loginname = $("#txt_loginname").val();
var pwd = $("#txt_pwd").val();
// 这里可以传入多个参数 或者 不传参数
// 调用方式: 当前 类名.方法名
AddUser.addCategory_click(loginname, pwd, function (data) {
var cateId = parseInt(data.value); //返回 int类型
// alert(cateId);
if (cateId == 0) {
//跳转
alert("输入2位");
} else {
alert("添加成功");
}
});
}
网页Body部分
<body> <form id="form1" runat="server"> <div style=" 500px; border:1px solid pink; margin:0 auto;"> <table> <tr><td>用户名:</td><td> <input type="text" id="txt_loginname" value="" /></td></tr> <tr><td>密码:</td><td><input type="password" id="txt_pwd" value="" /></td></tr> <tr><td colspan="2"><input type="button" value="添加" onclick="btn_add_click();" name="btn_add" id="btn_add" /></td></tr> </table> </div> </form> </body>
接下来是 发放源代码: 源代码下载