EXT结合ASP.NET的登陆系统演示

时间:2016-02-24 15:21 来源: 我爱IT技术网作者:佚名

欢迎您访问我爱IT技术网，今天小编为你分享的编程技术是：【EXT结合ASP.NET的登陆系统演示】，下面是详细的分享！

EXT结合ASP.NET的登陆系统演示

任务：做一个简单的ajax登陆窗口，并实现密码验证功能。

效果图：

1.load页面，一般显示不出来，除非网速较慢的时候。

2.界面效果如下

3.当没有输入的时候就会有红色下划线边框提示

4.登陆错误提示

5.登陆成功效果

上代码：

1.login.aspx页面（界面及若干方法CS文件没有任何处理进程，所以此页面也可以做成html静态页面）

<%@ 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>无标题页</title>
    <link rel="stylesheet" type="text/css" href=http://www.chinaz.com/program/2010/0807/"js/ext/resources/css/ext-all.css" />
<script type="text/javascript" src=http://www.chinaz.com/program/2010/0807/"js/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src=http://www.chinaz.com/program/2010/0807/"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（登陆验证）

<%@ 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;
        }
    }

}

好了，大部分代码我都标注了一下不懂的还是希望可以自己先查查文档。然后再提出来讨论。

博客地址：http://www.it54.cn/blog 作者：左倾45度

以上所分享的是关于EXT结合ASP.NET的登陆系统演示，下面是编辑为你推荐的有价值的用户互动：

　　相关问题：跪求asp.net三层架构的视频教程,只要演示登陆这个...

　　答：你可以把你自己写的3层，截图出来。我觉得你现在的困惑时，不知道每一层是用来做什么的。 >>详细

　　相关问题：Ext.net 3.0 结合asp.net 使用，登录方法跳转其他...

　　答：改用js跳转试试 >>详细

　　相关问题：请问Ext.Net和ExtAspNet是什么关系？它们和Ext.js...

　　答：这个得慢慢说。先说Ext，有一种文件系统也叫Ext。所以为了和程序类库名称区分开，最好还是叫全名：ExtJS。凡是和面向对象语言编程有关的都是指ExtJS。 Ext.js就是ExtJS的核心类库。此类库是用纯JS（javaScript）组成的。综上，你可以理解为：... >>详细

评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）

EXT结合ASP.NET的登陆系统演示

EXT结合ASP.NET的登陆系统演示

以上所分享的是关于EXT结合ASP.NET的登陆系统演示，下面是编辑为你推荐的有价值的用户互动：

最新教程

相关教程