如何使用ASP.NET MVC在内容页面调用CSS样式?
问题描述:
我为我的应用程序创建了一个母版页,然后每个页面都显示了主应用程序,但是我创建了一个内容页面,并且为这个页面创建了一个单独的CSS样式设计,并且我调用了该特定页面但不显示此页面的样式。如何使用ASP.NET MVC在内容页面调用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文件,也没有工作
答
您可以在布局中使用部分指令。
在您要插入节场所布局写入(头/ fooret等)
@RenderSection("styles", false)
然后在视图中设置的内容到本节:
的@section styles{
<link href="~/css/separate/vendor/jquery-steps.min.css" rel="stylesheet" />
}
名称这部分可能是任何。但是鉴于您可以在任何地方只使用一段时间。
我已经使用过这种方式,但它不起作用 –
风格不起作用?或者它不包含在html页面中。你在浏览器中检查了这个页面吗?你看到这个链接?在View()中必须工作。可能是你设置了一个错误的CSS样式文件路径。 – Manfice
谢谢你的工作很好@Manfice –