ExtJs四(ExtJs MVC登录窗口的调试)

前言

继上一节中实现了验证码http://www.cnblogs.com/aehyok/archive/2013/04/19/3030212.html,现在我们可以进行对登录界面进行整合调试了。

正题

打开系统的首页页面文件,Views\Home目录下的Index.cshtml文件。要动态加载登录窗口,需要先设置好加载路径,因而在onReady函数前面加入以下代码:

  Ext.Loader.setConfig({
    enabled: true,
    paths: {
        'Ext.ux': 'scripts/extjs/ux'
    }
});

代码中,enabled为true,表示开启动态加载,paths对象里面定义的就是加载路径,在这里定义了Ext扩展的加载路径为“scripts/extjs/ux”。

接着上面的代码下加入一个请求登录窗口的代码:

Ext.require('Ext.ux.Login');

这样,Ext就会自动去加载登录窗口了。

将原来调用alert方法的语句删除,然后加入显示登录窗口的代码:

Ext.ux.Login.show();

 现在,在页面打开首页,将看到如下图

单击一下图片,验证码也可刷新了。但问题是没鼠标指针不是手型的,这得改一下,要改不难,在创建Img对象的时候,加入style配置项就可以了,它会将该配置的值作为图片的样式,修改后的代码如下:

me.image = Ext.create(Ext.Img, {
    style: "cursor:pointer ",
    src: "/VerifyCode",
    listeners: {
        click: me.onRefrehImage,
        element: "el",
        scope: me
    }
});

现在先抛开数据库,来做个简单验证测试一下。首先要做的是在Models目录创建一个名为LoginModel.cs的类文件,创建后的代码如下:

namespace ExtMVCOne.Models
{
    public class LoginModel
    {
        [Required]
        [Display(Name = "用户名")]
        public string UserName { get; set; }

        [Required]
        [Display(Name = "密码")]
        public string Password { get; set; }

        [Required]
        [Display(Name = "验证码")]
        public string Vcode { get; set; }
    }
}

当然还需要引用

using System.ComponentModel.DataAnnotations;

代码中Required特性表示字段是必须的。Display用来表示字段的中文名称,这不是必须。

模型创建后,创建一个名称为AccountController的控制器, 并加入对模型的引用:

using ExtMVCOne.Models;

因为需要使用JSON格式返回数据,因而要引入Json.NET。你可以通过http://json.codeplex.com/网站进行,也可以通过Nuget来查找下载Json.NET。

安装完成后,在Account控制器类中加入Josn.NET的引用:

using Newtonsoft.Json;

using Newtonsoft.Json.Linq;

引用语句的第二句允许对JSON进行Linq操作,可简化代码。

好了,现在可以进入编码工作了。因为不需要Index方法,因而将其修改为Login,并将返回结果由ActionResult修改为JObject。因为方法要接收提交的模型数据,因而在方法上添加HttpPost特性,并使用LoginModel作为模型。完成后的代码如下:

[HttpPost]
public JObject Login(LoginModel model)
{
    return View();
}

因为Ext JS需要的数据格式基本是固定的,基本都是一个JSON对象,且对象内都会包含success关键字,因而为了简化这个工作,可创建一个辅助函数来生成这个返回对象。在Helper目录添加一个名称为MyFunction.cs的类文件,代码如下:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Newtonsoft.Json;
using Newtonsoft.Json.Linq;
using System.Web.Mvc;

namespace ExtMVCOne.Helper
{
    public class MyFunction
    {
    }
}

  先在类中添加对Json.NET的引用。然后添加一个WriteJobjectResult的静态方法,方法的返回值为JObject。方法的参数暂时只有一个,布尔值的success。在方法内创建一个将要返回的JObject,并为其添加一个success属性,代码如下:

public static JObject WriteJObjectResult(bool success)
{
    JObject jo = new JObject { 
        new JProperty("success",success)
    };
    return jo;
}

代码中使用了Linq来创建JObject对象,所以不熟悉的,会感觉有点怪异。目前代码只能返回一个关键字,这个在以后的进程中会陆续添加,不着急。

现在切换回AccountController控制器,引用Helper命名控件,并定义一个布尔类型的变量success,并通过刚才定义的WriteJobjectResult方法返回结果(要),代码如下:

bool success = false;
return MyFunction.WriteJObjectResult(success);

创建一个类型为JObject的errors对象来存放这些错误信息,代码如下:

JObject errors = new JObject();

现在先来验证模型是否有错,如果有错误,将模型中的错误写到errors对象中。因为在其它窗口提交模型数据,也需要将错误状态转换到errors对象,因而可在MyFunction中添加一个ModelStateToJObject方法来处理这个。切换到MyFunction类中,添加一个名为ModelStateToJObject的静态方法,代码如下:

public static void ModelStateToJObject(ModelStateDictionary ModelState, JObject errors)
{
    foreach (var c in ModelState.Keys)
    {
        if (!ModelState.IsValidField(c))
        {
            string errStr = "";
            foreach (var err in ModelState[c].Errors)
            {
                errStr += err.ErrorMessage + "<br/>";
            }
            errors.Add(new JProperty(c, errStr));
        }
    }
}

这里别忘了引用using System.Web.Mvc。

代码通过遍历ModelState中不能通过验证的字段,将其加入到errors对象中。这里有个问题一定要注意,模型中的字段名称必须与定义表单时的字段的name名称一致,不然后台字段与前台字段就对应不上了。

 切换会AccountController控制器完成对登录模型的验证代码了,代码如下:

if (ModelState.IsValid)
{
}
else
{
    MyFunction.ModelStateToJObject(ModelState,errors);
}

现在要考虑怎么返回这个errors对象,解决办法是在WriteJobjectResult方法加一个类型为JObject的对象,并添加以下代码:

if(errors !=null && errors.HasValues)
{
    jo.Add(new JProperty("errors",errors));
}

代码只有在errors不为null,且有值的情况下,才写如errors关键字。

切换回AccountController控制器,修改好WriteJobjectResult方法的调用参数。

现在进入验证过程,首先要验证的是验证码,因而要先取到保存在Session中的验证码,代码如下:

string vcode = "";
if(Session["vcode"] != null)
{
    vcode =Session["vcode"].ToString();
}

下面就对验证码进行验证了,因为Session有可能超时丢失验证码,因而在验证的时候,必须保证验证码不能为空字符,代码如下:

if(vcode.Count() > 0 && vcode.ToLower() == model.Vcode.ToLower())
{
}
else
{
    errors.Add("Vcode", "验证码错误");
}

 使用ToLower方法可以保证验证码不区分大小写。当验证错误的时候,将错误写入errors对象,这样在登录窗口就可知道是验证码错误了。

暂时不用数据库,先使用一些默认值做测试,如用户名为admin,密码为123456,则表示登录成功,代码如下:

if(model.UserName.ToLower() == "admin" && model.Password =="123456")
{
    success = true;
}
else
{
    errors.Add("UserName", "错误的用户名或密码。");
    errors.Add("Password", "错误的用户名或密码。");
}

如果用户名和密码错误,则返回针对用户名和密码字段返回错误信息。如果验证成功,返回success为true,则表示登录成功了。

然后对login.js登录事件添加提示信息,登录成功的话,弹出登录成功的提示框,失败的话,弹出登录失败的提示框。

    onLogin: function () {
        var me = this,
			f = me.form.getForm();
        if (f.isValid()) {
            f.submit({
                //waitMsg: "正在登录,请等待……",
                //waitTitle: "正在登录",
                success: function (form, action) {
                    Ext.Msg.alert("提示信息","登录成功!");
                    //window.location.reload();
                },
                failure: function () {
                    Ext.Msg.alert("提示信息", "登录失败!");
                },
                scope: me
            });
        }
    }

总结

 从现在来看,实例代码已经成功了,登录也已经实现了。但是自己还是需要很多的时间来消化和吸收,水平有限,还需要继续努力学习。

示例代码下载地址链接http://files.cnblogs.com/aehyok/ExtMVCLogin.rar

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏TheOneGIS空间站

如何在Visual Studio中调试.NET源码

In order to configure Visual Studio 2013 do the following in the Tools -> Optio...

13320
来自专栏恰童鞋骚年

分布式日志框架Exceptionless之生产环境部署步骤

Exceptionless 是一个开源的实时的日志收集框架,它将日志收集变得简单易用并且不需要了解太多的相关技术细节及配置。本篇基于我的上一篇《基于Except...

37630
来自专栏钱塘小甲子的博客

SUMO使用教程(一)

SUMO是一款交通仿真软件,其余可自行百度。教程一主要展示一下如何运行一个仿真实例。当然,这只是实现方法中的一种。 准备: 1.SUMO软件 2.osm...

51640
来自专栏字根中文校对软件

C#:昨天,今天和明天:和 Anders Hejlsberg 座谈,第一部分

Anders Hejlsberg 在1996年加入微软,开始是Visual J++ 和 Windows Foundation Classes 的架构师。Hej...

12480
来自专栏java工会

现身说法:37岁老码农找工作

他说他们部门调整,虽然最后他留了下来,但还是非常焦虑。人无远虑必有近忧,他这次被刺激到了,想提高一下自己,以免下次再有类似的心惊肉跳。但怎么提高呢?

18250
来自专栏钱塘小甲子的博客

LINK : fatal erro…

VS2010在经历一些更新后,建立Win32 Console Project时会出“error LNK1123” 错误,解决方案为将 项目|项目属性|配置属...

12540
来自专栏TheOneGIS空间站

LINQ初步

语言集查询(Language Integrated Query, LINQ)集成了C#编程语言中的查询语法,可以用同样的语法访问不同的数据源。LINQ提供了不同...

9720
来自专栏CWIKIUS

介绍 Jersey 依赖 原

Jersey 使用 Apache Maven 进行构造和安装。非快照(Non-snapshot)Jersey 发行版本是不会部署到 中心 Maven 仓库(Ce...

14640
来自专栏字根中文校对软件

C#:昨天,今天和明天:和 Anders Hejlsberg 座谈,第二部分

回到和语言相关的问题,我现在还是想说说LINQ。微软 Visual Stuido .NET 的产品经理 Tony Goodhew 在一次访谈中说过,微软的研究表...

12130
来自专栏张高兴的博客

张高兴的 .NET Core IoT 入门指南:环境配置、Blink、部署

如何在 Raspberry Pi 的 Raspbian 上构建使用 GPIO 引脚的 IoT 程序?你可能会回答使用 C++ 或 Python 去访问 Rasp...

29420

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励