What is @section scripts and what it is used for

I have downloaded a chat example from the Microsoft website. I have been following several tutorials but I have never seen the @section script{} before I have done scripts without this block of c# code (@section script{}) and it seem to work fine but in this instance of the chat application using signal R when I do take the scripts outside the block it does not work.

@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>
}

Solution 1:

A section allows you to add something in a view which will be added in the layout. ie:-

view

@section scripts {

    <script>

      alert('foo');

    </script>

}

layout

@RenderSection("scripts", false)

now this named section scripts will be rendered where you have specified in the layout.

@RenderSection also has 2 signatures:-

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

Solution 2:

When you define an @section somewhere, lets say the _Layout.cshmtl file, it allows all of your Views to dynamically insert script files or CSS files or what ever into places in the defining page.

This is very nice when, for example, you are using the jQuery UI Datepicker control only on a couple views in your site. So you may not want to globally include the jQuery UI Datepicker script file in your _Layout.cshtml since you are only going to need it on 2 or 3 pages.

@section allows you to include those files only for certain views. It is needed since, a view cannot easily change the contents of the _Layout.cshtml otherwise.

You can also position the @section at the bottom of the layout, for JavaScript files for example, or at the top of the layout, for CSS files. You could also use it to include a sidebar, made in HTML, only in certain views.

Just be aware that Partial Views are not able to use the @section element by default.