ASP. NET Core MVC / RAZOR - Стили, эквивалентные сценариям @Section - PullRequest
Новая
       12

ASP. NET Core MVC / RAZOR - Стили, эквивалентные сценариям @Section

0 голосов
/ 31 марта 2020

MVC & Razor позволяет составлять сценарии в заданном c представлении. При использовании _Layout программист запускает этот раздел для рендеринга из файла _Layout.cshtml, вставляя @RenderSection («Scripts», обязательно: false)

Пример

Index.cs html (просмотр) 

...

@section Scripts{ 
    <script>
        var input = document.getElementById("search-bar");

        input.addEventListener("keyup", function(event) {
            if (event.keyCode === 13) {
                event.preventDefault();
                document.getElementById("search-btn").click();
            }
        });

        var searchBtn = document.getElementById("search-btn");
        searchBtn.addEventListener("click", function(event) {
            alert("click");

        });

    </script>
}

_Layout.cs html

...

<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
@RenderSection("Scripts", required: false)

Мне любопытно, возможно ли сделать такой же рабочий процесс для таблиц стилей. Это позволило бы объединить стили в соответствующий вид, сделав вид автономным скриптом. Это также не позволит программисту запихивать каждый возможный файл css в макет и, таким образом, загружать все с каждым маршрутом, независимо от того, используется он или нет. Если это возможно, мне неясно.

Предлагаемый пример

Index.cs html

<div>...</div>
@section Scripts {
    <script>
        ...
    </script>

} 

@section Styles {
    <style>
        ...
    </style>

}

_Layout.cs html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - SCP_Client</title>
    <link rel="stylesheet" href="~/css/Solar/bootstrap.min.css" />
    <link rel="stylesheet" href="~/css/app.css" />

    **@RenderSection("Styles", Required: false )**

</head>
<body>
    <div class="container" id="header-container">
        <div class="row">
            ... 
        </div>
    </div>
    <div class="container" id="body-container">
        @RenderBody()

    </div>
    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>

    **@RenderSection("Scripts", required: false)**

</body>
</html>
...