Ligerui首页的快速搭建
一、目录
1、多层架构+MVC+EF+AUTOFAC+AUTOMAPPER；
3、Ligerui首页的快速搭建
4、Ligerui Grid组件--学生信息列表。
二、正文
（嘿，写完了才发现这篇文章挺水。本来还想说说那些JS代码的，想想还是不继续水了……但是写都写了，凑个数，哈哈）
大多数信息管理系统首页都是ligerui官网首页这个模样，左边导航，右边一个iframe。高级点的带选项卡。
在这个首页中，包含了ligerui很多组件：ligerLayout（布局）、Tab（选项卡）、ligerAccordion（面板）、ligerTree（树）。ligerLayout将页面划分块，一般就是上下左右中（有的控件，如easyui是东南西北中），主要菜单那一块就是左，右边内容就是右，也可能是中（隐藏右边）。Tab对应图中“我的主页”，操作观感和浏览器顶部选项卡一样。ligerAccordion在图中对应的是主要菜单、功能列表、应用场景、实验室，点击可以展开或者隐藏。ligerTree嘛就是功能列表下面那一堆喽。
那我们的标题是“快速构建”，那咋个算快呢？Follow me：
First Step:先去这下载ligerui源码：http://git.oschina.net/ligerui/LigerUI/，下载来的文件把Source文件夹拷贝进我们的VS解决方案当中；
Second Step:第一篇文章说过，我们UI层是基于MVC的，那自然需要在任意Controller下新建一个action，比如我们是这样的：
1 public class LigerUIController : Controller
2 {
3 //
4 // GET: /Admin/LigerUI/
5
6 public ActionResult Index()
7 {
8 return View();
9 }
10
11
12 }
接着，在Index action方法体内右键添加视图Index。
Third Step:来到我们的ligerui官网首页鼠标右键：
点击过后框架的代码就出来喽，全部复制到我们第二步新建的Index视图当中。到这，已经成功一大半。
Fourth Step:MVC里头因为引入了路由机制，所以我们所复制代码中引入的JS文件路径：
需要修改：
上图有展现了引入的两种常用方式，第一种是MVC自带的方法，第二种是使用绝对路径。上图路径是在我项目当中相关文件的路径。CSS样式引入和JS一致。
Fifth Step:第四步修改完成后，把我们的项目运行起来，在浏览器地址栏输入刚才我们新建的action路径，比如我的就是:http://localhost:6273/ligerui/index ，哈，效果出来了：
是不是和官网的不太一样，这是为啥呢？如果你是谷歌浏览器，按下F12快捷键，点击Console:
看到木，错误全在这！前五个错误告诉我们哪些文件找不到，你只需要在index视图当中找到相应代码，并修改其路径（Source文件夹当中）就能达到和官网一致效果！
可以看到我们就是复制源码，小小修改。
还有就是左侧功能列表下的树控件的数据来自一个JS文件，从这里看出来：
1 //树
2 $("#tree1").ligerTree({
3 //注意这里indexdata
4 data: indexdata,
5 checkbox: false,
6 slide: false,
7 nodeWidth: 120,
8 attribute: ['nodename', 'url'],
9 onSelect: function (node) {
10 if (!node.data.url) return;
11 var tabid = $(node.target).attr("tabid");
12 if (!tabid) {
13 tabid = new Date().getTime();
14 $(node.target).attr("tabid", tabid)
15 }
16 f_addTab(tabid, node.data.text, node.data.url);
17 }
18 });
source文件夹找到indexdata.js文件，按需修改节点名称即可。
这种“查看网页源代码”对于学习前端控件挺有用的，看官网demo时候，右键“查看网页源代码”，仿照官网例子小改动来满足自己的需求。
下几篇，用一个学生信息列表来看看ligerui中的grid组件。
2013-12-03
