Home How to call a css style in content page using ASP.NET MVC?
Reply: 1

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

Vanuston Intelligence
1#
Vanuston Intelligence Published in 2017-09-14 11:25:51Z

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
2#
Manfice Reply to 2017-09-14 11:40:54Z

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.

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.415675 second(s) , Gzip On .

© 2016 Powered by cudou.com design MATCHINFO