新浦京娱乐场官网-301net-新浦京娱乐www.301net
做最好的网站

整合了基于MVC的Bootstrap开发框架

世家对Bootstrap框架知识驾驭多少

Bootstrap是一个前端的才能框架,非常多平台都得以应用,JAVA/PHP/.NET都得以用来做前端分界面,整合JQuery能够达成极度丰裕的分界面效果,近来也会有众多Bootstrap的插件能够提需求我们使用,不过在国内相当多基于Bootstrap的牵线比非常多要么停留在教学的底蕴上,介绍Bootstrap的种种基础知识和精炼的采纳;本文希望以基于C#的MVC实际项目标底蕴上,对Bootstrap开拓框架举行完美的案例介绍,以实际项目标代码和意义截图进行教学,力求详尽、直观为大家介绍这方面包车型客车经验和感受。

1、基于Metronic的Bootstrap开采框架总览

Metronic是三个国外的依附HTML、JS等手艺的Bootstrap开垦框架整合,整合了大多Bootstrap的前端技艺和插件的选拔,是三个丰裕不易的技能框架。本文以那一个为根基,结合本人对MVC的Web框架的研商,整合了依据MVC的Bootstrap开拓框架,使之能够符合实际项指标布局亟待的实在项目。

以下是自己全部性项指标总的效果图。

图片 1

启航菜单区的剧情,动态从数据Curry面获取,系统顶栏放置一些音讯显示,以及提供用户对个人数据飞速管理,如查看个人音讯、注销、锁屏等操作,内容区域则器重是可视化体现的多寡,能够由此树列表控件、表格控件举办展示,一般数量还大概有增加和删除改查、以及分页的急需,由此供给组合各样功用的拍卖。别的,用户的数目,除了查询展现外,还必要有导入、导出等唇揭齿寒操作,这一个是常规性的数额管理功用。鲜明好这个法则和界面效果后,大家得以经过代码生成工具进行调换,快速生成这个Web项指标分界面效果了。

2、Bootstrap开垦框架菜单显示

全总框架涉及了无数剧情,包涵常规Bootstrap的种种CSS性格的施用,以及菜单栏、Bootstrap图标管理、系统顶栏、树形控件JSTree、Portlet容器、Modal对话框、Tab控件、、下拉列表Select2、复选框iCheck、多文本编辑控件summernote、文件及图片上传体现fileinput、指示控件bootstrap-toastr和sweetalert、数值调度控件touchspin、摄像播放彰显控件video-player等等,这么些特征在全部性的消除方案里面都有设计,集合这一个绝妙的插件,可认为大家的框架提供更加强劲的功用和拉长的界面体验。

本节接二连三回来框架的起来有些,菜单的处理和出示。一般为了管住有助于,菜单分为三级,选中的美食做法和其余菜单样式富有差异,菜单能够折叠最小化,效果如下所示。

图片 2 图片 3

在Bootstrap,创设菜单是八个对峙比较轻松的职业,首假若应用了UL和LI,通过体制的拍卖,就足以兑现了菜单的布局设置了,代码如下所示。

        <ul class="page-sidebar-menu page-sidebar-menu-hover-submenu " data-keep-expanded="false" data-auto-scroll="true" data-slide-speed="200">
          <li class="start" id="1">
            <a href="/Home/index">
              <i class="icon-home"></i>
              首页


            </a>
          </li>
          <li id="2">
            <a href="javascript:;">
              <i class="icon-basket"></i>
              行业动态


            </a>
            <ul class="sub-menu">
              <li class="heading" style="font-size:14px;color:yellow">
                <i class="icon-home"></i>
                行业动态
              </li>
              <li>
                <a href="#">
                  <i class="icon-home"></i>
                  4
                  政策法规
                </a>
              </li>
              <li>
                <a href="#">
                  <i class="icon-basket"></i>
                  4
                  通知公告
                </a>
              </li>
              <li>
                <a href="#">
                  <i class="icon-tag"></i>
                  4
                  动态信息
                </a>
              </li>
            </ul>
          </li>
        </ul>

只是,大家一般的美食指南是动态变化的,也便是亟需从数据Curry面获取,并设置到前面一个展现,那样大家就必要在MVC的调节器里面,输出菜单的剧情,然后绑定到后边三个的分界面上,完结菜单数据的动态化,同不平日间这也是权力决定的基础处理。

在基类里面,我们得以在用户登入后,获取菜单的多寡放到ViewBag对象里面。

图片 4

现实代码如下所示,先判定用户是或不是登录,如果登入,则收获用户的菜全面据,存在ViewBag里面待用。

/// <summary>
    /// 重写基类在Action执行之前的处理
    /// </summary>
    /// <param name="filterContext">重写方法的参数</param>
    protected override void OnActionExecuting(ActionExecutingContext filterContext)
    {
      base.OnActionExecuting(filterContext);
      //得到用户登录的信息
      CurrentUser = Session["UserInfo"] as UserInfo;
      if (CurrentUser == null)
      {
        Response.Redirect("/Login/Index");//如果用户为空跳转到登录界面
      }
      else
      {
        //设置授权属性,然后赋值给ViewBag保存
        ConvertAuthorizedInfo();
        ViewBag.AuthorizeKey = AuthorizeKey;
        //登录信息统一设置
        ViewBag.FullName = CurrentUser.FullName;
        ViewBag.Name = CurrentUser.Name;
        ViewBag.MenuString = GetMenuString();
        //ViewBag.MenuString = GetMenuStringCache(); //使用缓存,隔一段时间更新
      }
    }

在那之中,GetMenuString函数正是对菜单的建设构造管理。数据库中菜单的音信是三个树形结构,如下所示。

图片 5

大家能够依据数据库的菜谱新闻,营造一部分界面用到的HTML代码。

 #region 定义的格式模板
      // javascript:;
      // {0}?tid={1}
      var firstTemplate = @"
      <li id='{3}'>
        <a href='{0}'>
          <i class='{1}'></i>
          {2}


        </a>";
      var secondTemplate = @"
        <li class='heading' style='font-size:14px;color:yellow'>
          <i class='{0}'></i>
          {1}
        </li>";
      var thirdTemplate = @"
        <li id='{3}'>
          <a href='{0}'>
            <i class='{1}'></i>
            {2}
          </a>
        </li>";
      var firstTemplateEnd = "</li>";
      var secondTemplateStart = "<ul class='sub-menu'>";
      var secondTemplateEnd = "</ul>"; 
      #endregion

举个例子三级菜单就能够通过代码进行转移。

 //三级
            icon = subNodeInfo.WebIcon;
            //tid 为顶级分类id,sid 为第三级菜单id
            tmpUrl = string.Format("{0}{1}tid={2}&sid={3}", subNodeInfo.Url, GetUrlJoiner(subNodeInfo.Url), info.ID, subNodeInfo.ID);
            url = (!string.IsNullOrEmpty(subNodeInfo.Url) && subNodeInfo.Url.Trim() != "#") ? tmpUrl : "javascript:;";
            sb = sb.AppendFormat(thirdTemplate, url, icon, subNodeInfo.Name, subNodeInfo.ID);

理之当然,如若想提升并发量,能够减小菜单的频频检索,把那有些数目放到MemeryCache里面,如下管理就能够。

 public string GetMenuStringCache()
    {
      string itemValue = MemoryCacheHelper.GetCacheItem<string>("GetMenuStringCache", delegate()
        {
          return GetMenuString();
        },
        null, DateTime.Now.AddMinutes(5) //5分钟以后过期,重新获取
      );
      return itemValue;
    }

3、布局页面包车型大巴使用

与此同一时候,大家为了压实页面包车型地铁选择,一般情状下,是把各样页面一样部分的剧情抽离出来,放到总的布局页面上,那样处理内容区域外,别的部分全部是继续自布局视图页面包车型客车故事情节了,大家的动态菜单部分,也是在布局视图里面的一局地内容。

图片 6

上图的_Layout.cshtml正是基于C#的MVC总的布局视图页面。那样,大家在那一个页面里面,设定了菜单的来得内容,以及留出主页面内容的局部,以及脚本的片段显得,就可以了。

美食做法的体当代码如下所示:

图片 7

布局页面留出的页面展现Section如下所示。

图片 8

出于Bootstrap一般把JS文件放到最终加载,由此我们在布局页面保留部分必备的Jquery等脚本外,还要求把脚本有的剧情放到页面尾部进行加载,并且大家脚本加载可以利用MVC的Bundles本领拓展削减整合管理。关于那地点技巧,能够参照小编事先的篇章介绍《依据MVC4 EasyUI的Web开辟框架经验计算(11)--使用Bundles管理简化页面代码》。

图片 9

那样,大家在千家万户子页面包车型客车视图里面,引进布局视图页面后,只须求编写制定特性化呈现内容的一些就能够,具体代码如下所示。

图片 10

接下来在页面尾巴部分,满含所需部分的剧本代码就可以,那样在页不熟悉成后,就能够依据布局页面设置好的顺序块,举办合理的来得,並且是把具备片段剧情张开整合了。

图片 11

4、页面编辑工具Sublime Text的选用

本身眼下截图,很多是VS境况之中的,可是貌似我们编辑视图页面包车型大巴时候,都以行使Sublime Text那个强大的编写工具的,丰裕的插件、智能语法提醒等,会让您用了以后喜爱得舍不得放手,是编写制定视图页面特别连忙的利器,猛烈推荐使用。

VS一般大家用来做文件管理,以及编写翻译等管理就足以了。

图片 12

以上内容是小编给大家介绍的依赖BootStrap Metronic开垦框架经验总括【一】框架总览及菜单模块的拍卖的连带知识,希望对大家具有支持,假若大家想询问更加多音讯敬请关心脚本之家网址!

您恐怕感兴趣的小说:

  • Bootstrap入门汉朝竹简之(四)菜单、按键及导航
  • Bootstrap营造一个左方折叠菜单的体系模板(一)
  • Bootstrap创设一个侧边折叠菜单的系统模板(二)
  • BootStrap点击下拉菜单项后出示二个新的输入框达成代码
  • Bootstrap导航栏各要素操作方法(表单、开关、文本)
  • 第二遍接触美妙的Bootstrap菜单和导航
  • 依附Bootstrap达成下拉菜单项和表单导航条(八个菜单项,三个下拉菜单和登陆表单导航条)
  • Bootstrap导航条可点击和鼠标悬停呈现下拉菜单的兑当代码
  • 第九篇Bootstrap导航菜单成立步骤详解
  • Bootstrap菜单按键及导航实例剖析

本文由新浦京娱乐场官网-301net-新浦京娱乐www.301net发布于www.301net,转载请注明出处:整合了基于MVC的Bootstrap开发框架

您可能还会对下面的文章感兴趣: