后台管理框架之六：View页面设计

最新推荐文章于 2024-04-09 16:58:43 发布

linxy_cn

最新推荐文章于 2024-04-09 16:58:43 发布

阅读量2.3k

点赞数

分类专栏： mvc4+easyui+EF6+autofac后台管理框架文章标签： EF6 autofac easyui mvc4

本文链接：https://blog.csdn.net/lxy0424/article/details/39669813

版权

在前面技术选型章节中，已经提到了页面采用Razor(CShtml) + Jquery +EasyUI + js。在整个项目中，页面布局采用Html + EasyUI（个人喜欢避免使用JS代码生成EasyUI）;而编辑类页面采用Razor(CShtml)，其中验证框架采用MVC4 自带的jquery.validate.unobtrusive.js。JQuery 、Easyui两个Js框架

摘要由CSDN通过智能技术生成

　　在前面技术选型章节中，已经提到了页面采用Razor(CShtml) + Jquery +EasyUI + js。在整个项目中，页面布局采用Html + EasyUI（个人喜欢避免使用JS代码生成EasyUI）;而编辑类页面采用Razor(CShtml) ，其中验证框架采用MVC4 自带的jquery.validate.unobtrusive.js。

　　JQuery 、Easyui 两个Js框架优点突出，我就不再一一描述了。这里再说说这段时间Razor给我的感觉：

　　1. Razor语法页面结构较Html更为简捷、清晰；

　　2. Razor语法对页面的操作做了很多封装，可以减少代码工作量；

　　3. Razor语法可充分利用后台代码，可以提供更为灵活、简捷的页面处理；

　　4. Razor语法提供了很多的Helper类，如@Html , @Model ，这些类与后台视图模型的显示、验证可以实现完全、紧密的绑定，一来使得减少较多的验证代码，二来可以提供前、后台数据验证的一致性。我认为这一点在“编辑类页面”是非常有用的，这也是我在页面模型中不使用jquery.validate.js验证框架和EasyUI validateBox，而是直接使用Mvc4自带的jquery.validate.unobtrusive.js验证框架的原因（虽然这个框架仍然是基于jquery.validate的）。

　　一、页面部局

　　整个项目前台页面布局采用EasyUI，这个基于JQuery 的开源JS框架非常好用，目前最新版本1.4，符合Html5规范，通过NuGet可发直接下载并加入到项目中。整个项目抓图如下：

　　整个项目布局部分代码如下（可参照EasyUI官网布局示例源代码）：

<body class="easyui-layout">
        <div id="north" data-options="region:'north',split:false,border:false" style="height: 60px; overflow: hidden; background: #D2E0F2; line-height: 20px; color: #fff; font-family: Verdana, 微软雅黑,黑体;">
                @Html.Partial( "_MainTopLayoutPartial" )
        </div>
        <div id="south" data-options="region:'south',split:false" style="height:30px; background: #D2E0F2; ">
                @Html.Partial( "_MainBottomLayoutPartial" )
        </div>
        @*<div id="right" data-options="region:'east',split:true,collapse:true" title="East" style="width:200px;">
                        <ul class="easyui-tree" data-options="url:'./data/tree_data1.json',method:'get',animate:true,dnd:true"></ul>
                </div>*@
        <div id="left" data-options="region:'west',split:true" title="导航菜单" style="width:180px;">
                @Html.Partial( "_MainLeftLayoutPartial" )
        </div>
        <div id="mainTitle" data-options="region:'center',title:'操作区',iconCls:'icon-ok',noheader:true">
                @Html.Partial( "_MainCenterLayoutPartial" )
        </div>
</body>

　　二、视图模型

　　视图模型是View的一部分，主要是对前后台数据交互的封装，如后台发往前台的编辑类数据、前台发往后台的查询结构数据等。使用视图模型的好处：

　　1. 方便对前后台数据交互进行管理。Mvc可以根据传递的QueryParams参数值，自动构建参数模型，自动生成参数对象，不用再像Asp.net那样自行封装数据，减少很多工作量。

　　2. 能对数据进行验证性规则定义，配合Mvc4验证框架和提供的一些Helper类，高效紧密结合，可以有效保证数据前后台一致性、有效性；

最低0.47元/天解锁文章

linxy_cn

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
后台管理框架之六：View页面设计

在前面技术选型章节中，已经提到了页面采用Razor(CShtml) + Jquery +EasyUI + js。在整个项目中，页面布局采用Html + EasyUI（个人喜欢避免使用JS代码生成EasyUI）;而编辑类页面采用Razor(CShtml)，其中验证框架采用MVC4 自带的jquery.validate.unobtrusive.js。JQuery 、Easyui两个Js框架
复制链接

扫一扫