今天给大家讲下如何在asp.net开发中使用ajax实现动态无刷新过程。
在这里我们用的是微软提供的ajaxpro.2.dll;这个组件可以在网上直接下载。
首先我们打开vs2005,选择文件->新建->新建网站。开发语言暂且选择c#。要在项目中使用这个组件要先做两个事情。
一,在网站中添加对这个组件的引用。方法是右键点击此项目/添加引用/浏览.选中这个dll文件,点击确定即可。
二,新建一个config配置文件。在此配置文件的system.web中添加如下代码:
<httpHandlers>
<add verb="POST,GET" path="ajaxpro/*.ashx" type="AjaxPro.AjaxHandlerFactory, AjaxPro.2"/>
</httpHandlers>
这样我们就可以在开发过程中使用微软给我们提供的功能了。
我讲一个用户登陆的例子。通过这个小例子来初探ajax的功能。
新建一个web页面,选择将代码放在单独的文件中,并命名为login.aspx.插入一个表格,在表格中插入input,button等html控件。Login.aspx的全部代码为:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="login.aspx.cs" Inherits="login" %>
<!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="" type="text/">
function check() //点击登陆时响应此函数
{
var username = document.getElementById("txtname").value; //获取用户名文本框中的值
var userpwd = document.getElementById("txtpwd").value; //获取密码文本框中的值
var showmsg = document.getElementById("showmsg"); //获取id为 showmsg 的 div层
showmsg.innerHTML = "";
if(username.length <=0 ) //如果用户名为空,提示用户输入
{
showmsg.innerHTML = "请输入用户名";
return;
}
if(userpwd.length <=0) //如果密码为空,提示用户输入
{
showmsg.innerHTML = "请输入用户密码";
return;
}
Web.DoLogin(username,userpwd,re_login); //调用服务器端方法 其中第一个参数为用户名,第二个参数为密码,第三个参数为回调函数名
}
function re_login(re) //回调函数
{
var showmsg = document.getElementById("showmsg");
switch(re.value) //根据返回值的不同显示响应的提示信息
{
case "1": showmsg.innerHTML = "没有此用户";break;
case "2": showmsg.innerHTML = "密码错误"; break;
case "3": showmsg.innerHTML = "登陆成功"; break;
default: showmsg.innerHTML = "程序异常,请与管理人员联系" ; break;
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table>
<tr>
<td style="width: 100px">
用户名</td>
<td style="width: 100px">
<input id="txtname" type="text" /></td>
<td style="width: 100px">
</td>
</tr>
<tr>
<td style="width: 100px">
密码</td>
<td style="width: 100px">
<input id="txtpwd" type="text" /></td>
<td style="width: 100px">
</td>
</tr>
<tr>
<td style="width: 100px">
</td>
<td style="width: 100px">
<input id="btnok" type="button" value="提交" onclick="check()" /></td>
<td style="width: 100px">
</td>
</tr>
</table>
<div id="showmsg">
</div>
</div>
</form>
</body>
</html>
这就是login.aspx 中全部代码。接下来是login.aspx.cs中的全部代码。
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
[AjaxPro.AjaxNamespace("Web")] //声明ajaxpro的命名空间为 Web
public partial class login : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
AjaxPro.Utility.RegisterTypeForAjax(typeof(login)); //对AjaxPro在页Page_Load事件中进行运行时注册这的login是指页面类的类名。如是放在命名空间,则需要写上完整的命名空间
}
/// <summary>
/// 用户登陆 by flysky 2008-02-16
/// </summary>
/// <param name="username">用户名</param>
/// <param name="userpwd">密码</param>
/// <returns></returns>
[AjaxPro.AjaxMethod] //声明此函数为ajax方法
public string DoLogin(string username, string userpwd)
{
try //对前台传过来的值进行判断,并返回相应的结果
{
if (username != "张三")
return "1";
if (userpwd != "123456")
return "2";
return "3";
}
catch
{
return "4";
}
}
}
在此程序中,各个函数是这样执行的。
1,用户输入用户名和密码,点击提交,响应了的 check函数。
2,在check函数中首先检查用户名和密码是否为空,如果为空则给出提示信息然后返回。如果不为空则调用服务器端方法 DoLogin.
3,服务器端方法DoLogin对前台传来的参数进行处理,并将处理结果返回给前台回调函数 re_login。
4,回调函数re_login在页面显示 相应的提示信息。
当然,我这里只是讲了ajax最简单的应用。在此起个抛砖引玉的作用。大家多给批评和建议。
微软的vs2008测试版已经发布好长时间了,听说最近中文版也出现了,可惜一直没有时间去体验。我想其中对ajax的集成一定会有的。那时就要和大家一起学习了。