Asp.Net+Extjs实现登录

浏览数：60 / 时间：2015年06月09日

通过对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="css/ext-all.css" rel="stylesheet" type="text/css" />
    <script src="js/ext-base.js" type="text/javascript"></script>
    <script src="js/ext-all.js" type="text/javascript"></script>
    <script type="text/javascript" language="javascript">
        var loginPanel;
        Ext.onReady(function () {
            //1.画一个登录的Panel
            loginPanel = new Ext.form.FormPanel({
                labelWidth: 40,
                width: 230,
                height: 120,
                frame: true,
                bodyStyle: "padding:20", //给这个面板添加内间距  
                items: [
                        { xtype: "textfield", id: "userName", fieldLabel: "用户名", style: "margin:1 3 15 3", labelWidth: 10, emptyText: "请输入用户名...", allowBlank: false, blankText: "用户名不能为空" },
                     { xtype: "textfield", id: "userPass", fieldLabel: "密   码", style: "margin:1 3 15 3", labelWidth: 10, inputType: "password" }
                  ]
            });

            //2.定义一个检测是否登录成功的函数CheckLogin
            function CheckLogin() {
                var userName = Ext.getCmp("userName").getValue(); //用户名
                var userPass = Ext.getCmp("userPass").getValue(); //密 码 

                if (Ext.util.Format.trim(userName) == "" || Ext.util.Format.trim(userPass) == "") {//用户名和密码不能为空   
                    Ext.Msg.alert("提示", "用户名或密码不能为空");
                    return;
                }

                Ext.Ajax.request({
                    url: "Extjs.ashx?userName=" + userName + "&passWord=" + userPass, //将用户名和密码传送到url   
                    method: "get",
                    success: function (response) {
                        var getData = response.responseText; //获取服务器数据 
                        if (getData == "ok") {
                            loginSuccess(); //登录成功了    
                        } else {
                            Ext.Msg.alert("警告", "登录失败！");
                        }
                    }, failure: function (response, options) { alert("失败"); }
                });
            }

            //3.定义一个登录窗体--win，将loginPanel添加到登录窗体中；
            var win = new Ext.Window({
                title: "登录窗体",
                minimizable: true, //最小化   
                maximizable: true, //最大化   
                width: 240,
                height: 186,
                frame: true,
                items: [loginPanel],
                //4.在登录窗体中添加“确定”和“取消”，为“确定”按钮绑定登录验证函数CheckLogin
                buttons: [{ text: "确定", handler: CheckLogin }, { text: "取消"}]
            });

            //5.为登录窗体绑定一个最小化事件  
            win.minimize = function () {
                Ext.MessageBox.confirm("提示", "是否要最小化", minwindow);
                function minwindow(btn) {
                    if (btn == "yes") {
                        Ext.Msg.alert("提示", "确定最小化么", function () { alert("成功最小化"); });
                    }
                }
            }

            //6.定义一个登录成功弹出新窗体函数loginSuccess；  
            function loginSuccess() {
                var winLoginSuccess = new Ext.Window({
                    title: "登录成功后的窗体",
                    minimizable: true, //最小化   
                    maximizable: true, //最大化   
                    collapsible: true,
                    width: 550,
                    height: 550,
                    frame: true,
                    items: [{ xtype: "button", frame: true, text: "我是登录成功后窗体的一个按钮"}]
                });
                win.hide(); //登录窗体隐藏   
                winLoginSuccess.show(); //显示登录成功后的窗体   
            }

            win.show(); //显示窗体 
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    </div>
    </form>
</body>
</html>

后台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函数弹出新窗体；否则，则弹出登录失败的提示。

运行代码后，登录页面效果图如下：