How to call a css style in content page using ASP.NET MVC?

Question

I have created a master page for my application and then the master application has been displayed in every page, but I have created a content page and I have created a separate CSS style design for this page and I have called to that particular page but the style for this page is not displayed.

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

Style Sheet Link

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

And also javascript file also not working

Answer 1

you can use section directive in layout.

In layout write in that place where you want insert section (head/fooret etc...)

@RenderSection("styles", false)

Then in view set the content to this section:

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

Name of this section may be any. But in view you can use each section only one time in any place.