ExtJS ASP.NET 搭建在线考试系统 第一天

实现登录功能,下面贴出代码
首先是FormPanel的完整代码

LoginFormPanel = Ext.extend(Ext.form.FormPanel, {
    //构造方法
    constructor: function () {
        //调用父类的构造函数
        //PersonViewFormPanel.superclass.constructor.apply();
        LoginFormPanel.superclass.constructor.call(this, {
            frame: true,
            id: "loginForm",
            title: '登录窗体',
            bodyStyle: 'padding-top:10px;padding-left:10px',
            width: 300,
            height: 200,
            buttonAlign: 'right',
            defaultType: 'textfield',
            labelWidth: 50,
            defaults: { anchor: '95%' },
            monitorValid: true,
            items: [
				{
				    fieldLabel: '考试号',
				    name: 'examNumber',
				    emptyText: "请输入你的考试号",
				    vtype: "examNumber",
				    allowBlank: false,
				    blankText: "考试号不能为空哦,亲"
				},
				{
				    fieldLabel: '密码',
				    name: 'pwd',
				    inputType: 'password',
				    emptyText: "请输入你的密码",
				    vtype: 'pwd',
				    allowBlank: false,
				    blankText: "密码不能为空哦,亲"
				},
				{
				    fieldLabel: '年龄',
				    name: 'age'
				}
			],
            buttons: [
				{
				    text: "登录",
				    //当函数名之后加了括号,表示立即执行,而不是绑定
				    handler: function () {
				        if (this.getForm().isValid()) {
				            this.getForm().submit({
				                url: "handlers/login.ashx",
				                method: "GET",
				                waitTitle: '连接服务器',
				                waitMsg: '正在处理您的请求,请稍候...',
				                success: function(form, action) {
                                    Ext.Msg.alert('信息提示', '登录成功');
                                },
                                failure: function(form, action) {
                                    Ext.Msg.alert('信息提示', '登录失败' + action.result.errors.info);
                                }
				            });
				        }
				        else {
				            Ext.Msg.alert("错误提示", "请输入完整的信息");
				        }
				    },
				    scope: this
				},
				{
				    text: "重置",
				    handler: function () {
				        this.getForm().reset();
				    },
				    scope: this
				}
			]
        });
    }
});
测试页面代码如下
<!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 type="text/css" href="js/resources/css/ext-all.css" rel="Stylesheet" />
    <script type="text/javascript" src="js/ext-base.js"></script>
    <script type="text/javascript" src="js/ext-all-debug.js"></script>
    <script type="text/javascript" src="js/ext-lang-zh_CN.js"></script>
    <script type="text/javascript" src="js/controls/LoginFormPanel.js"></script>
    <script type="text/javascript" src="js/controls/InputValid.js"></script>
    <script type="text/javascript">
        Ext.onReady(function () {
            var aa = Ext.get("login");
            //alert(aa.xtype);
            new LoginFormPanel().render(aa);
        });
    </script>
</head>
<body>
<div id="login" style="position:absolute;left:400px;"></div>
</body>
</html>

 

后台处理文件代码

<%@ WebHandler Language="C#" Class="login" %>

using System;
using System.Web;
using System.Text;

public class login : IHttpHandler {
    
    public void ProcessRequest (HttpContext context) {
        context.Response.ContentType = "text/json";
        context.Response.ContentEncoding = Encoding.UTF8;
        string name = context.Request.QueryString["examNumber"];
        if (name == "11111111")
        {
            context.Response.Write("{ success: true,errors:{}}");
        }
        else
        {
            context.Response.Write("{ success: false ,errors:{info:'用户名或密码不正确'} }"); 
        }
        
        context.Response.End();
    }
 
    public bool IsReusable {
        get {
            return false;
        }
    }

}

小结:后台返回结果的时候,必须注意格式,必须增加success这个变量,否则无法获得正确的结果

知识共享许可协议
《ExtJS ASP.NET 搭建在线考试系统 第一天》常伟华 创作。
采用 知识共享 署名-相同方式共享 3.0 中国大陆 许可协议进行许可。
  • 多说评论
  • 签名
  • 新浪微博
  • 默认评论
  • Tab Header 5

0 条评论 / 点击此处发表评论

Tab Content 5

开发技术


开发平台和工具

sitemap     189.24ms