[2019编程]第五节教学大纲:Layout布局以及CSS样式表的介绍及应用

本文链接：https://blog.csdn.net/vinglemar/article/details/96978997

第一部分:Layout布局

第一部分:Layout布局

第一步:创建项目

C#,MVC4,基本项目,名称:MvcLayout

第二步:创建控制器

HomeController.cs:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace MvcLayout.Controllers
{
    public class HomeController : Controller
    {
        //
        // GET: /Home/

        public ActionResult Index()
        {
            return View();
        }
        public ActionResult LayoutDemo2()
        {
            return View();
        }
        public ActionResult NoLayoutDemo()
        {
            return View();
        }
        public ActionResult MulLayoutDemo()
        {
            int a = 3;
            if(a==1)
                return View("Index", "_Layout");
            else if(a==2)
                return View("Index", "_Layout2");
            else if (a == 3)
                return View("LayoutDemo2", "_Layout");
            else 
               return View("NoLayoutDemo");
        }
    }
}

第三步:创建视图

创建布局:

在Views/shared/目录下面,增加一个布局:

_Layout2.cshtml

(具体操作:通过复制_Layout.cshtml,再粘贴,然后重新命名为_Layout2.cshtml,然后,修改 title 标签中的内容为:My Layout2 )

在Views/shared/目录下面,修改默认布局_Layout.cshtml,使title标签中的内容为:Layout 1

创建普通视图:

给Index Action添加相应的View:首页 Index.cshtml,采用默认布局.

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>
<h2>@Html.ActionLink("Layout Demo 2","LayoutDemo2")</h2>
<h2>@Html.ActionLink("No Layout Demo","NoLayoutDemo")</h2>
<h2>@Html.ActionLink("Mul Layout Demo","MulLayoutDemo")</h2>

给LayoutDemo2 Action添加相应的View:LayoutDemo2.cshtml,采用_Layout2布局.

@{
    ViewBag.Title = "LayoutDemo2";
    Layout = "~/Views/Shared/_Layout2.cshtml";
}

<h2>LayoutDemo2</h2>

给NoLayoutDemo Action添加相应的View:NoLayoutDemo.cshtml,不采用布局.

@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>NoLayoutDemo</title>
</head>
<body>
    <div>
        No Layout 
    </div>
</body>
</html>