zoukankan      html  css  js  c++  java
  • ASP.NET MVC 使用分部视图制作公共头部,尾部,并通过ViewBag传值

    一:新建分部视图

    二:布局页_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的方法虽然不用新建部分视图,但是也要每个有公共头尾的页面控制器去继承它,想想也有点膈应。

  • 相关阅读:
    找球号(一)
    拦截导弹
    开灯问题
    超级台阶
    小学生算术
    Financial Management
    三角形面积
    另一种阶乘问题
    并发环境下,先操作数据库还是先操作缓存?
    Flask框架Server和RequestHandler的爱恨纠缠
  • 原文地址:https://www.cnblogs.com/baocaige/p/11176153.html
Copyright © 2011-2022 走看看