写了几天发觉大部分时间用在JS上了,本来想写个musicstore,却加了框架,然后又想用后台,然后又想用上bootstrapt,然后又想弄权限设计,然后又想…………

看来是想多了~

好吧,最近把后台搭起来了,用了metronic.bootstrap, 真心很强大。功能很多,为了节约时间成本就在它上面改吧。先上图看看

框架演示地址:http://dreamsky.github.io/main/blog/metronic-bootstrap/index.html

下载地址:http://dreamsky.github.io/main/blog/metronic-bootstrap/metronic.bootstrap.rar

来自分享:梦想天空

要实现导航条和菜单栏的功能,我用到了分部视图,就当是WEBFORM的用户控件来理解吧。

先看一下实体模型:

 public class UrlConfigDto
{
public int Id { get; set; } public string UrlName { get; set; } public string Url { get; set; } public int PageLev { get; set; } public int LevOrder { get; set; } public int UrlRole { get; set; } public string Icon { get; set; } public int POrder { get; set; }
}

  

我想把<URL,UNAME>绑定在视图上,所以我的Service层返回的是List<string>

 public List<string> GetMeunTool(int orderId)
{
List<string> dic = new List<string>(); UrlConfig urlConfig= _urlConfigRepository.GetFiltered(a => a.LevOrder == orderId).FirstOrDefault();
if (urlConfig==null)
{
return null;
}
dic.Add(urlConfig.UrlName+"^"+urlConfig.Url+"/"+urlConfig.LevOrder);
for (int i = 0; i < urlConfig.PageLev-1; i++)
{
UrlConfig tem = _urlConfigRepository.GetFiltered(a => a.LevOrder == urlConfig.POrder).FirstOrDefault();
dic.Add(tem.UrlName + "^" + tem.Url+ "/" + tem.LevOrder );
urlConfig.POrder = tem.LevOrder;
}
return dic;
}

创建分部视图,传递数据模型:

  public PartialViewResult MeunTool(int id)
{
return PartialView(_urlService.GetMeunTool(id));
}

来看看视图页面

@model List<string>

@if (Model == null)
{
<h3 class="page-title">主页</h3>
<ul class="breadcrumb">
<li>
<i class="icon-home"></i>
<a href="/Admin/Admin">主页</a>
</li>
</ul>
}else if (Model.Count == 1)
{
<h3 class="page-title">@Model[0].Split('^')[0] </h3>
<ul class="breadcrumb">
<li>
<i class="icon-home"></i>
<a href="/Admin/Admin">主页</a>
<i class="icon-angle-right"></i>
</li>
<li><a href="@Model[0].Split('^')[1]">@Model[0].Split('^')[0]</a></li> </ul>
}

其实我这里想用Dictionary<string,string> 的,不过PartialView()里不允许。

在模板页面我们就可以这样调用分部视图了:

  @{
int id = Convert.ToInt32(Html.ViewContext.RouteData.Values["id"]);
Html.RenderAction("MeunTool", "Admin", new { id = id });
}

说明一下这里的id的设计作用 ,这个ID是urlconfig表的惟一键,我用它来识别当前页的位置,如URL:http://localhost:11903/Admin/Admin/UserInfo/301  

@Html.ViewContext.RouteData.Values["id"]  在视图页面可以直接接受到id传参

PS:想要当做项目做而不一个DEMO,在用户体验得下大功夫,JS是最耗时间的,有点拖垮人的节奏……

具体代码的实现,请参见 https://code.csdn.net/denghao156/ktnmb_mvc4

MVC4商城项目三:分部视图在导航条上的应用的更多相关文章

  1. 【iOS开发-22】navigationBar导航条和navigationItem设置:基本搞定导航条上的文字和按钮以及各种跳转

    http://blog.csdn.net/weisubao/article/details/39646739?utm_source=tuicool&utm_medium=referral (1 ...

  2. MVC4商城项目四:应用Bundle捆绑压缩技术

    从MVC4开始,我们就发现,项目中对Global.asax进行了优化,将原来在MVC3中使用的代码移到了[App_Start]文件夹下,而Global.asax只负责初始化.其中的BundleConf ...

  3. MVC4商城项目一:框架设计

    代码已托管在  https://code.csdn.net/denghao156/ktnmb_mvc4 先上图,设计模式参考:ddmvc4.codeplex.com 一.unintofwork  设计 ...

  4. MVC4商城项目二:用户身份验证的实现

    用户身份验证,依赖于 forms 身份验证类:FormsAuthentication,它是一串加密的cookie 来实现对控制器访问限制和登陆页面的访问控制.它在浏览器端是这样子的: 需求:我们要实现 ...

  5. 19 Flutter仿京东商城项目 商品详情 底部浮动导航布局 商品页面布局

    效果: widget/JdButton.dart import 'package:flutter/material.dart'; import '../services/ScreenAdaper.da ...

  6. 【SSH网上商城项目实战13】Struts2实现文件上传功能

    转自:https://blog.csdn.net/eson_15/article/details/51366384 上一节我们做完了添加和更新商品的功能,这两个部分里有涉及到商品图片的上传,并没有详细 ...

  7. 导航条上UIBarButtonItem的更改方法(使用initWithCustomView:btn)

    UINavigationController *nav = [[[UINavigationController alloc] initWithRootViewController:self.newMe ...

  8. React Native商城项目实战07 - 设置“More”界面导航条

    1.More/More.js /** * 更多 */ import React, { Component } from 'react'; import { AppRegistry, StyleShee ...

  9. javaWEB简单商城项目

    javaWEB简单商城项目(一) 项目中使用到了上一篇博文的分页框架,还有mybatis,重点是学习mybatis.现在有些小迷茫,不知道该干啥,唉,不想那么多了,学就对了 一.项目功能结构 1.功能 ...

随机推荐

  1. Java抽象类深入理解-----模板方法设计模式(Templete Method)

    模板方法设计模式(Templete Method) 定义一个操作中的算法骨架,而将一些可变部分的实现延迟到子类中. 模板方法设计模式使得子类可以不改变一个算法的结构即可重新定义该算法某些特定的步骤. ...

  2. Blogger建立新文章 - Blog透视镜

    使用Blogger,建立好Blog部落格之后,接着就是建立新文章,它是Blog部落格的灵魂,先从简单开始,来了解建立新文章的标题,文章中如何上传图片,建立卷标,及设定排程日期,定时自动发布等这些功能, ...

  3. Linux系统监控

    http://my.oschina.net/aiguozhe/blog/35730 http://my.oschina.net/aiguozhe/blog/35730

  4. EXTJS 4.2 实现 gridpanel 鼠标悬停单元格以提示信息的方式显示单元格内容。

    由于gridpanel的单元格里的文字太多时候,都由省略号代替,就想实现如题的功能,经过反复实验,终于搞定了!直接上代码: me.on('itemmouseenter', function (view ...

  5. 【转】CTS tests 4.2_r4

    原文网址:http://www.xuebuyuan.com/1722006.html Precondition: 1.Get android sdk 2.Set adb to environment ...

  6. A站有一个页面需要PV统计 A站读写该数据 B站读该数据 需要数据同步

    A站弄个缓存,并且开放出一个读取借口给B站 B站读取数据的时候,调用该接口和数据库内的数据累加,然后进行限时即可 ---------------------- 另外其他方法 session服务.mem ...

  7. jquery 弹出框 showDialog.js具体用法

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAABWwAAAImCAIAAABID1T7AAAgAElEQVR4nO3d329c52Hgff1HvPCNLw

  8. python threading基础学习

    # -*- coding: utf-8 -*- # python:2.x __author__ = 'Administrator' """ python是支持多线程的,并 ...

  9. JAVA反射机制示例,读取excel数据映射到JAVA对象中

    import java.beans.PropertyDescriptor; import java.io.File; import java.io.FileInputStream; import ja ...

  10. php 二维码生成类

    <?php /** * BarcodeQR - Code QR Barcode Image Generator (PNG) * @package BarcodeQR * @category Ba ...