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

Question

我为我的应用程序创建了一个母版页，然后该主应用程序已显示在每个页面中，但我创建了一个内容页面并为此页面创建了单独的 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>

样式表链接

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

而且 javascript 文件也无法正常工作

Answer 1

你可以在布局中使用section指令。

在布局中写在你想要插入部分的地方（头/脚等...）

@RenderSection("styles", false)

然后在视图中设置该部分的内容：

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

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