一:新建分部视图

二:布局页_Layout.cshtml上调用

不灵活,不能传递数据,引用静态公共部分

@Html.Partial("_Head")

@Html.Partial("~/Views/Shared/_Head.cshtml")

通过控制器方法引入分部视图,控制器里可以向分部视图传递数据,引用动态公共部分

@Html.Action("Head", "Home")

三:代码展示:

布局页_Layout.cshtml,因为@RenderSection只能放在布局页,所以@Html.Action("Foot", "Home")下面的一坨就没放在_Foot里面,会报错。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title</title>
@Html.Action("Meta", "Home")
<link rel="stylesheet" href="~/Content/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="~/Content/layui/css/layui.css" />
<link rel="stylesheet" href="~/Content/css/master.css" />
<link rel="stylesheet" href="~/Content/css/gloable.css" />
<link rel="stylesheet" href="~/Content/css/nprogress.css" />
@RenderSection("css", required: false)
</head>
<body>
@Html.Action("Head", "Home")
@RenderBody()
@Html.Action("Foot", "Home")
<script src="~/Content/layui/layui.js"></script>
<script src="~/Content/js/yss/gloable.js"></script>
<script src="~/Content/js/plugins/nprogress.js"></script>
<script>NProgress.start();</script>
@RenderSection("js", required: false)
<script>
window.onload = function () {
NProgress.done();
};
</script>
<script>
(function () {
var bp = document.createElement('script');
var curProtocol = window.location.protocol.split(':')[];
if (curProtocol === 'https') {
bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
}
else {
bp.src = 'http://push.zhanzhang.baidu.com/push.js';
}
var s = document.getElementsByTagName("script")[];
s.parentNode.insertBefore(bp, s);
})();
</script>
</body>
</html>

我把控制器方法写在了首页,因为博客首页头部尾部不公共的,其实写哪里都一样,返回分部视图就ok。

首页控制器:/Home

返回分部视图千万不要用 return View(model.GetWebSiteInfo());  会默认找~Views/Home/ 下面的视图,严重错误,IIS Express直接崩掉自动退出

using RightControl.IService;
using RightControl.WebApp.Models;
using System.Web.Mvc; namespace RightControl.WebApp.Controllers
{
public class HomeController : Controller
{
public IArticleService service { get; set; }
WebSiteInfo model = new WebSiteInfo();
// GET: Home
public ActionResult Index()
{
ViewBag.HotArtileList = service.GetHotArticle();
return View(model.GetWebSiteInfo());
}
public ActionResult Meta()
{
ViewBag.Site = model.GetWebSiteInfo();
return PartialView("~/Views/Shared/_Meta.cshtml");
}
public ActionResult Head()
{
ViewBag.Site = model.GetWebSiteInfo();
return PartialView("~/Views/Shared/_Head.cshtml");
}
public ActionResult Foot()
{
ViewBag.Site = model.GetWebSiteInfo();
return PartialView("/Views/Shared/_Foot.cshtml");
}
}
}

_Meta.cshtml

<meta name="keywords" content="@ViewBag.Site.MetaKey" />
<meta name="description" content="@ViewBag.Site.MetaDescribe">

_Head.cshtml

<div class="header">
</div>
<header class="gird-header">
<div class="header-fixed">
<div class="header-inner">
<a href="javascript:void(0)" class="header-logo" id="logo">@ViewBag.Site.SiteName</a>
<nav class="nav" id="nav">
<ul>
<li><a href="/Home">首页</a></li>
<li><a href="/Article">博客</a></li>
<li><a href="/Feedback">留言</a></li>
<li><a href="/Diarys">日记</a></li>
<li><a href="/Links">友链</a></li>
<li><a href="/About">关于</a></li>
</ul>
</nav>
<a href="/User/QQLogin" class="blog-user">
<i class="fa fa-qq"></i>
</a>
<a class="phone-menu">
<i></i>
<i></i>
<i></i>
</a>
</div>
</div>
</header>

_Foot.cshtml

<footer class="grid-footer">
<div class="footer-fixed">
<div class="copyright">
<div class="info">
<div class="contact">
<a href="@ViewBag.Site.Gitee" class="github" target="_blank"><i class="fa fa-github"></i></a>
<a href="https://wpa.qq.com/msgrd?v=3&uin=@ViewBag.Site.QQ&site=qq&menu=yes" class="qq" target="_blank" title="@ViewBag.Site.QQ"><i class="fa fa-qq"></i></a>
<a href="https://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=@ViewBag.Site.Mail" class="email" target="_blank" title="@ViewBag.Site.Mail"><i class="fa fa-envelope"></i></a>
<a href="javascript:void(0)" class="weixin"><i class="fa fa-weixin"></i></a>
</div>
<p class="mt05">
@ViewBag.Site.CopyRight
</p>
</div>
</div>
</div>
</footer>

最终效果:

头部尾部提取公共部分还有一种做法,不用分部视图,直接用布局页:

新建BaseController控制器,里面获取网站头部尾部需要的WebSiteInfo信息,除开博客首页每个页面的控制器都继承它,布局页直接使用BaseController的WebSiteInfo信息,通过ViewBag的方式给布局页头尾赋值。

最后总结,个人还是喜欢用分部视图来抽出头部尾部的,继承BaseController的方法虽然不用新建部分视图,但是也要每个有公共头尾的页面控制器去继承它,想想也有点膈应。

ASP.NET MVC 使用分部视图制作公共头部,尾部,并通过ViewBag传值的更多相关文章

  1. ASP.NET MVC之分部视图和ChildAction(三)

    前言 上节我们已经非常清晰并且明确的讲了@Html.ActionLink的作用,这一节我们开始讲讲分部视图以及孩子Action. 话题 在C#中我们知道继承的目的是为了代码的复用,在Web应用程序同样 ...

  2. Asp.net Mvc中分部视图获取后台数据并展示

    方式一: 1.主页面中代码: @{Html.RenderAction("CreateLeftMenu");} 2.Controller中代码: public PartialView ...

  3. ASP.NET MVC 中的视图生成

    关于 ASP.NET MVC 中的视图生成 在 ASP.NET MVC 中,我们将前端的呈现划分为三个独立的部分来实现,Controller 用来控制用户的操作,View 用来控制呈现的内容,Mode ...

  4. ASP.NET MVC 自定义Razor视图WorkContext

    概述 1.在ASP.NET MVC项目开发的过程中,我们经常需要在cshtml的视图层输出一些公用信息 比如:页面Title.服务器日期时间.页面关键字.关键字描述.系统版本号.资源版本号等 2.普通 ...

  5. ASP.NET MVC学习之视图篇(2)

    继ASP.NET MVC学习之视图(1)学习 4.HTML辅助器 虽然在ASP.NET MVC中我们已经摆脱了ASP.NET的控件,但是对于页面中需要循环标签的情况依然还是存在,可能很多人认为用for ...

  6. MVC小系列(三)【MVC的分部视图】

    MVC的分部视图: 分部视图在action中返回一定要用PartialView(),而不要偷懒使用View(),因为如果使用后者,系统会认为是一个标准视图,会为它加个默认的母版页(LayOut),除非 ...

  7. 4.ASP.NET MVC 5.0 视图之模型绑定

    大家好,这篇文章,我将向大家介绍ASP.NET MVC的模型视图绑定,ASP.MVC的模型绑定分为两种:一种是动态绑定[Dynamic Binding];还有一种就是强类型绑定[Strongly ty ...

  8. ASP.NET MVC扩展自定义视图引擎支持多模板&动态换肤skins机制

    ASP.NET mvc的razor视图引擎是一个非常好的.NET MVC框架内置的视图引擎.一般情况我们使用.NET MVC框架为我们提供的这个Razor视图引擎就足够了.但是有时我们想在我们的项目支 ...

  9. ASP.NET MVC 扩展自定义视图引擎支持多模板&动态换肤skins机制

    ASP.NET  mvc的razor视图引擎是一个非常好的.NET  MVC 框架内置的视图引擎.一般情况我们使用.NET MVC框架为我们提供的这个Razor视图引擎就足够了.但是有时我们想在我们的 ...

随机推荐

  1. jira使用一:如何给项目分组、sprint并行、禁止发送消息给atlassian

    问题一:如何设置多个sprint并行? 问题二: 如何分组显示 设置泳道,并快速过滤 问题3:添加所属产品? 管理员登录Jira后台设置-问题-自定义字段找到:所属产品,进入 配置 界面在配置界面中, ...

  2. K8S从入门到放弃系列-(11)kubernetes集群网络Calico部署

    摘要: 前面几个篇幅,已经介绍master与node节点集群组件部署,由于K8S本身不支持网络,当 node 全部启动后,由于网络组件(CNI)未安装会显示为 NotReady 状态,需要借助第三方网 ...

  3. 学习Elasticsearch原理笔记

    Elasticsearch是一个分布式可拓展的实时搜索和分析引擎 分布式实时文件存储,并将每一个字段都编入索引,使其可以被搜索 实时分析的分布式搜索引擎 可以拓展到上百台服务器,处理PB级别的结构化或 ...

  4. 《Mysql 一条 SQL 更新语句是如何执行的?(Redo log)》

    一:更新流程 - 对于更新来说,也同样会根据 SQL 的执行流程进行. -  - 连接器 - 连接数据库,具体的不做赘述. - 查询缓存 - 在一个表上有更新的时候,跟这个表有关的查询缓存会失效. - ...

  5. Spring Boot系列教程十三:Spring boot集成Sentinel Redis

    前言 上一篇文章介绍了spring boot集成单点的redis,然而实际生产环境使用单点的redis风险很高,一旦宕机整个服务将无法使用,这篇文章介绍如何使用基于sentinel的redis高可用方 ...

  6. C++视频读取与视频保存

    VideoCapture cap("E:\\122.avi"); //计算视频帧数 int VedioFPS = cap.get(CV_CAP_PROP_FPS); //cout ...

  7. C++Primer 5th Chap9 Sequential Container

    vector 可变大小数组,支持快速随机访问(在除了尾部之外部分插入删除元素很慢) deque 双端队列,支持快速随机访问(在头尾插入删除元素很快) list 双向链表,仅支持双向顺序访问(在任何位置 ...

  8. Python习题006

    作业一:打印10*10  星星 ★☆ 要求一:普通打印★ l = 0 while l <10: h = 0 while h < 9: print("★", end=&q ...

  9. 附录:ARM 手册 词汇表

    来自:<DDI0406C_C_arm_architecture_reference_manual.pdf>p2723 能够查询到:“RAZ RAO WI 等的意思” RAZ:Read-As ...

  10. react中jsx文件是如何转换成js对象的

    通过在线babel转换器,转换出jsx是如何变成js对象的 jsx文件 加入了正常的标签以及嵌套标签以及方法属性 function hello() { click=()=>{ console.l ...