ASP.NET的登陆系统演示
一个简单的ajax登陆窗口，并实现密码验证功能。
界面效果如下：
上代码：
1.login.aspx页面（界面及若干方法CS文件没有任何处理进程，所以此页面也可以做成html静态页面）
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 | <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!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>ASP.NET的登陆系统演示--crazyfrom.com</title> <link rel="stylesheet" type="text/css" href="js/ext/resources/css/ext-all.css" /> <script type="text/javascript" src="js/ext/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="js/ext/ext-all.js"></script> </head> <body> <form id="form1" runat="server"> <div> <script type="text/javascript"> Ext.onReady(function(){ var myMask = new Ext.LoadMask(Ext.getBody(), {msg:"Please wait..."}); //LoadMask类来执行第一张图所示的效果 myMask.show(); //执行 //以下为loginWin 窗口的构造代码，不懂的可以查考一下EXT手册 loginWin=new Ext.Window({ width:300,height:150,title:'网站管理登陆系统Ver 1.0',plain:true,closable:false,resizable:false, frame:true,layout:'fit',closeAction:'hide',border:false,modal:true, items:[ loginForm=new Ext.form.FormPanel({ labelAlign:'left',buttonAlign:'center',bodyStyle:'padding:5px',frame:true,labelWidth:80, items:[ {xtype:'textfield',name:'username',fieldLabel:'用户名称',allowBlank : false,anchor:'90%',enableKeyEvents:true, listeners:{ keypress:function(field,e){ if(e.getKey()==13){ var obj=loginForm.form.findField("username"); if(obj) { obj.focus(); } } } }}, {xtype:'textfield',inputType:'password',name:'password',fieldLabel:'用户密码',allowBlank : false,anchor:'90%',enableKeyEvents:true, listeners:{ keypress:function(field,e){ if(e.getKey()==13){ var obj=loginForm.form.findField("password"); if(obj) { obj.focus(); } } } }}], buttons:[{id:"submitButton",text:'确定',scope:this,handler:function(){submit();}} ,{text:'重置',scope:this,handler:function(){loginForm.form.reset()}}] }) ] }); loginWin.show(); //执行loginWIn 使窗口显示出来 myMask.hide(); //loadMask 隐藏/关闭 //下面发送并返回结果 submit=function(){ if(loginForm.form.isValid()){ loginForm.form.doAction('submit',{ url:'checklogin.ashx', method:'post', params:'', success:function(form,action){ var result=action.result.data; if(result=='ok'){ Ext.Msg.alert('成功','恭喜您，您已经成功登陆系统！'); }else if(typeof result=='object'){ }else{ Ext.Msg.alert('错误',action.result.data); } }, failure:function(){ Ext.Msg.alert('错误','发生错误！'); } }); } } })//onReady </script> </div> </form> </body> </html> |
2.CheckLogin.ashx（登陆验证）
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <%@ WebHandler Language="C#" Class="CheckLogin" %> using System; using System.Web; public class CheckLogin : IHttpHandler { public void ProcessRequest (HttpContext context) { string u = context.Request.Form["username"]; //接受值username和password string p = context.Request.Form["password"]; if (p== "admin"&&u=="admin") //判断用户名和密码正确与否并返回相应的值 { context.Response.Write("{success:true,data:'ok'}"); //输出数据 } else { context.Response.Write("{success:true,data:'用户或密码错误！'}"); } } public bool IsReusable { get { return false; } } } |
