MVC视图布局页常用代码

时间：2023-03-09 23:50:54
MVC视图布局页常用代码

1.在视图 Views 中新建文件夹  Shared

2.在 Shared 中新建布局页-母版页   _Layout.cshtml

@{

    Layout = null;

}

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <meta name="renderer" content="webkit">

    <meta charset="UTF-8"> <!--编码方式采用UTF-8-->

    <meta name="renderer" content="webkit"> <!--默认使用极速内核-->

    <meta name="description" content="飞车,换装,跑马,斗地主,冒险岛">  <!--网站关键词-->

    <meta name="description" content="这是一个游戏网站"> <!--网站描述-->

    <title>@ViewBag.Title</title> <!--页面标题将在此处插入-->

    <link href="@Url.Content("~/Content/css.css")" rel="stylesheet" type="text/css" />

    @RenderSection("Css", false) <!--子页面需要的css将在此插入-->

    <script src="@Url.Content("~/Scripts/jquery.min.js")"></script>

    @RenderSection("Js", false) <!--子页面需要的js将在此插入-->

</head>

<body>

    <header>

        <div>LOGO</div>

        <!--导航菜单-->

        <ul id="menu">

            <li>@Html.ActionLink("Home", "Index", "Home")</li>

            <li>@Html.ActionLink("Movies", "Index", "Movies")</li>

            <li>@Html.ActionLink("About", "About", "Home")</li>

        </ul>

    </header>

    <section id="main">

        <!-- 页面内容将在此处呈现-->

        @RenderBody()

    </section>

    <footer>

        <p>Copyright RUNOOB 2012. All Rights Reserved.</p>

    </footer>

</body>

</html>

3.在视图 Views 中新建视图  _ViewStart.cshtml

@{Layout = "~/Views/Shared/_Layout.cshtml";}

这段代码被自动添加到由应用程序显示的所有视图。

如果您删除了这个文件，则必须向所有视图中添加这行代码。

4.在 Shared 中新建布局页-分部视图  _Page.cshtml

调用代码：@Html.Partial("_PageName")

<div id="page">

    @Html.Partial("_Page")

</div>

5.在子页面调用方式：

@section Css{

    <link href="~/Content/home.css" rel="stylesheet" type="text/css" />

}

@section Js{

    <script src="~/Scripts/home.min.js"></script>

}

@{

    ViewBag.Title = "首页";

}

<div>首页HTML内容</div>

代码说明

1.RenderSection(string name, bool required = true)

　　说明：required默认为true表示引用这个布局页的所有View必须含有该Section，设为false则为可以有，也可以没有

2.Html.ActionLink("LinkText","ActionName","ControllerName","RoutValues","HtmlAttributes")

　　Html.ActionLink(string linkText, string actionName, string controllerName, object routeValues, object htmlAttributes);

属性 描述
linkText string，必须的，URL 文本（标签），定位点元素的内部文本。
actionName string，必须的，操作（action）的名称。
ControllerName string，可选，控制器的名称。
routeValues object ，routeValues和HtmlAttributes必须同时存在，传递给操作（action)的值，是一个包含路由参数的对象。
HtmlAttributes object ，routeValues和HtmlAttributes必须同时存在，URL 的属性设置，是一个包含要为该元素设置的 HTML 特性的对象。

举例说明：

代码 输出
@Html.ActionLink("超链接文本","Index") <a href="/">超链接文本</a>   生成当前控制器下action名字为index 的超链接，如当前控制器不是默认首页，是About则会生成 <a href="/About">超链接文本</a> 
@Html.ActionLink("超链接文本","Index"，"Home") <a href="/Home">超链接文本</a>
@Html.ActionLink("超链接文本", "About", "Home") <a href="/Home/About">超链接文本</a>
@Html.ActionLink("超链接文本", "Index", "Home", new { id = "11" },null) <a href="/Home/Index/11">超链接文本</a>
@Html.ActionLink("超链接文本", "Index", "Home", new { id = "11" }, new { @class = "aLink", data_val = "shouye", id = "shouye" }) <a class="aLink" data-val="shouye" href="/Home/Index/11" id="shouye">超链接文本</a>

注释：这里只介绍了其中的几种常用的调用方式，具体F12去了解吧！

3.ViewBag 是用于向页面传参的，可用于子页面向母版页传参，就例如前面的ViewBag.Title。也可用于控制器向页面插入值，例如如下：

控制器代码：

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

namespace GamePortal.Web.Controllers

{

    public class HomeController : Controller

    {

        // GET: Home

        public ActionResult Index()

        {

            ViewBag.UserName = "测试用户";

            ViewBag.UserAccount = "";

            ViewBag.UserIntegral = "";

            ViewBag.LastLogonTime = "2018-10-08 17:54:00";

            return View();

        }

    }

}

HTML代码：

<div>

    <ul>

        <li>用户姓名: @ViewBag.UserName</li>

        <li>用户账号: @ViewBag.UserAccount</li>

        <li>用户积分: @ViewBag.UserIntegral</li>

        <li>最后一次登录时间: @ViewBag.LastLogonTime</li>

    </ul>

</div>

相关文章