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

Manfice · Accepted Answer · 2017-09-14 11:40:54Z

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.

answered Sep 14, 2017 at 11:40

Manfice

1991 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Manfice Over a year ago

Style not working? Or it does not include in html page. Did you inspect this page in browser? You see this link? In View() must work. May be you set a wrong path to css style file.

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related