Куда положить css, если нет головы в cshtml - PullRequest
Новая
       12

Куда положить css, если нет головы в cshtml

0 голосов
/ 26 февраля 2019

Я хочу определить класс для добавления звездочки для обязательных полей, но я знаю, что проект, который я унаследовал, использует 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 без раздела head, но Определение CSS говорит, что в разделе заголовка есть место, где его можно разместить, если я не хочу определять его встроенным везде.

Я видел информацию о том, как сделать звездочку для обязательных полей динамической, но яЯ думаю, что для меня нормально просто определить второй класс , чтобы добавить звездочку .

В 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";
}

Любая помощь в определении, почему требуемый класс не показывает звездочку, будет оценена.Спасибо!

1 Ответ

0 голосов
/ 26 февраля 2019

Я вижу, у вас есть /Content/Site.css в вашем макете.Там вы можете написать свой код CSS и будет применен ко всем вашим .cshtml файлам с желаемым выводом.Так что добавьте этот код в Site.css: 

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

Это образец звездочки, но есть много других онлайн-примеров, которые могут вам подойти лучше.Для получения дополнительной информации см Mdn сайт

...