个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-28 08:12:58 35 4
gpt4 key购买 nike

我有一些 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>&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 中改变宽度或填充和其他属性一样工作它确实影响页面的样式，但是当它在 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/

35 4 0
文章推荐： javascript - 如何在 Chrome 扩展程序中静音外部网页
文章推荐： c++ - 通过套接字发送 boost 序列化时应用程序崩溃
文章推荐： ios - 设置 UITableViewCell 的焦点颜色
文章推荐： javascript - AngularJS: "isolate scope"还是 "isolated scope"？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com