EasyUI+LayOut+Partial=完美界面

时间：2015-02-11 22:02:44 阅读：231 评论：0 收藏：0 [点我收藏+]

一次偶然的机会让我接触到了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>

部分视图和普通视图的关系用图来表示就是：

技术分享