如果 cshtml 中没有头部，则将 css 放在哪里答案

【问题标题】：Where put css if no head in cshtml如果 cshtml 中没有头部，则将 css 放在哪里
【发布时间】：2025-12-16 12:20:03
【问题描述】：

我想定义一个类来为必填字段添加星号，但我知道我继承的项目使用 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>
...

我在网上搜索没有 head 部分的 cshtml 文件时没有找到任何东西，但CSS definition 确实说如果我不想在任何地方内联定义它，head 部分就是放置它的地方。

我确实看到了有关如何使必填字段的星号动态化的信息，但我认为只需定义一个 second class 来添加 asterisk 就可以了。

ApplicantCapturedData.cs 或 Index.cshtml 中没有头部。我想也许它会以某种方式被包括在内。在项目中搜索 head 会在 application/views/shared 文件夹中的 _Layout.cshtml 中显示一个标签，但是当我在那里添加所需的类信息时，运行项目并没有在所需字段上显示星号。这是_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>
...

在 application/views 文件夹下的 _ViewStart.cshtml 中有对 _Layout.cshtml 的引用：

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

任何有关确定所需类为什么不显示星号的帮助将不胜感激。谢谢！

【问题讨论】：

标签： css asp.net razor model-view-controller kendo-asp.net-mvc

【解决方案1】：

我看到你的布局中有一个/Content/Site.css。在那里您可以编写您的 css 代码，并将应用到您的所有 .cshtml 文件中并提供所需的输出。所以将此代码添加到 Site.css：

label .required:after {
color: #e32;
content: ' *';
display:inline;
}

这是一个星号示例，但还有许多其他在线示例更适合您。欲了解更多信息，请参阅Mdn website

【讨论】：

这是个好主意，但它没有显示在表单上。我试过.required：之前。 .required:after, .required label:after, .required label:beforeand 还尝试将其中的字体更改为 font:12px 和 color:#e32;
site.css:/* #asterisk for required form fields */ label.required:after{ content: " *";字体粗细：粗体；颜色：#e32;显示：内联；字体：12px； }
可能你在浏览器中上传css文件有问题。如果您有任何错误，请检查您的文件路径并使用检查元素查看。插入这段代码 inline css 只是为了查看应用的样式。
由于在label标签中使用，需要将class定义为label.required:after{...}
是的，你是对的，这是一个失误，我会更新我的答案。