Asp.net mvc 如何使用ASP.NET MVC在内容页中调用css样式？

我已经为我的应用程序创建了一个母版页，然后母版应用程序已经显示在每个页面中，但是我已经创建了一个内容页面，我已经为这个页面创建了一个单独的CSS样式设计，我已经调用了那个特定的页面，但是这个页面的样式没有显示

@model MedeilMVC_CLOUD.Models.Company

@{
    ViewBag.Title = "Add Company";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<link href="~/css/separate/vendor/jquery-steps.min.css" rel="stylesheet" />

<div class="page-content">
    <div class="container-fluid">


        <section class="box-typical box-panel mb-4">
            <header class="box-typical-header">
                <div class="tbl-row">
                    <div class="tbl-cell tbl-cell-title">
                        <h3>Form steps example</h3>
                    </div>
                </div>
            </header>
            <div class="box-typical-body">
                <form id="example-form" action="#" class="form-wizard">
                    <div>
                        <h3>Account</h3>
                        <section>
                            <div class="form-group">
                                <label for="exampleInputEmail1">Email address</label>
                                <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email" required>
                                <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
                            </div>
                            <div class="form-group">
                                <label for="exampleInputPassword1">Password</label>
                                <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
                            </div>
                            <div class="form-group">
                                <label for="exampleInputPassword1">Confirm Password</label>
                                <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
                            </div>
                        </section>
                        <h3>Profile</h3>
                        <section>
                            <div class="form-group">
                                <label for="exampleInputEmail1">Address</label>
                                <input type="text" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter text" required>
                                <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
                            </div>
                        </section>
                        <h3>Hints</h3>
                        <section>
                            <ul>
                                <li>Foo</li>
                                <li>Bar</li>
                                <li>Foobar</li>
                            </ul>
                        </section>
                        <h3>Finish</h3>
                        <section>
                            <div class="form-group">
                                <div class="checkbox">
                                    <input type="checkbox" id="agree" class="required" required>
                                    <label for="agree">Terms and Conditions</label>
                                </div>
                            </div>
                        </section>
                    </div>
                </form>
            </div><!--.box-typical-body-->
        </section>

    </div>
</div>

<script src="~/js/lib/jquery-validation/jquery.validate.min.js"></script>
<script src="~/js/lib/jquery-steps/jquery.steps.min.js"></script>
<script>
    $(function () {
        $("#example-basic ").steps({
            headerTag: "h3",
            bodyTag: "section",
            transitionEffect: "slideLeft",
            autoFocus: true
        });

        var form = $("#example-form");
        form.validate({
            rules: {
                agree: {
                    required: true
                }
            },
            errorPlacement: function errorPlacement(error, element) { element.closest('.form-group').find('.form-control').after(error); },
            highlight: function (element) {
                $(element).closest('.form-group').addClass('has-error');
            },
            unhighlight: function (element) {
                $(element).closest('.form-group').removeClass('has-error');
            }
        });

        form.children("div").steps({
            headerTag: "h3",
            bodyTag: "section",
            transitionEffect: "slideLeft",
            onStepChanging: function (event, currentIndex, newIndex) {
                form.validate().settings.ignore = ":disabled,:hidden";
                return form.valid();
            },
            onFinishing: function (event, currentIndex) {
                form.validate().settings.ignore = ":disabled";
                return form.valid();
            },
            onFinished: function (event, currentIndex) {
                alert("Submitted!");
            }
        });

        $("#example-tabs").steps({
            headerTag: "h3",
            bodyTag: "section",
            transitionEffect: "slideLeft",
            enableFinishButton: false,
            enablePagination: false,
            enableAllSteps: true,
            titleTemplate: "#title#",
            cssClass: "tabcontrol"
        });

        $("#example-vertical").steps({
            headerTag: "h3",
            bodyTag: "section",
            transitionEffect: "slideLeft",
            stepsOrientation: "vertical"
        });
    });
</script>

@model MedeilMVC\u CLOUD.Models.Company
@{
ViewBag.Title=“添加公司”；
Layout=“~/Views/Shared/_Layout.cshtml”；
}
表单步骤示例
账户
电子邮件地址
我们永远不会与其他人共享您的电子邮件。
密码
确认密码
轮廓
地址
我们永远不会与其他人共享您的电子邮件。
提示

福
酒吧
福巴

完成
条款和条件
$（函数（）{
$（“#示例基本”）。步骤({
头像：“h3”，
bodyTag:“节”，
过渡效果：“slideLeft”，
自动对焦：正确
});
变量形式=$（“#示例形式”）；
form.validate({
规则：{
同意：{
必填项：true
}
},
errorPlacement:函数errorPlacement（error，element）{element.closest（'.form group'）。find（'.form control'）。after（error）；}，
亮点：功能（元素）{
$（元素）。最近（'.form group'）。addClass（'has-error'）；
},
取消高亮显示：功能（元素）{
$（元素）。最近（'.form group'）。removeClass（'has-error'）；
}
});
表.儿童（“div”）.步骤({
头像：“h3”，
bodyTag:“节”，
过渡效果：“slideLeft”，
onStepChanging:函数（事件、currentIndex、newIndex）{
form.validate（）.settings.ignore=“：disabled，：hidden”；
返回表单.valid（）；
},
onFinishing：函数（事件、当前索引）{
form.validate（）.settings.ignore=“：disabled”；
返回表单.valid（）；
},
onFinished：函数（事件、当前索引）{
警报（“已提交！”）；
}
});
$（“#示例选项卡”）。步骤({
头像：“h3”，
bodyTag:“节”，
过渡效果：“slideLeft”，
enableFinishButton:false，
启用分页：false，
enableAllSteps：正确，
标题模板：“#标题#”，
cssClass:“选项卡控制”
});
$（“#示例垂直”）。步骤({
头像：“h3”，
bodyTag:“节”，
过渡效果：“slideLeft”，
阶梯定向：“垂直”
});
});

样式表链接

<link href="~/css/separate/vendor/jquery-steps.min.css" rel="stylesheet" />

---

而且javascript文件也不工作

您可以在布局中使用section指令

在布局中，在需要插入部分的位置写入（头部/底部等）

然后在视图中将内容设置为此部分：

@section styles{
  <link href="~/css/separate/vendor/jquery-steps.min.css" rel="stylesheet" />
}

@节样式{
}

---

本节的名称可以是任意名称。但在视图中，您在任何地方只能使用每个部分一次。

样式不起作用？或者它不包含在html页面中。您是否在浏览器中检查了此页面？你看到这个链接了吗？In View（）必须工作。可能是您设置了css样式文件的错误路径。

@section styles{
  <link href="~/css/separate/vendor/jquery-steps.min.css" rel="stylesheet" />
}