首页 > 代码库 > Asp.Net+Extjs实现登录

Asp.Net+Extjs实现登录

2024-07-08 08:29:38   223人阅读

      通过对Ext的学习，发现学习分三部曲：1.看官网的Demo，宏观了解Ext能做什么；2.看相关书籍，做理论指导；3.实现官网的Demo，体会Ext的真谛。

   在完成了第一、二部后，现在我们需要做的是实现第三步，我的目标效果是用Extjs画页面，用Asp.Net的一般处理程序做后台服务器实现登录功能。

   宏观上的指导有了，下面进行细分，我整理了实现过程，思路如下：

   1.画一个登录的Panel--loginPanel；
   2.定义一个检测是否登录成功的函数CheckLogin；
   3.定义一个登录窗体--win，将loginPanel添加到登录窗体中；
   4.在登录窗体中添加“确定”和“取消”，为“确定”按钮绑定登录验证函数CheckLogin；  
   5.为登录窗体绑定一个最小化事件；
   6.定义一个登录成功弹出新窗体函数loginSuccess

   有了理论指导，下面进行代码实现：

<!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>
    <link href=http://www.mamicode.com/"css/ext-all.css" rel="stylesheet" type="text/css" />>
      后台Extjs一般处理程序的代码实现：
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace Demo
{
    /// <summary>
    /// Extjs 的摘要说明
    /// </summary>
    public class Extjs : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            string userName = context.Request.QueryString["userName"];
            string userPass = context.Request.QueryString["passWord"];
            if (userName == "quwenzhe" && userPass == "123")
            {
                context.Response.Write("ok"); //如果验证成功则返回ok   
            }
            else
            {
                context.Response.Write("fail");//如果验证失败则返回fail   
            }
            context.Response.End();

        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}
     代码的执行过程：当点击确定按钮后，会触发CheckLogin函数，CheckLogin通过Ajax将获取的数据传到Extjs一般处理程序进行检验，并获取Extjs一般处理程序的返回值。如果返回值是ok，则调用loginSuccess函数弹出新窗体；否则，则弹出登录失败的提示。
   运行代码后，登录页面效果图如下：
     
    登录成功后的效果图如下：
    
    到此，用Extjs实现的登录功能已经完成。此外， 在学习过程中，发现自己存在浅尝辄止的问题，刚学会一点就以为自己明白了，希望大家能引以为戒，不要犯同样的错误。
    Ext是个很好的框架，学好它在很大程度上能帮助我们学习DWZ，希望大家能用心学习这块。
     


联系
我们