ASP.NET MVC布局页面内容未在剃刀视图中显示

时间:2015-01-26 10:11:19

标签: asp.net-mvc razor layout

我正在尝试在普通剃刀视图中显示布局页面内容,但它无法正常工作。在简单的HTML页面,它工作正常。 enter image description here

但是如果我想在asp.net mvc中实现它,那么布局页面内容就不会显示了 enter image description here

我不知道我哪里出错了。

这是我的简单html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Focus / Seçkin Bütün</title>


    <link href="Asset/Style/Bootstrap.css"               rel="stylesheet" />
    <link href="Asset/Style/Bootstrap-Theme.css"         rel="stylesheet" />
        <link href="Asset/Font/FontAwesome.css"              rel="stylesheet" />
    <link href="Asset/Style/Style.css"                   rel="stylesheet" />
    <link href="Asset/Style/Style-Responsive.css"        rel="stylesheet" />
    <link href="Asset/Style/Print.css"                   rel="stylesheet" media="print" />
    <link href="Favicon.ico"                             rel="shortcut icon" />
    <script src="Asset/Script/jQuery.js"                type="text/javascript"></script>
    <script src="Asset/Script/Angular.js"               type="text/javascript"></script>
    <script src="Asset/Script/Bootstrap.js"             type="text/javascript"></script>
      <script src="Asset/Script/Spin.js"                  type="text/javascript"></script>
    <script src="Asset/Script/Design.js"                type="text/javascript"></script>
    <script src="Asset/Script/Script.js"                type="text/javascript"></script>

</head>
<body>
    <span id="ToastBox"></span>
    <section id="container">
        <header class="navbar navbar-default navbar-static-top clearfix Header" id="Header" role="navigation">
            <div class="container-fluid">
                <div class="navbar-header">
                    <a class="navbar-brand" href="#"><img src="Asset/Image/Logo_Focus.png" alt=""></a>
                </div>
                <div class="navbar-collapse collapse">

                    <ul class="nav navbar-nav NavMenuSide">
                        <li><a class="fa fa-bars ButtonCircle" id="btnSideMenu" href="javascript:;"></a></li>
                    </ul>

                    <ul class="nav navbar-nav navbar-right NavMenuRest">
                        <li class="dropdown NavSubMenuUser">
                            <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown"><span class="caret"></span> Seçkin Bütün</a>
                            <ul class="dropdown-menu" role="menu">
                                <li><a href="#"><i class="fa fa-bell-o"></i> Notifications</a></li>
                                <li><a href="#"><i class="fa fa-cog"></i> Profile</a></li>
                                <li><a href="#"><i class="fa fa-key"></i> Logout</a></li>
                            </ul>
                        </li>
                        <li class="dropdown NavSubMenuNotification">
                            <a href="javascript:;" class="dropdown-toggle fa fa-bell-o ButtonCircle NavSubMenuNotification" data-toggle="dropdown" id="btnNotification"></a>
                            <ul class="dropdown-menu" role="menu">
                                <li><a href="#">• Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et lorem lectus. Vestibulum vel felis enim. Nullam egestas justo at nunc semper</a></li>
                                                         </ul>
                        </li>
                        <li class="NavSubMenuLock"><a class="fa fa-lock ButtonCircle" id="btnLock" href="#"></a></li>
                    </ul>
                </div>
            </div>
        </header>

        <aside id="SideMenu" class="SideMenu">

                <div class="SideNavigation">
                    <ul class="Side-Accordion" id="Side-Accordion">

                        <li><a href="#"><i class="fa fa-dashboard"></i><span>Dashboard</span></a></li>
                        <li class="Sub-Accordion">
                            <a href="javascript:;"><i class="fa fa-tasks"></i><span>Operation</span></a>
                            <ul class="Sub-AccordionList Active">
                                <li><a href="#">Cost</a></li>
                                <li><a href="#">Customer</a></li>
                                                          </ul>
                        </li>
                        <li class="Sub-Accordion">
                            <a href="javascript:;"><i class="fa fa-building-o"></i><span>Definition</span></a>
                            <ul class="Sub-AccordionList">
                                <li><a href="#">Brand</a></li>

                            </ul>
                        </li>
                        <li class="Sub-Accordion">
                            <a href="javascript:;"><i class="fa fa-bar-chart-o"></i><span>Report</span></a>
                            <ul class="Sub-AccordionList">
                                <li><a href="#">Factory</a></li>
                                                            </ul>
                        </li>
                        <li class="Sub-Accordion">
                            <a href="javascript:;"><i class="fa fa-gears"></i><span>Administration</span></a>
                            <ul class="Sub-AccordionList">
                                <li><a href="#">Configuration</a></li>
                                                           </ul>
                        </li>

                    </ul>
                </div>
        </aside>
        <section class="container-fluid MainContent">

            <div class="row">
                <div class="col-sm-12">

                    <div class="page-header FocusHeader">
                        <h1>Profile</h1>
                    </div>
                </div>
            </div>
        </section>
    </section>
    <script src="Asset/Script/Complete.js" type="text/javascript"></script>
</body>
</html>

这是我的布局页面

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Focus / Seçkin Bütün</title>
    <meta name="author" content="Magnifo / http://www.magnifo.com" />

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

    <link rel="stylesheet" type="text/css" href="@Url.Content("~/Asset/Style/Bootstrap-Theme.css")" />
    <link rel="stylesheet" type="text/css" href="@Url.Content("~/Asset/Style/Bootstrap.css")" />
         <link rel="stylesheet" type="text/css" href="@Url.Content("~/Asset/Style/Markup.css")" />
    <link rel="stylesheet" type="text/css" href="@Url.Content("~/Asset/Style/Print.css")" />
    <link rel="stylesheet" type="text/css" href="@Url.Content("~/Asset/Style/Style-Responsive.css")" />
    <link rel="stylesheet" type="text/css" href="@Url.Content("~/Asset/Style/Style.css")" />
</head>
<body>
    <div>
        <span id="ToastBox"></span>
        <section id="container">
            <header class="navbar navbar-default navbar-static-top clearfix Header" id="Header" role="navigation">
                <div class="container-fluid">
                    <div class="navbar-header">
                        <a class="navbar-brand" href="#"><img src="Asset/Image/Logo_Focus.png" alt=""></a>
                    </div>
                    <div class="navbar-collapse collapse">

                        <ul class="nav navbar-nav NavMenuSide">
                            <li><a class="fa fa-bars ButtonCircle" id="btnSideMenu" href="javascript:;"></a></li>
                        </ul>
                        <ul class="nav navbar-nav navbar-right NavMenuRest">
                            <li class="dropdown NavSubMenuUser">
                                <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown"><span class="caret"></span> Seçkin Bütün</a>
                                <ul class="dropdown-menu" role="menu">
                                    <li><a href="#"><i class="fa fa-bell-o"></i> Notifications</a></li>
                                                                   </ul>
                            </li>
                            <li class="dropdown NavSubMenuNotification">
                                <a href="javascript:;" class="dropdown-toggle fa fa-bell-o ButtonCircle NavSubMenuNotification" data-toggle="dropdown" id="btnNotification"></a>
                                <ul class="dropdown-menu" role="menu">
                                    <li><a href="#">• Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et lorem lectus. Vestibulum vel felis enim. Nullam egestas justo at nunc semper</a></li>
                                                                 </ul>
                            </li>
                            <li class="NavSubMenuLock"><a class="fa fa-lock ButtonCircle" id="btnLock" href="#"></a></li>
                        </ul>
                    </div>
                </div>
            </header>
            <aside id="SideMenu" class="SideMenu">
                <div class="SideNavigation">
                    <ul class="Side-Accordion" id="Side-Accordion">

                        <li><a href="#"><i class="fa fa-dashboard"></i><span>Dashboard</span></a></li>
                        <li class="Sub-Accordion">
                            <a href="javascript:;"><i class="fa fa-tasks"></i><span>Operation</span></a>
                            <ul class="Sub-AccordionList Active">
                                <li><a href="#">Cost</a></li>
                                                         </ul>
                        </li>
                        <li class="Sub-Accordion">
                            <a href="javascript:;"><i class="fa fa-building-o"></i><span>Definition</span></a>
                            <ul class="Sub-AccordionList">
                                <li><a href="#">Brand</a></li>

                            </ul>
                        </li>
                        <li class="Sub-Accordion">
                            <a href="javascript:;"><i class="fa fa-bar-chart-o"></i><span>Report</span></a>
                            <ul class="Sub-AccordionList">
                                <li><a href="#">Factory</a></li>

                            </ul>
                        </li>
                        <li class="Sub-Accordion">
                            <a href="javascript:;"><i class="fa fa-gears"></i><span>Administration</span></a>
                            <ul class="Sub-AccordionList">
                                <li><a href="#">Configuration</a></li>
                                                           </ul>
                        </li>

                    </ul>
                </div>
            </aside>
            <section class="container-fluid MainContent">

                <div class="row">
                    <div class="col-sm-12">

                        @RenderSection("featured", required: false)
                        @RenderBody()
                    </div>
                </div>
            </section>


        </section>
    </div>
</body>
</html>

剃刀查看页面

@{

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

<h2>Test</h2>

2 个答案:

答案 0 :(得分:1)

我解决了这个问题。这是印刷品的CSS。

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

它将是

<link href="@Url.Content("~/Asset/Style/Print.css")" rel="stylesheet" media="print" />

答案 1 :(得分:0)

如果您在_ViewStart.cshtml文件中设置了此路径,则无需在Test视图中提及布局文件路径。请验证,此路径是否存在于_Viewstart.cshtml文件中。