Question

我已从Microsoft网站下载了一个聊天示例。我一直在学习几个教程，但是在没有这个c＃代码块（@section script {}）的脚本之前我从未见过@section脚本{}并且它似乎工作正常但在这个聊天应用程序的实例中使用信号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>
}

Answer 1

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控件时，这非常好。因此，您可能不希望在_Layout.cshtml中全局包含jQuery UI Datepicker脚本文件，因为您只需要在2或3页上使用它。

@section允许您仅为某些视图包含这些文件。这是必要的，因为视图不能轻易地改变_Layout.cshtml的内容。

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

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

Answer 3

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

我应该提到：

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

当我们在布局的页脚内为常见脚本定义“ 脚本”部分，然后在每个孩子的“ 脚本”部分中添加我们的子视图脚本视图我们确保这些脚本将在布局脚本之后加载，从而使_Layout中的功能可用于子视图的脚本。

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

例如：

_布局内部：

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

Answer 4

我想在这里添加另一种形式的答案，因为在理解之前，我花了很长时间阅读所有三个答案，并做了一些实验。

我复制了@section scripts { }中包含的模式弹出窗口的一些ajax代码，并将其放在视图中。它工作正常，但我删除了section位，因为它封装在<script> html中-通常很好；

我之前的观点：

@Section scripts {
    <script> ... my function ... </script>
}
<h1>The rest of the page</h1>

我通常如何在视图中包含一次性脚本：

<script> ... my function ... </script>
<h1>The rest of the page</h1>

这样做，脚本将呈现在视图本身的html中，并且弹出窗口停止工作。这是因为脚本访问该视图之外的元素-需要站点范围的访问权限，以便能够停止使用@section scripts，我必须将其放置在布局文件中。

但是我只真正希望在使用此视图时呈现此脚本。我不想将其放在_layout文件中，并使其加载到每个页面上。

幸运的我！在默认_layout文件的底部，有一行（老实说，我通常会删除）：

@RenderSection("scripts", required: false)

因此，通过在任何视图上将我的<script>括在@section scripts { }中，它将成为_layout的一部分，并在所有其他内容之后加载（它位于布局的底部）页），但仅当使用该特定视图时。

它基本上允许一个非常聪明的动态布局页面，我想知道是否也可以使用样式表。

什么是@section脚本及其用途

4 个答案: