一:新建分部視圖

二:布局頁_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(':')[0];
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")[0];
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(3); 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的方法雖然不用新建部分視圖,但是也要每個有公共頭尾的頁面控制器去繼承它,想想也有點膈應。
