一次偶然的机会让我接触到了UI系统，自然而然也开始学习和使用EasyUI和其他的一些关于界面的知识，趁今天这时间停下脚步好好整理整理最近用到的一些知识:easyUI 、Layout、Partial
一、layout
LayOut，所谓的布局页，也可以理解为母版页，母版页的性质和父类很相似，都具备了“子类”的共性，所以母版页可以理解为某些样式的一个父辈集合体。而它也就是将所有界面用到的公共样式整合到一起：比如将所有界面都用到的EasyUI引用进行整合：
<span style="font-size:18px;"><html>
<head>
<meta charset="UTF-8">
<title>Nested Layout - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../../Content/jquery-easyui-1.3.2/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../Content/jquery-easyui-1.3.2/themes/icon.css">
<link rel="stylesheet" type="text/css" href="../../Content/jquery-easyui-1.3.2/demo/demo.css">
<script type="text/javascript" src="../../Content/jquery-easyui-1.3.2/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="../../Content/jquery-easyui-1.3.2/jquery.easyui.min.js"></script>
<script type="text/javascript" src="../../Content/jquery-easyui-1.3.2/locale/easyui-lang-zh_CN.js"></script>
<link href="../../CSS/index.css" rel="stylesheet" />
</head>
<body > @*style="margin: 0; padding: 0; width: 100%; height: 100%;"*@
<div id="mainContent"> @*style="padding-top: 10px; width: 100%; height: 100%;"*@
<section id="main" > @*style="width:100%;height:100%;"*@
<strong><span style="color:#ff0000;"> @RenderBody()</span></strong>
</section>
</div>
</body>
</html></span>
上面这些代码主要是引用EasyUI的基本样式，封装好成为一个母版页，这样只要需要新建的视图就可以直接引用这个母版页：
首先，添加新视图：
弹出“弹出视图”的对话框后按照以下四个步骤走：
点击添加之后该视图就会具有母版页的所有样式，用图来表示就是：
而它们之间的关系用在代码中的体现就是：TestIndex所占的位置正好是“@RenderBody”的位置，所以不管TestIndex中写什么代码，都是被母版页包裹在其中的。
二、Partial
部分视图，也就是将某一部分的样式封装起来，这次在系统中就是将搜索框、查询按钮一起封装成为一个SearchPartial的部分视图，但是部分视图不能单独显示必须依赖某一个index来显示。
这些是将一个搜索框和一个查询的按钮封装成一个部分视图，当视图需要的时候可以直接使用“@{Html.RenderPartial("部分视图的路径");}”来调用这个部分视图，这样我们就没有必要在每一个视图中写下面这段代码，这样我们就通过部分视图实现我们程序中代码的封装和复用。
<span style="font-size:18px;"> <div id="search_box" style="margin: 20px 10px 10px 15px;">
<a id ="tips">请选择实体：<input id="cc" class="easyui-combobox" name="entity"
data-options="valueField:'EntityName',
textField:'EntityDesc',
url:'/NonQueryProperties/QueryEntity',
onSelect: function(rec){
entitySearch(rec.EntityName);
}">
</a>
<div id ="a">
<input id="txtSearch" name="txtSearch" type="text" style="width: 300px;" />@* runat="server"*@
<a href="#" class="easyui-linkbutton" iconcls="icon-search" plain="true" onclick="doSearch()" data-options="">查询</a>
<div id="auto"></div>
</div>
</div></span>
部分视图和普通视图的关系用图来表示就是：
就像这个图中显示的那样：一个普通视图可以由多个部分视图来组成，部分视图也就是界面的一部分，大概这就是它名字的起因吧。
三、部分视图和布局页
1.与普通视图的关系：
布局页先于普通视图加载，是普通视图的框架，窗体样式加载的过程是从外到里，所以要先与普通视图被加载。它们之间就像是普通视图对布局页的一种继承关系，实现继承后，普通视图才会具有布局页的所有样式。
而部分视图是普通视图的一部分，只是执行到调用部分视图的那句代码后普通视图才会加载出使用的部分视图，虽然加载过程都是从外到内 ，但是部分视图却是三种视图中最后被加载出来的一个。
2.图（使用图表述，三者之间的关系一目了然！）
不管是布局页还是部分视图，都是封装和抽象的具体体现，也就是面向对象思想的绵延。所以不管程序大小，总有可以抽象和封装的地方。