我有一些 Jquery 代码，用于扩展树形菜单和 MVC 5 应用程序，当我在 View 中对样式进行硬编码时，它可以正常工作。但是，我想将代码放在我有其他代码的 CSS 文件中，但是当我将它移到那里时，它似乎只能部分工作。
查看 Controller 正在调用的文件:
@model List<OrwellFrontEnd.Models.SiteMenu>
@{
ViewBag.Title = "Simple";
}
@section AddCustomStylesToHead{
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
}
@section Treeview
{
<section class="Treeview">
<div class="container body-content">
<h2>Simple Treeview from Database Data</h2>
<div style="border:solid 1px black; padding:10px; background-color:#FAFAFA">
<div class="treeview">
@if (Model != null && Model.Count() > 0)
{
<ul>
@TreeviewHelper.GetTreeView(Model, Model.FirstOrDefault().ParentMenuID)
</ul>
}
</div>
</div>
</div>
</section>
}
@* Here We need some Jquery code for make this treeview collapsible *@
@section Scripts{
<script>
$(document).ready(function () {
$(".treeview li>ul").css('display', 'none'); // Hide all 2-level ul
$(".collapsible").click(function (e) {
e.preventDefault();
$(this).toggleClass("collapse expand");
$(this).closest('li').children('ul').slideToggle();
});
});
</script>
}
<p> It is body of Index view that renders in BodyRender.</p>
现在在 ~/Content/Site.css 中的样式代码
/*Here We will add some css for style our treeview*/
.collapse {
width: 15px;
background-image: url('../Contetn/Images/ui-icons_454545_256x240.png');
background-repeat: no-repeat;
background-position: -36px -17px;
display: inline-block;
cursor: pointer;
}
.expand {
width: 15px;
background-image: url('../Content/Images/ui-icons_454545_256x240.png');
background-repeat: no-repeat;
background-position: -50px -17px;
display: inline-block;
cursor: pointer;
}
.treeview ul {
font: 14px Arial, Sans-Serif;
margin: 0px;
padding-left: 20px;
list-style: none;
}
.treeview > li > a {
font-weight: bold;
}
.treeview li {
}
.treeview li a {
padding: 4px;
font-size: 12px;
display: inline-block;
text-decoration: none;
width: auto;
}
下面是布局页面。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - My ASP.NET Application</title>
<link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
@if (IsSectionDefined("AddCustomStylesToHead"))
{
@RenderSection("AddCustomStylesToHead", required: false)
}
<link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="~/Scripts/modernizr-2.6.2.js"></script>
</head>
<body>
@RenderSection("Treeview", required: false)
<div class="container body-content">
@RenderBody()
<hr />
<footer>
<p>© @DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</div>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
@RenderSection("scripts", required: false)
</body>
</html>
由于一直在尝试修补，现在可能一团糟。它似乎有点像我在 Treeview li/ui 中改变宽度或填充和其他属性一样工作它确实影响页面的样式，但是当它在 css 文件中时图像不显示但是当它工作正常时我直接在 View 中拥有它。
谢谢，
罗布
最佳答案
我怀疑您是否可以在那个 View 中使用“head”——您已经在 body 内部进行编辑了。
除非您使用局部 View ，否则您可以使用以下解决方案。
在布局页面中，添加一个新部分:
<html>
<head>
<title>@ViewBag.Title</title>
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
@if (IsSectionDefined("AddCustomStylesToHead"))
{
@RenderSection("AddCustomStylesToHead", required: false)
}
</head>
...
然后在您的 View 中，您可以使用以下内容添加额外的 css:
@section AddCustomStylesToHead{
<link href="@Url.Content("~/Content/MyPage.css")" rel="stylesheet" type="text/css" />
}
更新
从评论和您更新的问题来看，这显然是相对路径和/或 css 的问题。
所以，一些修复:
在您的 _Layout 中只保留指向“Site.css”的链接之一。我会保留带有@Url.Content 的那个。您也可以删除我建议您添加的代码，因为那根本不是您的问题(从 _Layout 和 View 中删除)。
可能是错误的相对路径:
background-image: url('../Content/Images/ui-icons_454545_256x240.png');
可能应该是(如果你在它自己的文件夹中有“图像”，直接在元素根目录下):
background-image: url('../Images/ui-icons_454545_256x240.png');
不过，如果您将图像文件夹作为“内容”的子文件夹，这将起作用:
background-image: url('Images/ui-icons_454545_256x240.png');
拼写错误:
url('../Contetn/Images/ui-icons_454545_256x240.png');
但如果您“更正”路径，问题会自行解决。
删除空样式:
.treeview li {}
只是不需要。
最后一件事，因为我注意到您使用 Bootstrap。如果您的 css 和 bootstraps 之间存在样式冲突，则 bootstrap 样式将获胜。例如，我怀疑“.collapse”是一种 Bootstrap 样式，因此您的样式将被覆盖。
要更改此设置，您可以在 Bootstraps 之后(在 head _Layout 中)放置指向“Site.css”的链接。 Bootstrap 可能仍会覆盖某些内容，但至少您有更大的“获胜”机会。
关于c# - 在 C# MVC 的 Jquery 中使用 CSS 文件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29151079/