后台主框架

后台主框架

目录

  1. ASP.NET MVC搭建项目后台UI框架—1、后台主框架
  2. ASP.NET MVC搭建项目后台UI框架—2、菜单特效
  3. ASP.NET MVC搭建项目后台UI框架—3、面板折叠和展开
  4. ASP.NET MVC搭建项目后台UI框架—4、tab多页签支持
  5. ASP.NET MVC搭建项目后台UI框架—5、Demo演示Controller和View的交互

准备做一个新的项目,从网页设计师手中拿到了html静态页面(没有一行js),但是都一个个零散的界面,我需要做的是:

1、  把这些零散的html界面连接起来

2、  自己编写js或者jquery实现菜单效果

3、  把html页面集成在我们的MVC Razor视图中

本想着使用第三方的UI框架 如Jquery EasyUI、ExtJs、MiniUI等来搭建框架,但是上面要求必须做得和美工给的html页面样式一致,不能用这些比较复杂的UI框架。作为非前端工程师,我只有硬着头皮上了。经过差不多2天的折腾,自己搭建好了UI框架。主要使用jquery和一些jquery的ui插件。即便使用了第三方的UI插件也是非常痛苦的,因为我需要修改UI插件的主题样式,改得和美工给我的界面看上去差不多。那我为什么要使用UI插件呢,一方面是为了提高用户体验,另一方面是为了减少编码,让View和Controller更好的结合,如果我不添加jquery的ui插件进来,可以直接在View中拼接美工给我的html页面,这样看起来简单多了,但是这样的话,界面复用性太差,需要更多的编码,我需要做的是,通过框架来尽可能减少团队成员的编码量,提高开发效率。

先看下最终效果:

从这里开始

一看到这样的后台界面,我首先就联想到使用iframe 或者 frameset 来搭建,因为这样可以实现页面嵌入。项目组有同事说可以使用能够MVC里面的局部视图,跟以前ASPX视图里面的母版页差不多,但是这不是我想要的,我不想每点击一个功能菜单都刷新整个界面,而且后面我要对菜单项做权限控制的。我先不添加任何js,一步一步来。

关于iframe 和 frame的区别大家可以网上查找,这里我不做过多解释,最终我使用了frame。框架中用到的js和css:CssJsImg源码

1、 新建ASP.NET MVC4项目MSD.WL.Site, 然后新建控制器HomeController,这里我用了4个Action方法,分别对应4个界面,Index代表frame主界面

  public class HomeController : Controller
    {
        public ActionResult Index()
        {
            ViewBag.Message = "欢迎使用财务模块";

            return View();
        }
        public ActionResult Top()
        {
            ViewBag.UserName = "超级管理员";
            ViewBag.AvailableBalance = "8888.00";
            return View();
        }
        public ActionResult Left()
        {
            return View();
        }
        public ActionResult Right()
        {
            return View();
        }
    }

2、  新建Index视图

 

3、 新建Top视图

 

4、新建Right视图

 

5、新建Left视图

 

6、新建Bootom.html

 

F5运行,这个时候,你看到的界面应该是这样的:

时间: 05-16

后台主框架的相关文章

ASP.NET MVC搭建项目后台UI框架—7、统计报表

ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NET MVC搭建项目后台UI框架—4.tab多页签支持 ASP.NET MVC搭建项目后台UI框架—5.Demo演示Controller和View的交互 ASP.NET MVC搭建项目后台UI框架—6.客户管理(添加.修改.查询.分页) ASP.NET MVC搭建项目后台UI框架—7.统计报表 本节,我将通

ASP.NET MVC搭建项目后台UI框架—4、tab多页签支持

目录 ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NET MVC搭建项目后台UI框架—4.tab多页签支持 ASP.NET MVC搭建项目后台UI框架—5.Demo演示Controller和View的交互 在点击左侧菜单中的选项时,我希望有Extjs.EasyUI等中类似的tab页签功能,因为这样可以支持多个页面的浏览,有时候我们可能需要同时打开多个页

ASP.NET MVC搭建项目后台UI框架—2、菜单特效

目录 ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 上一篇,已经把整个项目的框框给搭建好了,但是还没有任何js效果实现.这一节,我就来说下关于菜单的特效实现.我需要的效果如下: 需求总结: 点击顶部菜单模块,左侧显示不同模块下面的菜单列表 点击左侧菜单选项,展开下面的子菜单,并折叠其它菜单模块,菜单图标折叠显示为+,展开显示为-. 1.先看下Top视图中代码: 2.在Top视图的head中添加如下js: <script sr

【SSH项目实战03】使用EasyUI搭建后台页面框架

前面两节,我们整合了SSH并且抽取了service和action部分的接口,可以说基本开发环境已经搭建好了,这一节我们搭建一下后台的页面.我们讨论一下两种搭建方式:基于frameset和基于easyUI.最后我们会使用easyUI来开发. 1. 抽取公共JSP页面 我们先来看一下当前的jsp页面: <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

FragmentTabHost+Fragment搭建应用主框架

一.主界面Activity代码 public class MainActivity extends FragmentActivity{ //定义FragmentTabHost对象 private FragmentTabHost mTabHost; //定义一个布局填充器 private LayoutInflater layoutInflater; //定义数组来存放Fragment界面 private Class<?> fragmentArray[] = {HomeFragment.class

修改MDI工程主框架窗口标题(修改CREATESTRUCT结构体)

版权声明:本文为博主原创文章,未经博主允许不得转载. [cpp] view plain copy //在CMainFrame类的PreCreateWindow函数中加入 m_strTitle = _T("Hello"); cs.style &= ~FWS_ADDTOTITLE; //即可修改主框架窗口的标题.代码如下: BOOL CMainFrame::PreCreateWindow(CREATESTRUCT& cs) { m_strTitle = _T("H

Android新浪微博client(一)——主框架搭建

原文出自:方杰| http://fangjie.sinaapp.com/?p=62 转载请注明出处 该项目代码已经放到github:https://github.com/JayFang1993/SinaWeibo 提前声明的是,我是依照Ivan的这套教程学下来的. 首先,对于不论什么应用我们都须要建立一套消息处理机制,就是当用户在UI界面上点击了什么.你应该做出什么样的处理,处理完毕之后又要将结果 反馈给用户.显示在UI界面上.简而言之:主框架在这里主要是搭建起一个异步消息处理机制,UI线程中发

ASP.NET MVC搭建项目后台UI框架一

准备做一个新的项目,从网页设计师手中拿到了html静态页面(没有一行js),但是都一个个零散的界面,我需要做的是: 1.  把这些零散的html界面连接起来 2.  自己编写js或者jquery实现菜单效果 3.  把html页面集成在我们的MVC Razor视图中 本想着使用第三方的UI框架 如Jquery EasyUI.ExtJs.MiniUI等来搭建框架,但是上面要求必须做得和美工给的html页面样式一致,不能用这些比较复杂的UI框架.作为非前端工程师,我只有硬着头皮上了.经过差不多2天的

新浪微博项目技术之一UI主框架搭建

一.项目整体框架搭建 二.UI主框架结构及知识点 1>.代码封装思想 封装前的代码:(四个标题需要重复写四次,重复代码较多) HomeViewController *HomeVC = [[HomeViewController alloc] init]; UINavigationController *HomeNV = [[UINavigationController alloc] initWithRootViewController:HomeVC]; //tabBarItem标题文字设置 Hom