什么是@section脚本及其用途

Question

我从Microsoft网站下载了一个聊天示例.我一直在学习几个教程,但是在没有这个c#代码块(@section script {})的脚本之前我从未见过@section脚本{}并且它似乎工作正常但在这个聊天应用程序的实例中使用当我把块外的脚本带到它不起作用时发出信号.

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

Answer 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)

Answer 2

当您定义某个@section地方时,假设该_Layout.cshmtl文件,它允许您的所有视图动态插入脚本文件或CSS文件或者在定义页面中的位置.

例如,当您仅在站点中的几个视图上使用jQuery UI Datepicker控件时,这非常好.因此,您可能不希望全局包含jQuery UI Datepicker脚本文件,_Layout.cshtml因为您只需要在2或3页上使用它.

@section允许您仅为某些视图包含这些文件.因此,需要一个视图不能轻易改变其他内容_Layout.cshtml.

您还可以@section将布局的底部,例如JavaScript文件或布局顶部的CSS文件放置在底部.您还可以使用它来包含仅在某些视图中使用HTML制作的侧边栏.

请注意,@section默认情况下,部分视图无法使用该元素.

Answer 3

在上面的答案中还应该添加一件事，这使得在大多数情况下使用“ 脚本 ”部分至关重要，这也是我使用此部分的唯一原因。

也就是说，它保证脚本将在所有页面内容之后加载，这是必不可少的。通过这样做，您实际上可以确保JavaScript代码的必要元素已经加载，并且这与性能有关。

为了详细说明其工作原理，我应该提到：

1. 这是将常用脚本放入“ _Layout ”页面内的通用做法，以使它们在所有页面之间均可访问，并防止其重复。
2. 子视图的所有内容都加载到_Layout视图中，在该视图中@RenderBody（）方法被调用。每个视图的@sections内的内容除外。

当我们定义“ 脚本的布局，共同脚本的页脚中”部分，然后添加“里面我们的子视图脚本脚本每个子视图”一节中，我们确保这些脚本将布局的脚本之后加载，使得_Layout中的功能可用于子视图的脚本。

否则，子视图的脚本将在_Layout页面的通用脚本之前在调用RenderBody（）方法的位置加载。

例如：

内_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>
}