黄博文的地盘

专注WEB开发,共闯编程之路。

« Asp.net网站开发中的三层架构一个通用的数据库访问类(sql server数据库) »

在asp.net网站开发中使用ajax技术

今天给大家讲下如何在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的集成一定会有的。那时就要和大家一起学习了。

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

日历

最新评论及回复

最近发表

Powered By Z-Blog 1.8 Devo Build 80201

蜀ICP备08002594号. All Rights Reserved.
黄博文 版权所有 huangbowen521@126.com