布局和不同的内容和样式，复杂的 MVC4 应用程序答案

【问题标题】：layouts and different content and styles, complex MVC4 application布局和不同的内容和样式，复杂的 MVC4 应用程序
【发布时间】：2016-07-13 12:07:18
【问题描述】：

我查看了很多教程，从 web-forms 和 .master 与 MVC 主布局转移。

我遇到的问题是关于嵌入式全局文件与各个页面自己的文件。

（文件 = 样式和脚本）

在我看来，我已经实现了一些命名约定/规则，以便 layouts-masters 有一个 LO 后缀，所以如果我的应用程序名为“SAdmin”，那么我的 layout(master)-chtml 将被命名为 :_SAdminLO.cshtml

在我的布局大师中我有：

（为简单起见）只是一个主栏 - 链接（以便所有页面都有“链接”顶栏）

这是主要布局

   [textlink1] | [textlink2] | [textlink3] | [textlink4] ....

然后我有索引页面（它的名字是cpanel）

在我的索引cpanel.chtml 中，除了主布局的文本栏之外，我还添加了图标...以以下形式复制顶部栏图标菜单

  [IMG]           [IMG]
  page_name     page_name

  [IMG]           [IMG]
  page_name     page_name

所以一起 Layout-master _SAdminLO.cshtml + cpanel.chtml - 来自我的应用程序的“主页”

现在我有单独的页面，它们的操作完全独立

但他们只需要顶部栏的 css + html，而不是 cpanel（索引）

所以我的情况是：在 rightclick-> view-source 中，我可以看到我所有的页面都有双 html 标签 -

<html> + <head> + <body> markup of `LO`

<html> + <head> + <body> markup of `individual.cshtml `

文件：

-主人-

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />

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

    <title>@ViewBag.Title</title>
    @Scripts.Render("~/js")// C# bundle 

    @RenderSection("head", false)
</head>
<body id="bodid">
<h2>Cpanel</h2>



     <div id="navbar">

        <ul id="nav">

            <div class="menu-main-container">
                <ul id="menu-main" class="menu">
                    <li id="menu-item-0" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-0 current_page_item menu-item-0">
                            @Html.ActionLink("Cpanel", "Cpanel", "ControlPanel")
                    </li>
                    <li id="menu-item-1" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-1 current_page_item menu-item-1">
                            @Html.ActionLink("Templates Generator", "TemplateGenerator", "ControlPanel")
                    </li>
                    <li id="menu-item-2" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-2 current_page_item menu-item-2">
                            @Html.ActionLink("Content Editor", "ContentEditor", "ControlPanel")
                    </li>
                     <li id="menu-item-3" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-3 current_page_item menu-item-2">
                            @Html.ActionLink("Files Uploader", "FilesUploader", "ControlPanel")
                    </li>
                    <li id="menu-item-4" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-4 current_page_item menu-item-2">
                            @Html.ActionLink("Code Dev", "CodeDev", "ControlPanel")
                    </li>

                </ul>
            </div>
       </ul>

   </div>
    @RenderBody()

</body>
</html>

someindividualpage.chtml

@{
    Layout = "~/Views/Shared/_EvProAdminLO.cshtml";
}
@model MvcE.Models.IndexModel.CreatedTemplateJPacket

<!DOCTYPE html>
    @{
        ViewBag.Title = "TemplateGenerator";
}
<html>
<head>
    <!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Template Generator</title>

    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />


    <script src="http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.0/jquery-ui.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

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


</head>
<body id="bodid">
    <div id="DivEditor">
         <h1 id="ContH"> ControlPanel -  TemplateGenerator</h1>
        <div class="container-fluid">



           <div>
                    <a class="btn btn-CtrlsTmplt" id="save" href="#">save</a>
                    <a class="btn btn-CtrlsTmplt" id="load" href="#">load</a>
                    <a class="btn btn-CtrlsTmplt" id="clear" href="#">clear</a>
                    <input type="text" id="scr1" class="input_Border_AndBGClear" />
           </div>



            <hr/>
     @*----------------------------------localData-------------------------------------*@
            <div id="localData">

                <input id="DataValue_FormFileds" type="hidden" />
            </div>
        </div>


    </div>


    <div id="SaveNewTmpltWwrap">

    </div>



        <script src='@Href("~/Js/jspart2.js")' type="text/javascript"></script>

</body>

【问题讨论】：

你有双重<html>，因为布局和主视图页面都有标签。将其从视图页面中删除，然后将变量头内容包含在自定义（非必需）部分@section myCustomSection { ... }
@Jasen 这个“individual.cshtml”视图需要它自己的 css + js 调用，individual2 也有......主布局 + index-partial 有它们自己的，如果你可以发布它真的很有帮助仅框架代码 Layoutfile + 它是 index 灵魂伴侣 partial view 和另一个 individualX.cshtml
您可以简单地从除布局之外的其他页面中删除head和body标签，并使用section来加载自己的css和js文件
检查这个以了解如何在 mvc stackoverflow.com/questions/12197323/… 中使用部分

标签： asp.net-mvc asp.net-mvc-4 master-pages partial-views

【解决方案1】：

也许我不太了解，但您似乎可以使用自定义部分。

_布局

<html>
    <head>
        <title>@ViewBag.Title</title>
        @* common script, css *@
        <script src="jquery.js"></script>

        @* variable script, css *@
        @RenderSection("customHead", required: false)
    </head>

    <body>
        <!-- nav bar here -->
        @RenderBody()

        @RenderSection("footer", required: false)
    </body>
</html>

SomePage.cshtml

@{
    Layout = "~/Views/Shared/_EvProAdminLO.cshtml";
    ViewBag.Title = "Some Page 1";
}

@section customHead {
    <script src="page1.js"></script>
}

@* no <html>,<head>,<body> *@

@* inserted into RenderBody() *@
<div id="page1content">
    ...
</div>

因为声明 required: false 的部分不会尝试渲染任何内容，除非视图包含该部分。

您可以更改每页的部分内容。

SomePage2.cshtml

@{
    Layout = "~/Views/Shared/_EvProAdminLO.cshtml";
    ViewBag.Title = "Some Page 2";
}

@section customHead {
    <script src="page2.js"></script>
}

@section footer {
    <div>footer</div>
}

<div id="page2content">
</div>

除了多个布局——您还可以使用部分视图和子操作来进行可变内容渲染。

SomePage3.cshtml

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
    ViewBag.Title = "Some Page 3";
}

@Html.Partial("widget")
@{Html.RenderAction("UserInfo");}

现在大部分布局内容都被删除了，它变成了内容包含，而不是用排除规则定义所有内容。

我发现布局页面更少，使用部分更易于维护，并且页面更容易通过查看视图页面来理解将呈现的内容。

【讨论】：

谢谢，现在我看到了全貌。 @section customHead 调用@RenderSection("customHead", required: false)
但是 w8 ..这非常适合 somepage otherPage 和它自己的头部 + 脚本
也许我需要这个链接中的类似内容......看起来有点过头了......或者简单地添加到你的链接中就可以了？嵌套的主布局链接 [mikesdotnetting.com/article/164/nested-layout-pages-with-razor]
相比嵌套布局，我更喜欢局部视图和子操作。我发现更难理解多个复杂的布局页面会呈现什么。部分视图和子操作让我可以使用单个页面并轻松查看它将输出的内容，而无需切换回各种布局。
非常感谢 Jasen ...编辑。现在是时候用您的方法进行一些重建/测试了，再次感谢。如果有任何问题，我会告诉你的。我可能会向您发送一个链接，指向我已经设法退出您的方法的结果