码迷，mamicode.com
首页 > Web开发 > 详细

EF6 CodeFirst+Repository+Ninject+MVC4+EasyUI实践(二)

时间：2015-07-17 08:23:55      阅读：172      评论：0      收藏：0      [点我收藏+]

标签：

前言

 

  • 今天早上，看到第一篇上首页呢，多谢支持！
  • 写完第一篇后，我一直在想接下来应该从哪一方面开始讲。后来我觉得不用那么死板的把每一个课程和大纲都列出来吧，毕竟我又不是教书的，呵呵。。。我觉得就像做实验一样，我们一部分一部分的完成，最后总个结果应该就出来呢。那么这一篇就来把前端的样子弄出来，至少得知道长成什么样吧。接下来就应该开始捯饬了。。。

 

下载前端框架EasyUI

 

  • 到EasyUI的官网下载压缩包。一个是基于GPL的开源版，一个是商业版。我们自己做研究就下个开源版呢。目前是1.4.3的版本，解压缩后，我们去掉一些不要的文件，毕竟项目中放那么多不用的文件也是浪费。

　　技术分享

  1. demo文件夹：里存放的都是easyui的官方示例，在项目中我们不需要加载，删除里面的全部文件夹，只留下demo.css样式文件；
  2. demo-mobile文件夹：看名字就知道是移动开发要用的呢，我们把总个demo-mobile文件夹全部删掉；
  3. locale文件夹：这是easyui的本地和全球化语言包，我们留下中文简体、中文繁体、英文三个js文件，分别是easyui-lang-zh_CN.js、easyui-lang-zh_TW.js、easyui-lang-en.js，其他的全部删除掉；
  4. plugins和src文件夹：存放一些有用的插件，这个保留；
  5. themes文件夹：里面存放easyui为我们提供的5种皮肤，这个保留；
  6. 删除jquery.easyui.mobile.js文件；

 

将EasyUI整合到MVC中

 

  • 在解决方案的Web工程项目中新建一个EasyUI的文件夹，将先前整理好的EasyUI文件复制进去。
  • 在解决方案的Web工程项目中新建一个data的文件夹,存放我们需要演示的json格式的数据，因为现在项目的数据库还没有搭建，所以可以读取json格式文件中存放的本地数据来查看效果。

　　技术分享

 

设计系统的登录界面和主界面

 

  • 登录界面：添加AccountController,在里面添加Login视图，返回空的view就行呢，目前我们只是做演示搭建。在Login视图中添加如下代码：
@{
    ViewBag.Title = "Login";
}

<script type="text/javascript" language="javascript">
    function clearForm() {
        $(‘#ff‘).form(‘clear‘);
    }
</script>

<div style="display: block; width: 400px; margin: 0 auto; text-align: left; margin-top:200px;">
    <div class="easyui-panel" title="登录界面" style="width: 400px">
        <div style="padding:10px 60px 20px 60px">
            <form id="ff" action="/Main/Index" method="post">
                <div class="fitem">
                    <label>用户名:</label>
                    <input id="UserName" name="UserName" class="easyui-validatebox" required="true" value="admin">
                </div>
                <div style="height:20px;"></div>
                <div class="fitem">
                    <label>密 &nbsp;&nbsp;码:</label>
                    <input id="UserPwd" name="UserPwd" class="easyui-validatebox" required="true" type="password" value="123">
                </div>
                <div style="height:20px;"></div>
                <div style="text-align:center;padding:5px">
                    <input class="easyui-linkbutton" type="submit" value="登 录" />
                    <input class="easyui-linkbutton" type="button" value="清 除" onclick="clearForm()" />
                </div>
            </form>
        </div>
    </div>
</div>
<div style="text-align:center; margin-top:20px; font-size:14px; font-weight:400;">
    Copyright &copy; 2015 http//:wangweimutou.cnblogs.com. All Rights Reserved.
</div>

 

  • 但我们运行的Login视图的时候，应该是没有样式的，接下来我们就要结合mvc来设置一下_Layout，就行asp.net中的母版页一样，每个页面都可以调用此样式。打开视图当中Shared文件夹下的_Layout.cshtml，引用EasyUI的样式和js文件，修改其中的代码如下：
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/EasyUI/themes/default/easyui.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/EasyUI/themes/icon.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/EasyUI/demo/demo.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.8.2.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/EasyUI/jquery.easyui.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/EasyUI/locale/easyui-lang-zh_CN.js")" type="text/javascript"></script>
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>
    @RenderBody()
    @RenderSection("scripts", required: false)
</body>
</html>

 

  • 现在运行我们的登录页面应该就有样式呢，使用的themes里面的default样式，如果想使用其他的样式就把上面的default换成themes里的其他主题，比如bootstrap、gray等。这里提供的5套皮肤，如果你对前端样式比较熟悉，也可以仿照的编写自定义的皮肤。

　　技术分享

  • 主界面设置：添加MainController，添加Index和Test视图，Index中返回用户名和角色名称，Test返回空视图就行。Test视图用于主页面的部分视图。Index视图中的代码如下：
@{
    ViewBag.Title = "系统后台框架";
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>

    <title>系统后台框架</title>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <link href="../../EasyUI/themes/default/easyui.css" rel="stylesheet" type="text/css" />
    <link href="../../EasyUI/themes/icon.css" rel="stylesheet" type="text/css" />
    <link href="../../EasyUI/demo/demo.css" rel="stylesheet" type="text/css" />
    <script src="../../EasyUI/jquery.min.js" type="text/javascript"></script>
    <script src="../../EasyUI/jquery.easyui.min.js" type="text/javascript"></script>

    <style type="text/css">
        html, body {
            height: 100%;
            width: 100%;
            margin: 0px;
            padding: 0px;
        }
        .fl {
            float: left;
            display: inline;
        }

        .fr {
            float: right;
            display: inline;
        }

        .leftcol, .rightcol {
            width: 30%;
            height: 24px;
            text-align: right;
            font-size: 14px;
            font-weight: 400;
            color: red;
        }

        .main {
            height: 24px;
            text-align: center;
            font-size: 14px;
            font-weight: 400;
        }

        .content {
            margin-right: 30px;
        }

        .cl {
            clear: both;
        }
    </style>

</head>
<body>
    <div class="easyui-layout" style="width:100%;height:100%; margin:0px;">
        <div data-options="region:‘north‘" style="height: 55px; background-image: url(/Content/themes/base/images/topbg.png); background-position: right bottom; ">
            <div style="text-align: left; float: left; height: 100%; width: 60%; margin-left:4px; font-size:xx-large; font-weight:600;  "> 
            XXX系统后台界面 
             </div>

            <div style="float:right; margin-top:4px; margin-left:8px; margin-right:8px;">
                <a href="/Account/Login"> <strong>退出</strong> </a>
            </div>
            <div style="float:right; margin-top:4px; margin-left:8px;">
                <a href="#"> <strong>密码修改 |</strong></a>
            </div>
            <div style="float:right; margin-top:4px; margin-left:8px;">
                <a href="#"><strong>设置 |</strong></a>
            </div>
        </div>
        <div data-options="region:‘south‘" style="height:25px;">
            <div class="content">
                <div class="fl leftcol"></div>
                <div class="fr rightcol">当前用户：@ViewBag.UserName  &nbsp;&nbsp; &nbsp; &nbsp;   所属角色：@ViewBag.RoleName</div>
                <div class="main">Copyright &copy; 2015 http//:wangweimutou.cnblogs.com. All Rights Reserved.</div>
                <div class="cl"></div>
            </div>

        </div>

        <div data-options="region:‘west‘,split:true" title="系统主菜单" style="width:168px;">
            <div class="easyui-accordion" data-options="fit:true,border:false">
                        <ul class="easyui-tree" id="txt"
                            data-options="url:‘../../data/tree_data.json‘,method:‘get‘,animate:true,lines:true"></ul>
                   
            </div>
        </div>

        <div data-options="region:‘center‘" borer="false">
            <div class="easyui-tabs" data-options="fit:true,border:false,plain:true" id="tt">
                <div title="系统主页" style="padding:10px">
                    @Html.Partial("Test")
                </div>
            </div>
        </div>
    </div>

    <script language="javascript" type="text/javascript">
        $(document).ready(function () {
            $(‘#txt‘).tree({
                onClick: function (node) {
                    if (node.treelevel != 2)  //如果点击的不是父节点
                    {
                         //alert(node.text + node.treelevel);
                        addTab(node.text, node.url, node.iconCls);
                    }
                }
            });
        })

        function addTab(title, url, iconCls) {
            if ($(‘#tt‘).tabs(‘exists‘, title)) {
                $(‘#tt‘).tabs(‘select‘, title);
            } else {
                var content = ‘<iframe scrolling="auto" frameborder="0"  src="‘ + url + ‘" style="width:99.5%;height:99.5%;"></iframe>‘;
                $(‘#tt‘).tabs(‘add‘, {
                    title: title,
                    content: content,
                    closable: true,
                    iconCls: iconCls
                });
            }
        }
    </script>
</body>
</html>

 

  • 主窗体采用采用easyui-layout来划分，里面嵌套的div可以参照data-options属性将区域进行详细划分。比如<div data-options="region:‘north‘"></div>就代表北部区域，也就是顶部区域，easyui-layout里面划分区域是按照地图的表示方法：上北下南，左西右东
  • 主窗体中含有一个addTab(title, url, iconCls)方法，这个就是操作tab标签的方法。采用的还是添加iframe的方式，不过EasyUI帮我们做好了封装。因此我们只需要传入标签名称(title)、页面链接(url)、标签图标(iconCls)就可以达到我们想要的效果。
  • 左边的菜单，我们可以利用easyui-tree来完成，可以通过data-options的get方式加载我们想要的json数据，注意一定要是json格式。后期我们就是通过数据库来读取菜单项。示例中读取的data文件夹中tree_data.json文件，我们将以下json格式的数据添加到此文件中：
[{
    "id":1,
    "text":"系统权限管理",
    "iconCls":"icon-large-chart",
    "children":[{
        "text":"用户管理",
        "iconCls":"icon-large-picture",
        "url":"/System/UserList"
    },{
        "text":"角色管理",
        "iconCls":"icon-large-clipart",
        "url":"/System/RoleList"
    },{
        "text":"菜单管理",
        "iconCls":"icon-large-shapes",
        "url":"/System/MenuList"
    
    },{
        "text":"权限设置",
          "iconCls":"icon-large-smartart",
        "url":"/System/PermitList"
    }]
},
{
    "id":2,
    "text":"数据管理",
    "iconCls":"icon-save",
    "children":[{
        "text":"数据录入",
        "url":"System/Test2"
    },{
        "text":"Test",
        "url":"System/Test2"
    }]
}]

 

  • 接下来就是调节一下左边页面菜单的样式，因为我发现tree的菜单项太拥挤呢。不过我现在调整的是default皮肤下的easyui.css样式。如果使用的是别的皮肤，那就要修改对应皮肤下的easyui.css样式。
tree-title {
    display: inline-block;
    font-size: 12px;
    height: 28px;
    line-height: 28px;
    padding: 0 2px;
    text-decoration: none;
    vertical-align: middle;
    white-space: nowrap;
}
.tree-expanded, .tree-collapsed, .tree-folder, .tree-file, .tree-checkbox, .tree-indent {
    display: inline-block;
    height: 18px;
    overflow: hidden;
    vertical-align: middle;
    width: 16px;
}
.tree-node {
  height: 28px;
  white-space: nowrap;
  cursor: pointer;
}

 

  • 到此，主界面搭建完成。可能是没有亮点的东西，会觉得枯燥，但是我们从0开始，就必须一步一步来搭建。调整样式这些都是前端工程师所擅长的，EasyUI只是为我们提供了默认的一下样式，如果可以，你可以发挥强大的css功力，就像博客园为我们提供了上百套的皮肤，但如果喜欢，我们还是可以按照自己的方式来进行修改。主界面完成后效果如下：

　　技术分享

 

备注

 

  • 完成此篇后，我们就把页面给搭建完成了，虽然没什么美观度，呵呵。现在Web工程登录和主界面的静态页面效果完成。到下一篇，我们就把代码部署到Visual Studio Online(TFVC)中，部署后，我们再进行代码的编写。
  • 到此虽然框架还是空的，但是我们可以看到页面效果呢。博客园的存储空间有限，我还是把这个空的框架放到网盘上吧。如果园友本地的环境合适，就可以下载按照以后的博文进行操作呢。点此下载

 

EF6 CodeFirst+Repository+Ninject+MVC4+EasyUI实践(二)

标签：

原文地址：http://www.cnblogs.com/wangweimutou/p/4652313.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！