我正在尝试创建一个侧边栏,但它没有出现在它应该出现的位置。相反,它显示在底部,单行显示我的内容。这是代码。我_LayoutWithSidebar
在使用默认布局的共享文件夹中创建了视图_Layout.cshtml
。
@{
ViewBag.Title = "_LayoutWithSidebar";
Layout = "~/Views/Shared/_Layout.cshtml";
}
@section Featured{
@RenderSection("Featured", required: false)
}
@section Scripts{
@RenderSection("Scripts", required:false)
}
<div class="sidebar">
@RenderSection("sidebar")
</div>
<div class="content">
@RenderBody()
</div>
在 site.css 我添加了以下代码
.sidebar{
width: 15em;
margin: 1em;
padding: 1em;
min-height: 30em;
float: left;
background: #ccc;
border: 1px inset #666;
}
并且在 _Layout.cshtml 我已经渲染了该部分@RenderSection("sidebar", required:false)
Index.cshtml
看起来像这样
@model IEnumerable<Auction.Models.Auction>
@{
Layout = "~/Views/Shared/_Layout.cshtml";
ViewBag.Title = "Index";
}
@section sidebar{
This is a sidebar
}
@section Featured{
<section class ="featured">
<div class ="content-wrapper">
This is some featured content
</div>
</section>
}
@section scripts
{
<!--This content will be rendered in the Script section -->
}
<p>
@Html.ActionLink("Create New", "Create")
</p>
@foreach (var item in Model)
{
@Html.Partial("_AuctionTile", item)
}
知道为什么它不工作???在查看源代码时显示以下代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Index - My ASP.NET MVC Application</title>
<link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
<link href="/Content/site.css" rel="stylesheet"/>
<script src="/Scripts/modernizr-2.6.2.js"></script>
</head>
<body>
<header>
<div class="content-wrapper">
<div class="float-left">
<p class="site-title"><a href="/">your logo here</a></p>
</div>
<div class="float-right">
<section id="login">
<ul>
<li><a href="/Account/Register" id="registerLink">Register</a></li>
<li><a href="/Account/Login" id="loginLink">Log in</a></li>
</ul>
</section>
<nav>
<ul id="menu">
<li><a href="/">Home</a></li>
<li><a href="/Home/About">About</a></li>
<li><a href="/Home/Contact">Contact</a></li>
</ul>
</nav>
</div>
</div>
</header>
<div id="body">
<section class ="featured">
<div class ="content-wrapper">
This is some featured content
</div>
</section>
<section class="content-wrapper main-content clear-fix">
<p>
<a href="/auctions/Create">Create New</a>
</p>
<div class="auction-tile">
<h4 class="title">Example auction #1</h4>
<p class="end-date">Ends at 5/20/2013 2:01 PM</p>
<p class="price">Price: $10.00</p>
</div> <div class="auction-tile">
<h4 class="title">Example auction #2</h4>
<p class="end-date">Ends at 5/20/2013 2:01 PM</p>
<p class="price">Price: $8.00</p>
</div> <div class="auction-tile">
<h4 class="title">Example auction #3</h4>
<p class="end-date">Ends at 5/20/2013 2:01 PM</p>
<p class="price">Price: $40.00</p>
</div>
</section>
</div>
<footer>
<div class="content-wrapper">
<div class="float-left">
<p>© 2013 - My ASP.NET MVC Application</p>
</div>
</div>
</footer>
<script src="/Scripts/jquery-1.8.2.js"></script>
<!--This content will be rendered in the Script section -->
This is a sidebar
</body>
</html>