在 C# MVC 中使用 Jquery 中的 CSS 文件

Question

我有一些 Jquery 代码，用于扩展树形菜单和 MVC 5 应用程序，当我在视图中对样式进行硬编码时，它可以正常工作。但是，我想将代码放在 CSS 文件中，我还有其他代码，但是当我将它移到那里时，它似乎只能部分工作。

查看控制器正在调用的文件：

@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>&copy; @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 中改变宽度或填充和其他属性一样工作它确实影响页面的样式，但是图像在 [=32= 中时不显示] 文件，但当我直接在视图中使用它时工作正常。

谢谢，

罗布

Answer 1

我怀疑您能否在该视图中使用 "head" - 您已经在正文内部进行编辑了。

除非您使用局部视图，否则您可以使用以下解决方案。

在布局页面中，添加一个新部分：

<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>
...

那么在你的观点中，你可以使用下面的方式添加额外的css:

@section AddCustomStylesToHead{
    <link href="@Url.Content("~/Content/MyPage.css")" rel="stylesheet" type="text/css" />
}

更新

从评论和您更新的问题来看，这显然是相对路径的问题 and/or css。

所以，一些修复：

在您的 _Layout 中只保留 link 到 "Site.css" 之一。我会保留带有@Url.Content 的那个。您也可以删除我建议您添加的代码，因为那根本不是您的问题（从 _Layout 和视图中删除）。

可能相对路径错误：

background-image: url('../Content/Images/ui-icons_454545_256x240.png');

可能应该是（如果你有 "Images" 在它自己的文件夹中，直接在项目根目录下）：

background-image: url('../Images/ui-icons_454545_256x240.png');

不过，如果您将图像文件夹作为 "Content" 的子文件夹，这将有效：

background-image: url('Images/ui-icons_454545_256x240.png');

拼写错误：

url('../Contetn/Images/ui-icons_454545_256x240.png');

但是，如果您 "correct" 路径，这将自行解决。

删除空样式：

.treeview li {}

只是不需要。

最后一件事，因为我注意到你使用 Bootstrap。如果 css 和 bootstrap 之间的样式存在冲突，bootstrap 样式将获胜。例如，我怀疑“.collapse”是一种 bootstrap 风格，所以你的会被覆盖。

要更改此设置，您可以在 Bootstrap 秒后（在 head _Layout 中）将 link 更改为 "Site.css"。 Bootstrap 可能仍会覆盖某些内容，但至少你有更大的机会 "winning"。

在 C# MVC 中使用 Jquery 中的 CSS 文件

using CSS file in Jquery in C# MVC

css

c#

model-view-controller

asp.net-mvc

jquery