mvc5html5模板,MVC|Razor布局-模板页|ViewStart.cshtml

ViewStart.cshtml视图页面

要点1

MVC中执行任何一个视图之前都要先执行Views文件夹下的 _ViewStart.cshtml

视图的内容

注意点：想要上面的描述成立，则在action方法中必须以return View()来返回视图。

如果是以PowerView()

方法来返回视图的话，则不会执行_ViewStart.cshtml 中的内容

public class HomeController : Controller

{

public ActionResult Index()

{

//MVC中执行任何一个视图之前都要先执行Views文件夹下的_ViewStart.cshtml视图的内容

// ↓↓

return View(); //但是只有以return

View()的形式返回视图，才会执行_ViewStart.cshtml视图中的内容

//return PartialView(); 如果如果是以PowerView()

方法来返回视图的话，则不会执行_ViewStart.cshtml 中的内容

}

}

}

要点2

ViewStart.cshtml视图一般是直接存在与Views视图下面的。当然其他文件夹下面也是可以有ViewStart.cshtml视图页面的

(前提是这个文件夹是在Views文件夹下)

我们看到在Views文件夹下存在ViewStart.cshtml文件外，在Home文件夹下同样也存在一个ViewStart.cshtml文件。

那么当存在多个ViewStart.cshtml文件的时候执行顺序是什么呢？

答：

1>首先是执行Views文件夹下的ViewStart.cshtml视图文件的内容。当我们访问的是Home文件夹下的的视图的时候，Home文件夹下的ViewStart.cshtml文件才会被执行。

也就是先执行了Views文件夹下的ViewStart.cshtml视图文件内容，后才执行Home文件夹下的ViewStart.cshtml视图内容

2>当我们访问的是Test文件下的视图的时候，就仅仅是执行Views文件夹下的ViewStart.cshtml视图内容(因为Test文件夹下不存在ViewStart.cshtml视图文件)

_ViewStart.cshtml

视图文件的作用

_ViewStart.cshtml

文件的作用：一般是用于存放MVC网站中所有视图公用的js,css等文件。这样就不需要在每个视图中都拖一个js,css等文件进来了

模板页

_Layout.cshtml

<

class="hljs-name" style="box-sizing: border-box; outline: 0px;

color: rgb(224, 108, 117); word-break:

break-all;">html>

<

class="hljs-name" style="box-sizing: border-box; outline: 0px;

color: rgb(224, 108, 117); word-break:

break-all;">head>

<

class="hljs-name" style="box-sizing: border-box; outline: 0px;

color: rgb(224, 108, 117); word-break: break-all;">meta

charset="utf-8"

/>

<

class="hljs-name" style="box-sizing: border-box; outline: 0px;

color: rgb(224, 108, 117); word-break: break-all;">meta

name="viewport"

content="width=device-width"

/>

<

class="hljs-name" style="box-sizing: border-box; outline: 0px;

color: rgb(224, 108, 117); word-break:

break-all;">title>@ViewBag.Title

class="hljs-name" style="box-sizing: border-box; outline: 0px;

color: rgb(224, 108, 117); word-break:

break-all;">title>

@Styles.Render("~/Content/css")

@Scripts.Render("~/bundles/jquery")

@RenderSection("scripts", required: false)

@RenderSection("Mycss",required:true)

class="hljs-name" style="box-sizing: border-box; outline: 0px;

color: rgb(224, 108, 117); word-break:

break-all;">head>

<

class="hljs-name" style="box-sizing: border-box; outline: 0px;

color: rgb(224, 108, 117); word-break:

break-all;">body>

<

class="hljs-name" style="box-sizing: border-box; outline: 0px;

color: rgb(224, 108, 117); word-break: break-all;">div

style="width:800px;margin:0px

auto">

<

class="hljs-name" style="box-sizing: border-box; outline: 0px;

color: rgb(224, 108, 117); word-break: break-all;">div

style="border:1px

solid red; height:50px">顶部内容

class="hljs-name" style="box-sizing: border-box; outline: 0px;

color: rgb(224, 108, 117); word-break:

break-all;">div>

<

class="hljs-name" style="box-sizing: border-box; outline: 0px;

color: rgb(224, 108, 117); word-break:

break-all;">div>

<

class="hljs-name" style="box-sizing: border-box; outline: 0px;

color: rgb(224, 108, 117); word-break: break-all;">div

style="float:left;

width:150px; height:500px; border:1px solid blue" >

<

class="hljs-name" style="box-sizing: border-box; outline: 0px;

color: rgb(224, 108, 117); word-break:

break-all;">ul>

<

class="hljs-name" style="box-sizing: border-box; outline: 0px;

color: rgb(224, 108, 117); word-break:

break-all;">li>菜单1

class="hljs-name" style="box-sizing: border-box; outline: 0px;

color: rgb(224, 108, 117); word-break:

break-all;">li>

<

class="hljs-name" style="box-sizing: border-box; outline: 0px;

color: rgb(224, 108, 117); word-break:

break-all;">li>菜单2

class="hljs-name" style="box-sizing: border-box; outline: 0px;

color: rgb(224, 108, 117); word-break:

break-all;">li>

<

class="hljs-name" style="box-sizing: border-box; outline: 0px;

color: rgb(224, 108, 117); word-break:

break-all;">li>菜单3

class="hljs-name" style="box-sizing: border-box; outline: 0px;

color: rgb(224, 108, 117); word-break:

break-all;">li>

class="hljs-name" style="box-sizing: border-box; outline: 0px;

color: rgb(224, 108, 117); word-break:

break-all;">ul>

class="hljs-name" style="box-sizing: border-box; outline: 0px;

color: rgb(224, 108, 117); word-break:

break-all;">div>

<

class="hljs-name" style="box-sizing: border-box; outline: 0px;

color: rgb(224, 108, 117); word-break: break-all;">div

style="float:

right; width: 640px; height: 500px; border: 1px solid

blue">

@RenderBody()

class="hljs-name" style="box-sizing: border-box; outline: 0px;

color: rgb(224, 108, 117); word-break:

break-all;">div>

class="hljs-name" style="box-sizing: border-box; outline: 0px;

color: rgb(224, 108, 117); word-break:

break-all;">div>

class="hljs-name" style="box-sizing: border-box; outline: 0px;

color: rgb(224, 108, 117); word-break:

break-all;">div>

class="hljs-name" style="box-sizing: border-box; outline: 0px;

color: rgb(224, 108, 117); word-break:

break-all;">body>

class="hljs-name" style="box-sizing: border-box; outline: 0px;

color: rgb(224, 108, 117); word-break:

break-all;">html>

在看看我们继承这个模板页的子页面 (Home控制器下的Index视图，它使用了上面这个模板页)

@{

ViewBag.Title = "Index";

}

<

class="hljs-name" style="box-sizing: border-box; outline: 0px;

color: rgb(224, 108, 117); word-break:

break-all;">h2>Index

class="hljs-name" style="box-sizing: border-box; outline: 0px;

color: rgb(224, 108, 117); word-break:

break-all;">h2>

@section scripts{

<

class="hljs-name" style="box-sizing: border-box; outline: 0px;

color: rgb(224, 108, 117); word-break: break-all;">script

type="text/javascript">

alert("你好");

class="hljs-name" style="box-sizing: border-box; outline: 0px;

color: rgb(224, 108, 117); word-break:

break-all;">script>

}

@section Mycss{

<

class="hljs-name" style="box-sizing: border-box; outline: 0px;

color: rgb(224, 108, 117); word-break: break-all;">style

type="text/css">

* {

color:red;

}

class="hljs-name" style="box-sizing: border-box; outline: 0px;

color: rgb(224, 108, 117); word-break:

break-all;">style>

}

HTML

<

class="hljs-name" style="box-sizing: border-box; outline: 0px;

color: rgb(224, 108, 117); word-break:

break-all;">html>

<

class="hljs-name" style="box-sizing: border-box; outline: 0px;

color: rgb(224, 108, 117); word-break:

break-all;">head>

<

class="hljs-name" style="box-sizing: border-box; outline: 0px;

color: rgb(224, 108, 117); word-break: break-all;">meta

charset="utf-8"

/>

<

class="hljs-name" style="box-sizing: border-box; outline: 0px;

color: rgb(224, 108, 117); word-break: break-all;">meta

name="viewport"

content="width=device-width"

/>

<

class="hljs-name" style="box-sizing: border-box; outline: 0px;

color: rgb(224, 108, 117); word-break:

break-all;">title>Index

class="hljs-name" style="box-sizing: border-box; outline: 0px;

color: rgb(224, 108, 117); word-break:

break-all;">title>

<

class="hljs-name" style="box-sizing: border-box; outline: 0px;

color: rgb(224, 108, 117); word-break: break-all;">link

href="/Content/site.css"

rel="stylesheet"/>

<

class="hljs-name" style="box-sizing: border-box; outline: 0px;

color: rgb(224, 108, 117); word-break: break-all;">script

src="/Scripts/jquery-1.8.2.js">

class="hljs-name" style="box-sizing: border-box; outline: 0px;

color: rgb(224, 108, 117); word-break:

break-all;">script>

<

class="hljs-name" style="box-sizing: border-box; outline: 0px;

color: rgb(224, 108, 117); word-break: break-all;">script

type="text/javascript">

alert("你好");

class="hljs-name" style="box-sizing: border-box; outline: 0px;

color: rgb(224, 108, 117); word-break:

break-all;">script>

<

class="hljs-name" style="box-sizing: border-box; outline: 0px;

color: rgb(224, 108, 117); word-break: break-all;">style

type="text/css">

* {

color:red;

}

class="hljs-name" style="box-sizing: border-box; outline: 0px;

color: rgb(224, 108, 117); word-break:

break-all;">style>

class="hljs-name" style="box-sizing: border-box; outline: 0px;

color: rgb(224, 108, 117); word-break:

break-all;">head>

<

class="hljs-name" style="box-sizing: border-box; outline: 0px;

color: rgb(224, 108, 117); word-break:

break-all;">body>

<

class="hljs-name" style="box-sizing: border-box; outline: 0px;

color: rgb(224, 108, 117); word-break: break-all;">div

style="width:800px;margin:0px

auto">

<

class="hljs-name" style="box-sizing: border-box; outline: 0px;

color: rgb(224, 108, 117); word-break: break-all;">div

style="border:1px

solid red; height:50px">顶部内容

class="hljs-name" style="box-sizing: border-box; outline: 0px;

color: rgb(224, 108, 117); word-break:

break-all;">div>

<

class="hljs-name" style="box-sizing: border-box; outline: 0px;

color: rgb(224, 108, 117); word-break:

break-all;">div>

<

class="hljs-name" style="box-sizing: border-box; outline: 0px;

color: rgb(224, 108, 117); word-break: break-all;">div

style="float:left;

width:150px; height:500px; border:1px solid blue" >

<

class="hljs-name" style="box-sizing: border-box; outline: 0px;

color: rgb(224, 108, 117); word-break:

break-all;">ul>

<

class="hljs-name" style="box-sizing: border-box; outline: 0px;

color: rgb(224, 108, 117); word-break:

break-all;">li>菜单1

class="hljs-name" style="box-sizing: border-box; outline: 0px;

color: rgb(224, 108, 117); word-break:

break-all;">li>

<

class="hljs-name" style="box-sizing: border-box; outline: 0px;

color: rgb(224, 108, 117); word-break:

break-all;">li>菜单2

class="hljs-name" style="box-sizing: border-box; outline: 0px;

color: rgb(224, 108, 117); word-break:

break-all;">li>

<

class="hljs-name" style="box-sizing: border-box; outline: 0px;

color: rgb(224, 108, 117); word-break:

break-all;">li>菜单3

class="hljs-name" style="box-sizing: border-box; outline: 0px;

color: rgb(224, 108, 117); word-break:

break-all;">li>

class="hljs-name" style="box-sizing: border-box; outline: 0px;

color: rgb(224, 108, 117); word-break:

break-all;">ul>

class="hljs-name" style="box-sizing: border-box; outline: 0px;

color: rgb(224, 108, 117); word-break:

break-all;">div>

<

class="hljs-name" style="box-sizing: border-box; outline: 0px;

color: rgb(224, 108, 117); word-break: break-all;">div

style="float:

right; width: 640px; height: 500px; border: 1px solid

blue">

<

class="hljs-name" style="box-sizing: border-box; outline: 0px;

color: rgb(224, 108, 117); word-break:

break-all;">h2>Index

class="hljs-name" style="box-sizing: border-box; outline: 0px;

color: rgb(224, 108, 117); word-break:

break-all;">h2>

class="hljs-name" style="box-sizing: border-box; outline: 0px;

color: rgb(224, 108, 117); word-break:

break-all;">div>

class="hljs-name" style="box-sizing: border-box; outline: 0px;

color: rgb(224, 108, 117); word-break:

break-all;">div>

class="hljs-name" style="box-sizing: border-box; outline: 0px;

color: rgb(224, 108, 117); word-break:

break-all;">div>

class="hljs-name" style="box-sizing: border-box; outline: 0px;

color: rgb(224, 108, 117); word-break:

break-all;">body>

class="hljs-name" style="box-sizing: border-box; outline: 0px;

color: rgb(224, 108, 117); word-break:

break-all;">html>