Where put css if no head in cshtml

Question

I want to define a class to add an asterisk for required fields, but I know the project I inherited uses Razor mvc, and it doesn't have a head section to put this at the top of my cshtml file.

This is what the start of my _RegistrationStep1.cshtml form looks like:

    @{ 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>
...

I haven't found anything in my online search for cshtml files without head section, but CSS definition does say the head section is where to put it if I don't want to define it inline everywhere.

I did see info on how to make the asterisk for required fields dynamic, but I think it's fine for me to just define a second class to add the asterisk.

There's no head in ApplicantCapturedData.cs or Index.cshtml. I thought maybe it would be included somehow. A search of the project for head shows a tag in _Layout.cshtml which is in the application/views/shared folder, but when I added the required class info there, running the project did not show the asterisk on the required field. This is _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>

This is how I used the required class in _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>
...

There is a reference to _Layout.cshtml in _ViewStart.cshtml, which is in application/views folder:

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

Any help with determining why the required class does not show the asterisk would be appreciated. Thanks!

Llazar · Accepted Answer · 2019-02-28T17:17:39.853

1

I see you have a /Content/Site.css in your Layout. There you can write your css code and will be applied in all your .cshtml file with desired output. So add this code to the Site.css:

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

This a sample of the asterisk but there to many other samples online that can suit you better. For further info see Mdn website

edited Feb 28 '19 at 17:17

answered Feb 26 '19 at 17:25

Llazar

3,167
3
17
24

That was a good idea, but it's not showing on the form. I tried .required:before. .required:after, .required label:after, .required label:beforeand also tried changing the font in it to font:12px and also color:#e32; – Michele Feb 26 '19 at 19:06
It needed to be like this in site.css:/* #asterisk for required form fields */ label.required:after{ content: " *"; font-weight: bold; color:#e32; display:inline; font:12px; } – Michele Feb 26 '19 at 20:40
Maybe you have a problem with uploading the css file in browser. Check your path of the file see with inspect element if you have any error. Insert this code inline css just to see the style applied. – Llazar Feb 27 '19 at 07:20
I'm accepting this answer because it pointed me to the site.css, which I hadn't seen. – Michele Feb 27 '19 at 12:54
1

Since it's used in the label tag, the class needed to be defined as label.required:after{...} – Michele Feb 27 '19 at 13:24
1

Yeah you're right it's a lapsus, I'll update my answer. – Llazar Feb 27 '19 at 15:10
Thank you for your help! – Michele Feb 28 '19 at 13:37
There can't be a space after label, btw – Michele Feb 28 '19 at 13:45

Where put css if no head in cshtml

1 Answers1