mvc+ef5+easyui 组织机构和员工管理实例

环境:vs2010+sql2008

框架搭建

1,新建mvc4 web应用

2.

3. 系统自动生成的的controllers,和views文件中的等,以及模版等可以删除,如图红色部分

4.下载最新easy,解压,看到themes和jquery.easyui.min.js

5.将themes文件夹复制到解决方案中的CONTENT文件夹,jquery.easyui.min.js复制到scripts文件夹,

将拷贝到到文件右键包括到项目中,

6.新建首页,controllers文件夹右键添加控制器

7.控制器取名HomeController

8.为新建的HomeController添加视图

9.设置  视图默认名,视图引擎

10.

新添加的视图代码

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html>

 <head>

     <title>Index</title>

     <meta name="viewport" content="width=device-width" />

     <script src="~/Scripts/jquery-1.7.1.min.js"></script>

     <script src="~/Scripts/jquery.easyui.min.js"></script>

     @Styles.Render("~/Content/css")

     @Styles.Render("~/Content/themes/base/css")

     <script type="text/javascript">

         $(function () {

             InitLeftMenu();

         });

         function InitLeftMenu() {

             $("#nav").accordion({ animate: false });

             $('.easyui-accordion li a').click(function () {

                 var tabTitle = $(this).children('.nav').text();

                 var url = $(this).attr("rel");

                 var menuid = $(this).attr("ref");

                 var s = $(this).children('span');

                 var icon = s.attr('class');

                 addTab(tabTitle, url, icon);

                 $('.easyui-accordion li div').removeClass("selected");

                 $(this).parent().addClass("selected");

             }).hover(function () {

                 $(this).parent().addClass("hover");

             }, function () {

                 $(this).parent().removeClass("hover");

             });

             //选中第一个

             $('#nav').accordion('select', );

         }

         function addTab(subtitle, url, icon) {

             if (!$('#tabs').tabs('exists', subtitle)) {

                 $('#tabs').tabs('add', {

                     title: subtitle,

                     content: createFrame(url),

                     closable: true,

                     icon: icon

                 });

             } else {

                 $('#tabs').tabs('select', subtitle);

                 $('#mm-tabupdate').click();

             }

             tabClose();

         }

         function createFrame(url) {

             var s = '<iframe scrolling="auto" frameborder="0"  src="' + url + '" style="width:100%;height:100%;"></iframe>';

             return s;

         }

         function tabClose() {

             /*双击关闭TAB选项卡*/

             $(".tabs-inner").dblclick(function () {

                 var subtitle = $(this).children(".tabs-closable").text();

                 $('#tabs').tabs('close', subtitle);

             })

         }

     </script>

 </head>

 <body class="easyui-layout" style="overflow-y: hidden" scroll="no">

     <!--  top -->

     <div region="north" split="true" border="false" style="overflow: hidden; height: 40px;

         line-height: 40px;">

        信息管理系统

     </div>

     <!--  left -->

     <div id="west" region="west" split="true" title="导航菜单" style="width: 180px; height: 100%">

         <div id="nav" class="easyui-accordion" fit="true" border="false">

             <div title="控件使用" icon="icon-sys">

                 <ul>

                     <li>

                         <div class="">

                             <a href="javascript:void(0)" rel="/orga"><span class="icon-nav icon">&nbsp;</span><span

                                 class="nav">组织机构</span></a></div>

                     </li>

                     <li>

                         <div class="">

                             <a href="javascript:void(0)" rel="/staff"><span class="icon-add icon">&nbsp;</span><span

                                 class="nav">用户管理</span></a></div>

                     </li>

                     <li>

                         <div class="">

                             <a href="javascript:void(0)" rel="/role"><span class="icon-users icon">&nbsp;</span><span

                                 class="nav">角色管理</span></a></div>

                     </li>

                 </ul>

             </div>

             <div title="业务管理" icon="icon-sys">

                 员工管理

             </div>

         </div>

     </div>

     <!--  main -->

     <div id="mainPanle" region="center" style="height: 100%">

         <div id="tabs" class="easyui-tabs" fit="true" border="false">

             <div title="欢迎使用" style="padding: 20px; overflow: hidden; color: red;">

             </div>

         </div>

     </div>

 </body>

 </html>

11.home视图运行效果

首页左侧是easyui accordion控件,

12.注意

(1)App_Start文件夹中RouteConfig.cs文件

routes.MapRoute(
name: "Default",
url: "{controller}/{action}/{id}",
defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }

这里设置默认路由的主页是home/index

(2)App_Start文件夹中BundleConfig.cs文件设置,

mvc+ef5+easyui实例(1)的更多相关文章

  1. 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（7）-MVC与EasyUI DataGrid

    原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(7)-MVC与EasyUI DataGrid 没有源码的同学跳到第六讲下载源码再来. 我们需要漂亮的UI, ...

  2. 【MVC+EasyUI实例】对数据网格的增删改查（下）

    前言 继上文对网格加载数据,本文主要阐述对数据增删改的实现. 一.js代码 function Add() { $("#dlg").dialog('open'); $("# ...

  3. 【MVC+EasyUI实例】对数据网格的增删改查（上）

    前言 此案例是针对之前做的一个小例子的后台框架的修改,从以前的三层框架改为现在的MVC框架,也是做了一次MVC和EasyUI的结合,分为2篇文章来阐述. 界面如下: 点击"添加"按 ...

  4. 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（36）-文章发布系统③-kindeditor使用

    原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(36)-文章发布系统③-kindeditor使用 我相信目前国内富文本编辑器中KindEditor 属于前 ...

  5. 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（33）-数据验证共享

    原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(33)-数据验证共享 注:本节阅读需要有MVC 自定义验证的基础,否则比较吃力 一直以来表单的验证都是不可 ...

  6. 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（21）-权限管理系统-跑通整个系统

    原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(21)-权限管理系统-跑通整个系统 这一节我们来跑通整个系统,验证的流程,通过AOP切入方式,在访问方法之 ...

  7. [转]Spring3 MVC + jQuery easyUI 做的ajax版本用户管理

    原文地址:http://www.iteye.com/topic/1081739 上周写了篇基于spring3.0.5 mvc 简单用户管理实例 ( http://www.iteye.com/topic ...

  8. EasyUI实例源码

    jQuery+EasyUI实例源码 http://www.51aspx.com/code/jQueryEasyUIExample ASP.NET MVC+EF+EasyUI权限 http://www. ...

  9. 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（1）-前言与目录（持续更新中...）

    转自:http://www.cnblogs.com/ymnets/p/3424309.html 曾几何时我想写一个系列的文章,但是由于工作很忙,一直没有时间更新博客.博客园园龄都1年了,却一直都是空空 ...

随机推荐

  1. UITableView 或 UIScrollView 点击状态栏列表回到顶部

    整理来自互联网- 这是tableView继承的scrollView的一个属性 scrollsToTop. 官方说明是这样的: // When the user taps the status bar, ...

  2. 修改Chrome的User Agent的方法 真实有效

    如何修改Chrome的User Agent: 通过网络上查找,修改Chrome的Usre Agent有3种方式,但有的方式是不起作用的. 给Chrome添加启动参数(有作用) 通过扩展-User-Ag ...

  3. 在ASP.NET项目中使用CKEditor

    CKEditor是什么 CKEidtor是一个在线富文本编辑器,可以将让用户所见即所得的获得编辑在线文本,编辑器或自动将用户编辑的文字格式转换成html代码. 在ASP.NET工程中添加CKEdito ...

  4. 百度编辑器ueditor 在vs2008中的使用方法

    个人觉得百度编辑器ueditor还是不错的,虽然出生的时间比较短,但某些方面相比其它富文本编辑器更优秀,免费.可定制等等. 由于在官方下载的ueditor包是在vs2012下开发的,可以在vs2010 ...

  5. 简述UITextField的属性和用法

    0.     enablesReturnKeyAutomatically 默认为No,如果设置为Yes,文本框中没有输入任何字符的话,右下角的返回按钮是disabled的. 1.borderStyle ...

  6. C 各种数据类型介绍

    1.各种数据类型介绍: 基本数据类型最主要的特点是,其值不可以再分解为其它类型.也就是说,基本数据类型是自我说明的. 1.1整型 整形包括短整型.整形和长整形. 1.1.1短整形 short a=1; ...

  7. Android中的Menu

    Android中的设置按钮:长按或点击菜单键 1.长按选项: 布局文件: <LinearLayout xmlns:android="http://schemas.android.com ...

  8. PHP 数组和对象的相互转化

    对象和数组的相互转化在开发中也是很常见,一般不是多维的情况下直接(array)和(object)就可搞定了,多维的话,遍历下也就可以了: 1 <?php 2 class test 3 { 4 p ...

  9. Visual Studio Code和Docker开发asp.net core和mysql应用

    Visual Studio Code和Docker开发asp.net core和mysql应用 .net猿遇到了小鲸鱼,觉得越来越兴奋.本来.net猿只是在透过家里那田子窗看外面的世界,但是看着海峡对 ...

  10. jQuery停止事件冒泡

    event.stopPropagation(); 在jQuery中提供了stopPropagation()方法来停止事件冒泡.终止事件在传播过程的捕获.目标处理或起泡阶段进一步传播.调用该方法后,该节 ...