Asp.Net大型项目实践(8)-从最简单开始一个ExtJs做的登录页（附源码，在线demo）

原文地址为： Asp.Net大型项目实践(8)-从最简单开始一个ExtJs做的登录页（附源码，在线demo）

　　前段时间工作比较忙没有及时更新，这里先向关心本系列的朋友说声抱歉，同时感谢大家的支持与砖头，大家的关注就是我写下去的动力，保证绝不太监！哈哈...搞了那么长时间的后台，大家可能觉得有点没底，到底这玩意儿做出来能是啥样的，run起来是啥效果？有了前面的系列作为铺垫，从这篇开始我们每一篇都会是一个完整的功能应用！

　　本篇我们用一个登录窗口的应用来简单说明如何在我们的项目中将Asp.net MVC与EXTJS整合运用（注：Asp.net MVC与EXTJS整合有很多技术细节需要关注，本篇只是一个最简单的应用，勿只看了本篇就盲目在项目中运用，具体的诸多细节和技术解决方案后面会写），按照国际惯例先看看效果吧：
在线Demo：http://218.60.8.35:1234/(如果你路由器禁用了1234端口可能访问不到哈)

我可以很负责的告诉大家，这个页面效果完全出自我这个毫无美工基础的程序员之手（大家看那个logo就知道我美工有多烂啦～哈哈）

我们先建这个Login页面的Action（按照惯例，我假定你对Asp.net MVC及MVC术语有一定了解）

代码

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Web.Mvc;
using Demo.HIS.MVC.CommonSupport;

namespace Demo.HIS.MVC.Controllers
{
public partial class MainController : BaseController
{
public ActionResult Login()
{
return View();
}
}
}

以上需要注意两点：

1.我用了partial，因为MainController可能包含几个页面的Action，而为了管理方便我希望一个cs文件对应一个页面。

2.MainController继承了BaseController这个我们自定义的Controller基类，这个类以后会非常有用

根据ASP.NET的约定，我们在Views文件夹下建立Main文件夹以对应上面的MainController，然后在Mian文件夹下建议Login.aspx页面以对应上面的Login 这个Action。

注意用添加View的方式添加Login.aspx才不会产生Login.aspx.cs，因为我们压根儿不需要它，Login.aspx代码如下：

代码

<% @ Page Language = " C# " Inherits = " System.Web.Mvc.ViewPage " %>

<! 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 > 代码如尿崩MIS-登录 </ title >
< link href ="http://www.cnblogs.com/Scripts/ext/resources/css/ext-all.css" rel ="stylesheet" type ="text/css" />
< link href ="http://www.cnblogs.com/Scripts/ext-ux/statusbar/css/statusbar.css" rel ="stylesheet" type ="text/css" />
< link href ="http://www.cnblogs.com/Content/Site.css" rel ="stylesheet" type ="text/css" />
< link href ="http://www.cnblogs.com/Content/IconCls.css" rel ="stylesheet" type ="text/css" />

< script src ="http://www.cnblogs.com/Scripts/ext/adapter/ext/ext-base.js" type ="text/javascript" ></ script >
< script src ="http://www.cnblogs.com/Scripts/ext/ext-all.js" type ="text/javascript" ></ script >
< script src ="http://www.cnblogs.com/Scripts/ext/src/locale/ext-lang-zh_CN.js" type ="text/javascript" ></ script >
< script src ="http://www.cnblogs.com/Scripts/JsHelper.js" type ="text/javascript" ></ script >
< script src ="http://www.cnblogs.com/Scripts/ext-ux/statusbar/StatusBar.js" type ="text/javascript" ></ script >

< script src ="http://www.cnblogs.com/Scripts/Main/Login.aspx.js" type ="text/javascript" ></ script >
</ head >
< body >
< div >

</ div >
</ body >
</ html >

代码里除了JS和CSS文件的引用啥也没有。

大家看到引用的东东比较繁杂，以后如果每个页都要引这么多东东，效率不用说，开发起来也繁琐。不用担心，Login这个页面比较特殊，以后的具体功能页不会这样。

这些引用的文件在下载的源码里都包含了，我来分别解释一下：

ext-all.css：EXT所需的所有CSS样式

statusbar.css：因为用了EXT的一个扩展组件“状态栏”，比较特殊所以单独引用一下他的样式文件

Site.css：我们系统可能需要自己定义一些css或者重写一些ext的CSS,放在这个文件里，但这种情况极少

IconCls.css：定义一些小图标的CSS

ext-base.js：EXT所必需的基础JS库

ext-all.js：包含EXT所有组件（特殊扩展组件除外）的JS库，它还有个debug版方便调试

ext-lang-zh_CN.js：加了这个让EXT支持中文

JsHelper.js：自己定义的一个JS类库

StatusBar.js：使用EXT扩展组件“状态栏”所需的JS

Login.aspx.js：这个登录页的具体JS文件，下面我们就要写这个JS文件去实现我们开始贴出的那个页面

接下来就是编写Login.aspx.js的代码了，因为用EXT开发，需要写大量的JS代码，建议用Aptana这个IDE去编写JS代码，并且装上Spket插件（自己google下如果安装），这样Aptana就能实现EXTJS的智能提醒了，VS2008也支持EXTJS的智能提醒，但是格式化等方面还是没有Aptana好，所以还是建议用Aptana，如果你坚持要用记事本自虐，那我也没办法...

代码

Ext.BLANK_IMAGE_URL = ' ../Scripts/ext/resources/images/default/s.gif ' ;
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = ' side ' ;
function Main_Login() {
var logoPanel = new Ext.Panel({
baseCls : ' x-plain ' ,
id : ' login-logo ' ,
region : ' center '
});
var loginForm = new Ext.form.FormPanel({
region : ' south ' ,
border : false ,
bodyStyle : " padding: 20px " ,
baseCls : ' x-plain ' ,
waitMsgTarget : true ,
labelWidth : 60 ,
defaults : {
width : 280
},
height : 90 ,
items : [{
xtype : ' textfield ' ,
fieldLabel : ' 登录名 ' ,
name: ' loginname ' ,
cls : ' yonghuming ' ,
blankText : ' 登录名不能为空 ' ,
validateOnBlur : false ,
allowBlank : false
}, {
xtype : ' textfield ' ,
inputType : ' password ' ,
name: ' pwd ' ,
cls : ' mima ' ,
blankText : ' 密码不能为空 ' ,
fieldLabel : ' 密码 ' ,
validateOnBlur : false ,
allowBlank : false
}]
});
var sb = new Ext.ux.StatusBar({});
var win = new Ext.Window({
title : ' 代码如尿崩MIS-登录窗口 ' ,
iconCls : ' locked ' ,
width : 429 ,
height : 280 ,
resizable : false ,
draggable : true ,
modal : false ,
closable : false ,
layout : ' border ' ,
bodyStyle : ' padding:5px; ' ,
plain : false ,
items : [logoPanel, loginForm],
buttonAlign : ' center ' ,
buttons : [{
text : ' 登录 ' ,
cls : " x-btn-text-icon " ,
icon : " /Content/icons/lock_open.png " ,
height : 30 ,
handler : function () {
}
}, {
text : ' 重置 ' ,
cls : " x-btn-text-icon " ,
icon : " /Content/icons/arrow_redo.png " ,
height : 30 ,
handler : function () {
loginForm.form.reset();
}

}],
bbar : sb
});
if (Ext.isChrome) {
sb.addButton({
text : ' ActiveX相关用户注意切换IE模式 ' ,
cls : " x-btn-text-icon " ,
icon : " /Content/ie.png " ,
handler : function () {
var googleWin = new Ext.Window({
iconCls : ' ie ' ,
title : ' Google浏览器IE Tab插件安装 ' ,
width : 300 ,
height : 100 ,
closable : true ,
html : " 按照提示在Google浏览器中安装IETab<br>并在IE模式中运行与ActiveX操作相关的程序<iframe src='http://www.chromeextensions.org/wp-content/uploads/2009/12/ietab1.0.11208.1.crx' style='width:0%; height:0%;'></iframe> "
});
googleWin.show();
}
});
} else {
sb.addButton({
text : ' 建议使用Google浏览器运行本系统 ' ,
cls : " x-btn-text-icon " ,
icon : " /Content/google-chrome.png " ,
handler : function () {
var googleWin = new Ext.Window({
iconCls : ' google ' ,
title : ' Google浏览器安装 ' ,
width : 850 ,
height : 450 ,
closable : true ,
html : " <iframe src='http://www.google.com/chrome/eula.html?extra=devchannel' style='width:100%; height:100%;'></iframe> "
});
googleWin.show();
}
})
}
win.show();
};
Ext.onReady( function () {
Main_Login();
});

 

 

按照惯例，我假定你对EXTJS有一定了解，以上代码我就不解释了。

有个小细节可以注意下，我在代码里判断了当前用户的浏览器类型，如果是IE客户，那么显示按钮“建议使用Google浏览器运行本系统”点击按钮可以帮助客户安装google浏览器，如果已经是google浏览器客户，那么显示按钮“ActiveX相关用户注意切换IE模式”，点击可帮助客户安装google浏览器的IEtab插件，以支持需要ActiveX的客户（在本医疗系统中有小部分客户需要用到医保卡读取，所以要用ActiveX实现）。

最后把默认路由地址设置成Main/Login就可以了：

代码

public static void RegisterRoutes(RouteCollection routes)
{
routes.IgnoreRoute( " {resource}.axd/{*pathInfo} " );

routes.MapRoute(
" Default " , // Route name
" {controller}/{action}/{id} " , // URL with parameters
new { controller = " Main " , action = " Login " , id = "" } // Parameter defaults
);

}

这样我们的登录页就完成了，右键Default.aspx文件在浏览器中运行就可以看到效果了。

但是这个登录没有任何功能，也没有和后台交互，以后讲权限管理的时候我们会把功能加上。

也许有的朋友看到这里会有些沮丧，因为我没有详细解释本篇中关于EXTJS的代码。这里弦哥想说的是本系列主要还是讲整个项目解决方案整合应用，我不可能对每个技术详细解释，如果在以后涉及到一些复杂的或典型的EXT应用我肯定会详细说明的。本篇的EXTJS其实很简单，所以没有多加说明。对于EXTJS入门的文章网上有很多大家可以自己去看，然后注意多看官方的例子和帮助文档。如果你一点基础都没有，本系列以后的内容基本也是看不懂的啦。

源码（包含上篇AOP实现事务的代码）：HISDemo-8.rar

转载请注明本文地址： Asp.Net大型项目实践(8)-从最简单开始一个ExtJs做的登录页（附源码，在线demo）