Что такое скрипты @section и что они используются для

Я скачал пример чата с веб-сайта Microsoft. Я следовал нескольким учебникам, но никогда не видел сценарий @section {}, прежде чем создавал сценарии без этого блока кода С# (@section script {}), и, похоже, он работает нормально, но в этом случае приложение чата использует сигнал R, когда я беру сценарии за пределы блока, он не работает.

@section scripts {
<!--Script references. -->
<!--The jQuery library is required and is referenced by default in _Layout.cshtml. -->
<!--Reference the SignalR library. -->
<script src="~/Scripts/jquery.signalR-2.2.0.min.js"></script>
<!--Reference the autogenerated SignalR hub script. -->
<script src="~/signalr/hubs"></script>
<!--SignalR script to update the chat page and send messages.-->
<script>
    $(function () {
        // Reference the auto-generated proxy for the hub.
        var chat = $.connection.chatHub;
        // Create a function that the hub can call back to display messages.
        chat.client.addNewMessageToPage = function (name, message) {
            // Add the message to the page.
            $('#discussion').append('<li><strong>' + htmlEncode(name)
                + '</strong>: ' + htmlEncode(message) + '</li>');
        };
        // Get the user name and store it to prepend to messages.
        $('#displayname').val(prompt('Enter your name:', ''));
        // Set initial focus to message input box.
        $('#message').focus();
        // Start the connection.
        $.connection.hub.start().done(function () {
            $('#sendmessage').click(function () {
                // Call the Send method on the hub.
                chat.server.send($('#displayname').val(), $('#message').val());
                // Clear text box and reset focus for next comment.
                $('#message').val('').focus();
            });
        });
    });
    // This optional function html-encodes messages for display in the page.
    function htmlEncode(value) {
        var encodedValue = $('<div />').text(value).html();
        return encodedValue;
    }
</script>
}

Ответ 1

A section позволяет вам добавить что-то в представление, которое будет добавлено в макет. а именно: -

вид

@section scripts {

    <script>

      alert('foo');

    </script>

}

макет

@RenderSection("scripts", false)

теперь этот сценарий с именем section будет отображаться там, где вы указали в макете.

@RenderSection также имеет 2 подписи: -

public HelperResult RenderSection(string name) // section required in the view
public HelperResult RenderSection(string name, bool required)

Ответ 2

Когда вы определяете @section где-то, скажем, файл _Layout.cshmtl, он позволяет всем вашим представлениям динамически вставлять файлы script или файлы CSS или что-либо в места на определяющей странице.

Это очень приятно, когда, например, вы используете элемент управления jQuery UI Datepicker только на пару просмотров на своем сайте. Таким образом, вы можете не захотеть глобально включить файл jQuery UI Datepicker script в ваш _Layout.cshtml, так как вам понадобится только его на 2-3 страницах.

@section позволяет включать эти файлы только для определенных видов. Это необходимо, так как в противном случае представление не может легко изменить содержимое _Layout.cshtml.

Вы также можете поместить @section в нижней части макета, например, для файлов JavaScript или в верхней части макета для файлов CSS. Вы также можете использовать его для включения боковой панели, сделанной в HTML, только в определенных представлениях.

Просто помните, что Partial Views не могут использовать элемент @section по умолчанию.

Ответ 3

Есть также одна вещь, которая должна быть добавлена к ответам выше, что делает использование раздела " скрипты " решающим в большинстве случаев, что также является единственной причиной для меня, чтобы использовать этот раздел.

Я должен упомянуть, что:

Это обычная практика - помещать часто используемые скрипты внутри страницы " _Layout ", чтобы сделать их доступными для всех страниц, а также предотвратить их повторение.
Все содержимое дочерних представлений загружается в представление _Layout, где вызывается метод @RenderBody(). За исключением содержимого внутри @sections каждого представления.

Когда мы определяем раздел " скрипты " внутри нижнего колонтитула макета для общих сценариев, а затем добавляем наши скрипты дочерних представлений в раздел " скрипты " каждого дочернего представления, мы проверяем, что эти скрипты будут загружаться после скрипта макета, который делает функции в _Layout доступны для сценариев дочерних представлений.

В противном случае сценарии дочерних представлений будут загружены там, где вызывается метод RenderBody(), перед общими сценариями страницы _Layout.

Например:

Внутри _Layout:

@RenderBody()
<footer>
    <script>
        $(function CommonlyUsedFunction() {
            console.log("text");
        });
    </script>
    @RenderSection("Scripts", required: false)
</footer>

Внутри MyView:

<script>
    CommonlyUsedFunction(); //Function is not Accessible Here 
    //It will not be accessible because RenderBody() will load the function before its declaration.
</script>
@section Scripts
{
    <script>
        CommonlyUsedFunction(); //Function is Accessible Here
    </script>
}