首先我创建了名为" showCatButton.cshtml"的部分视图。并与CategoryList2.css样式表相关联。
body {
}
#mainMenu{
left:0px;
position:fixed;
top:50%;
transform: translateY(-50%);
list-style-type:none;
}
.subMenu {
list-style-type:none;
}
li
{
width:300px;
height:50px;
border-radius:5px;
background:linear-gradient(to bottom, #45484d 0%,#000000 100%);
color:white;
border:1px solid black;
text-align:center;
}
li:hover
{
color:black;
background:linear-gradient(to bottom, #e6e6e6 30%,#e6e6e6 40%,#e6e6e6 50%
, #f2f2f2 60%, #f2f2f2 70%, #f2f2f2 80%, #f2f2f2 90%, #f2f2f2 100%);
}
#mainMenu li ul {
display:none;
}
#mainMenu li:hover ul {
display:block;
position:absolute;
top:0px;
left:300px;
}

<html>
<head>
<meta name="viewport" content="width=device-width" />
<link type="text/css" rel="stylesheet" href="~/Content/CategoryList2.css"/>
</head>
<body>
<ul id="mainMenu">
some-unimportant code.
</ul>
</body>
</html>
&#13;
接下来,我创建了Header局部视图。使用以下代码。
<html>
<head>
<meta name="viewport" content="width=device-width" />
</head>
<body>
<script src='@Url.Content("~/Scripts/jquery-3.1.0.min.js")' type="text/javascript"></script>
<script src='@Url.Content("~/Scripts/jquery-ui-1.11.4.min.js")' type="text/javascript"></script>
<div id="Header">
<ul>
<li>
Main
</li>
<li>
Delivery methods
</li>
<li>
About shop
</li>
<li>
Contacts
</li>
</ul>
</div>
</body>
</html>
&#13;
@using OnlineShop.Models;
@using System.Data.Entity;
@{
Layout = null;
}
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Main page</title>
<link type="text/css" rel="stylesheet" href="~/Content/MainPage.css" />
</head>
<body>
<div>
@Html.Partial("~/Views/PartialViews/Header.cshtml")
</div>
<div id="CategoryList">
@Html.Partial("~/Views/PartialViews/showCatButton.cshtml")
</div><br/>
</body>
</html>
&#13;
答案 0 :(得分:0)
这些不是局部视图,它们是完整的html页面。将局部视图看作是一个包含在其父视图中的html。没有任何HTML身体或头部标签。你已经从父母那里继承了那些。
我会将样式和脚本保存在一个位置,即父页面。假设您在部分视图中拥有所有可用内容。