我想定义一个类为必填字段添加星号,但我知道我继承的项目使用Razor mvc,并且它没有头部分将它放在我的cshtml文件的顶部。
这是我的_RegistrationStep1.cshtml表单的开头看起来像:
@{ Layout = null;}
@model MApplicationData.Models.ApplicantCapturedData
<div class="form-horizontal">
<hr />
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
<div class="site-section">
<h4 class="site-header"><b>Department Contact Info:</b> (REQUIRED in case we have questions about this new applicant)</h4>
<hr />
@Html.HiddenFor(model => model.ID)
</div>
<div class="row">
<div class="col-xs-5">
<label class="control-label col-md-6" for="DeptContactName">Department Contact Name</label>
<div class="col-md-4">
@Html.EditorFor(model => model.DeptContactName, new { htmlAttributes = new { @class = "form-control", @required = "required" } })
@Html.ValidationMessageFor(model => model.DeptContactName, "", new { @class = "text-danger" })
</div>
</div>
...
我没有在我的网上搜索没有头部的cshtml文件中找到任何东西,但CSS definition确实说如果我不想在任何地方内联定义它的头部分。
我确实看到有关如何使所需字段的星号动态的信息,但我认为只需定义一个second class来添加asterisk就可以了。
ApplicantCapturedData.cs或Index.cshtml中没有头。我想也许它会以某种方式包括在内。搜索head的项目会在_Layout.cshtml中显示一个标签,该标签位于application / views / shared文件夹中,但是当我在那里添加所需的类信息时,运行该项目并未在必填字段上显示星号。这是_Layout.cshtml:
<!DOCTYPE html>
<html>
<head>
<title>@ViewBag.Title - Provider Form</title>
<link href="@Url.Content("~/Content/bootstrap.css")" rel="stylesheet" type="text/css" />
@* Content-box fixes as per http://docs.telerik.com/kendo-ui/third-party/using-kendo-with-twitter-bootstrap article *@
<link href="@Url.Content("~/Content/box-sizing-fixes.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
@Scripts.Render("~/bundles/modernizr")
@Scripts.Render("~/bundles/jquery")
@*<link href="https://kendo.cdn.telerik.com/2017.3.1018/styles/kendo.common-bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="https://kendo.cdn.telerik.com/2017.3.1018/styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
<link href="https://kendo.cdn.telerik.com/2017.3.1018/styles/kendo.bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://kendo.cdn.telerik.com/2017.3.1018/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.3.1018/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.3.1018/js/kendo.all.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.3.1018/js/kendo.aspnetmvc.min.js"></script>*@
<link href="http://kendo.cdn.telerik.com/2017.3.1018/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="http://kendo.cdn.telerik.com/2017.3.1018/styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
<link href="http://kendo.cdn.telerik.com/2017.3.1018/styles/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />
<link href="http://kendo.cdn.telerik.com/2017.3.1018/styles/kendo.bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="http://kendo.cdn.telerik.com/2017.3.1018/styles/kendo.dataviz.bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="http://kendo.cdn.telerik.com/2017.3.1018/js/jquery.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2017.3.1018/js/kendo.all.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2017.3.1018/js/kendo.aspnetmvc.min.js"></script>
<script src="@Url.Content("~/Scripts/kendo.modernizr.custom.js")"></script>
<!--I added this class-->
.required:after
{
content: "*";
font-weight: bold;
color:red;
}
</head>
这就是我在_RegistrationStep1.cshtml中使用所需类的方法:
<div class="row">
<div class="col-xs-5">
<label class="control-label col-md-6 required" for="DeptContactName">Department Contact Name</label><!--that is required class used-->
<div class="col-md-4">
@Html.EditorFor(model => model.DeptContactName, new { htmlAttributes = new { @class = "form-control", @required = "required" } })
@Html.ValidationMessageFor(model => model.DeptContactName, "", new { @class = "text-danger" })
</div>
</div>
...
_ViewStart.cshtml中有_Layout.cshtml的引用,它位于application / views文件夹中:
@{
Layout = "~/Views/Shared/_Layout.cshtml";
}
任何帮助确定所需的类不显示星号的原因将不胜感激。谢谢!
我看到你的布局中有一个/Content/Site.css
。在那里,您可以编写您的css代码,并将应用于所有.cshtml文件中,并具有所需的输出。所以将此代码添加到Site.css:
label .required:after {
color: #e32;
content: ' *';
display:inline;
}
这是一个星号的样本,但是还有许多其他在线样本可以更好地适合你。有关详细信息,请参阅Mdn website