.net mvc框架与Jquery、Bootstrap那些事-1

  今天来园子里随便写两句,因为之前采用mvc框架时,前台ui多用的EXT.NET,时不时自己想可以自己搭建一个MVC与Jquery、BootStrap的项目架构,换套皮肤换个心情,呵呵,随便说的哦……

  这不前段时间,自己动手随便搭建了一个,还未精修,比较粗糙,路过人随便看看。呵呵

  如今,网络资料太多,如有雷同,纯属巧合,其实偷偷告诉你我也是参考网上资料来搭建的,哈哈。

  废话不多说,先上图,目前阶段大致的效果图,后期会有……哈哈 不告诉你!

.net mvc框架与Jquery、Bootstrap那些事-1_第1张图片

 

.net mvc框架与Jquery、Bootstrap那些事-1_第2张图片

 

  采用.net mvc+EF+Jquery+bootstrap实现,其实也没有那么多了,搭了个.NET MVC的框架 前台应用了BootStrap的一些样式和Jquery个别插件。

今天过来写写也是为了回顾一下之前的设计思想和技术点。

原本是想着搭建一套底层的架构模板,这样以后到实际的企业应用模块,我们只需套用就可以了。这次主要阐述整个系统的大致布局及动态菜单的实现:

 

一、整体网页布局采用frame,也实现了模板页的效果。主要分为上、中、下,中部又分为左侧菜单栏,右侧主页面区域,

关于frame的使用,这里不多说,可以自行上网搜索。

.net mvc框架与Jquery、Bootstrap那些事-1_第3张图片

 

二、左侧菜单栏的实现,因为本着可以通用的思想,这里采用的是动态构建数据及配置菜单结构的思想(静态文本配置的菜单网上太多了,而且都挺好看)。

首先,菜单UI我这里用的是BootStrap的插件 bootstrap-treeview,关于它本身的使用,官方有更详细的资料,这里就跳过了。

再次,构建对应数据库菜单项数据表,这里是Sql Server 2008R2

.net mvc框架与Jquery、Bootstrap那些事-1_第4张图片

表结构如上,添加部分测试数据如下:

.net mvc框架与Jquery、Bootstrap那些事-1_第5张图片

当然,父级菜单与子级菜单对应关系,添加对应数据方面也有层级对应关系,这个大家都懂,不多说

最后,当然是打代码咯:

1、后台获取数据(采用ORM-EF框架,不是今天的重点,Pass),递归构建符合bootstrap-treeview数据源对象结构的菜单数据。

上主要代码:

.net mvc框架与Jquery、Bootstrap那些事-1_第6张图片

.net mvc框架与Jquery、Bootstrap那些事-1_第7张图片

.net mvc框架与Jquery、Bootstrap那些事-1_第8张图片

.net mvc框架与Jquery、Bootstrap那些事-1_第9张图片

 

可以添加TreeNode属性以及数据库中设置字段属性的值自由设置menu菜单的显示样式。(当然要与treeview里的样式属性对应上) 

.net mvc框架与Jquery、Bootstrap那些事-1_第10张图片

 

2、写前台脚本(很简单,现成的调用),绑定页面元素:

.net mvc框架与Jquery、Bootstrap那些事-1_第11张图片

 

OK,大功告成了,写的有纰漏,还望纠正和谅解,谢谢!

 

转载于:https://www.cnblogs.com/lmssong/p/9890401.html

你可能感兴趣的:(.net mvc框架与Jquery、Bootstrap那些事-1)