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
