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

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

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

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

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

 

 

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

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

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

 

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

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

 

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

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

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

表结构如上，添加部分测试数据如下：

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

最后，当然是打代码咯：

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

上主要代码：

 

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

 

2、写前台脚本（很简单，现成的调用），绑定页面元素：

 

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

 

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