基于BootStrap Metronic开发框架经验小结【一】框架(2)

#region 定义的格式模板 // javascript:; // {0}?tid={1} var firstTemplate = @" <li> <a href='https://www.jb51.net/article/{0}'> <i></i> <span>{2}</span> <span></span> <span></span> </a>"; var secondTemplate = @" <li> <i></i> {1} </li>"; var thirdTemplate = @" <li> <a href='https://www.jb51.net/article/{0}'> <i></i> {2} </a> </li>"; var firstTemplateEnd = "</li>"; var secondTemplateStart = "<ul>"; 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、布局页面的使用

同时,我们为了提高页面的重用,一般情况下,是把每个页面相同部分的内容抽离出来,放到总的布局页面上,这样处理内容区域外,其他部分全部是继承自布局视图页面的内容了,我们的动态菜单部分,也是在布局视图里面的一部分内容。

上图的_Layout.cshtml就是基于C#的MVC总的布局视图页面。这样,我们在这个页面里面,设定了菜单的展示内容,以及留出主页面内容的部分,以及脚本的部分展示,就可以了。

菜单的展示代码如下所示:

基于BootStrap Metronic开发框架经验小结【一】框架

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

基于BootStrap Metronic开发框架经验小结【一】框架

由于Bootstrap一般把JS文件放到最后加载,因此我们在布局页面保留部分必备的Jquery等脚本外,还需要把脚本部分内容放到页面底部进行加载,并且我们脚本加载可以利用MVC的Bundles技术进行压缩整合处理。关于这方面技术,可以参考我之前的文章介绍《基于MVC4+EasyUI的Web开发框架经验总结(11)--使用Bundles处理简化页面代码》。

基于BootStrap Metronic开发框架经验小结【一】框架

这样,我们在各个子页面的视图里面,引入布局视图页面后,只需要编写个性化展示内容的部分即可,具体代码如下所示。

基于BootStrap Metronic开发框架经验小结【一】框架

然后在页面底部,包含所需部分的脚本代码即可,这样在页面生成后,就会依据布局页面设置好的顺序块,进行合理的展示,并且是把所有部分内容进行整合了。

基于BootStrap Metronic开发框架经验小结【一】框架

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

我前面截图,很多是VS环境里面的,不过一般我们编辑视图页面的时候,都是采用Sublime Text这个强大的编辑工具的,丰富的插件、智能语法提示等,会让你用了之后爱不释手,是编辑视图页面非常快速的利器,强烈推荐使用。

VS一般我们用来做文件管理,以及编译等处理就可以了。

基于BootStrap Metronic开发框架经验小结【一】框架

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wzpxzf.html