ASP.NET MVC 之View相关

VS2015 新建一个MVC工程，验证改成No Authentication 界面大致如下

ASP.NET MVC 之View相关

得到一个解决方案如下

ASP.NET MVC 之View相关

下面分析一下View:

@{

 ViewBag.Title = "ViewPageOne";

 Layout = "~/Views/Shared/_Layout.cshtml";

}

使用模板页的页面，会自动在页面中生成代码。来指定模板页，使用Layout来指定具体的模板页。如果内容页中没有Layout属性，则使用的是默认的模板页。如果Layout指定为null,则表示不使用模板页。

可以在Shared文件夹右键创建分部视图作为模板，视图页将Layout = "~/Views/Shared/_Layout.cshtml"修改为自己定义的视图即可Layout = "~/Views/Shared/_XXX.cshtml";

介绍一下视图中使用

ASP.NET MVC 之View相关

在视图文件中使用Scripts.Render()输出脚本包，Styles.Render()输出样式包，使用前需要在配置BundleConfig.cs文件，这里都是系统默认的，这么写的好处和作用先不阐述了，同<script>方法一样，可以写在<Head>和<Body>里。

html文件是自上而下的执行方式，但引入的css和javascript的顺序有所不同，css引入执行加载时，程序仍然往下执行，而执行到<script>脚本是则中断线程，待该script脚本执行结束之后程序才继续往下执行。所以，一般将script放在body之后是因为避免长时间执行script脚本而延迟阻塞。而有一些页面的效果的实现，是需要预先动态的加载一些js脚本，所以这些脚本应该放在<body>之前。其次，不能将需要访问dom元素的js放在body之前，因为此时还没有开始生成dom，所以在body之前的访问dom元素的js会出错，或者无效。

@RenderBody()
@RenderBody()在模板页中使用表示内容页在模板中的位置。当创建具有模板页的内容页的时候，内容页就呈现在模板页中@RenderBody()所在的位置，一个模板页中只能有一个@RenderBody()。

@RenderSection
@RenderSection用于在模板布局中定义一个区域，在内容页可以定义一些内容来填充这个区域，例如内容页中引用的JS文件，可以填充到模板页的section位置。每个内容页的单独一些信息，可以在模板页中这个区域显示。
@RenderSection有两个参数，第一个参数用于定义section的名称，第2个参数是布尔类型，如果为TRUE，表示内容页必须定义这个section,如果为false，则表示内容页可定义section，也可以不定义。

按照上面模板页的写法，内容页加上

@section scripts
{
    我是主页
}

就可以了。

@RenderPage
@RenderPage用于表示在一个页面中呈现另一个页面的内容.参数指定要呈现的网页的位置。
我们在Shared文件夹下面新建一个View.cshtml文件，然后里面写上版权信息，然后在模板页中开辟一块位置用来呈现footer页面。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - 我的 ASP.NET 应用程序</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @Html.ActionLink("应用程序名称", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>@Html.ActionLink("主页", "Index", "Home")</li>
                    <li>@Html.ActionLink("关于", "About", "Home")</li>
                    <li>@Html.ActionLink("联系方式", "Contact", "Home")</li>
                </ul>
            </div>
        </div>
    </div>
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - 我的 ASP.NET 应用程序</p>
        </footer>
    </div>
    <footer>
        @RenderPage("~/Views/Shared/View.cshtml")
    </footer>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>

运行如下：

ASP.NET MVC 之View相关

ASP.NET MVC 之View相关

相关推荐