O que é @RenderSection no asp.net MVC

170

Qual é o objetivo do @RenderSection e como ele funciona? Entendo o que os pacotes fazem, mas ainda tenho que descobrir o que isso faz e provavelmente é importante.

@RenderSection("scripts", required: false)

Talvez um pequeno exemplo de como usá-lo?

asp.net-mvc Aflred
fonte

Respostas:

287

Se você tiver uma visualização _Layout.cshtml como esta

<html>
    <body>
        @RenderBody()
        @RenderSection("scripts", required: false)
    </body>
</html>

você pode ter uma exibição de conteúdo index.cshtml como esta

@section scripts {
     <script type="text/javascript">alert('hello');</script>
}

o obrigatório indica se a visualização que usa a página de layout deve ou não ter uma seção de scripts

cgijbels
fonte
20

E se

(1) você tem uma visualização _Layout.cshtml como esta

<html>
    <body>
        @RenderBody()

    </body>
    <script type="text/javascript" src="~/lib/layout.js"></script>
    @RenderSection("scripts", required: false)
</html>

(2) você tem Contacts.cshtml 

@section Scripts{
    <script type="text/javascript" src="~/lib/contacts.js"></script>

}
<div class="row">
    <div class="col-md-6 col-md-offset-3">
        <h2>    Contacts</h2>
    </div>
</div>

(3) você tem About.cshtml 

<div class="row">
    <div class="col-md-6 col-md-offset-3">
        <h2>    Contacts</h2>
    </div>
</div>

Na página de layout, se necessário, estiver definido como false "@RenderSection (" scripts ", necessário: false)", quando a página é renderizada e o usuário está sobre a página, o Contacts.js não é processado.

    <html>
        <body><div>About<div>             
        </body>
        <script type="text/javascript" src="~/lib/layout.js"></script>
    </html>

se necessário estiver definido como true "@RenderSection (" scripts ", necessário: true)", quando a página for renderizada e o usuário estiver na página SOBRE, a página Contacts.js AINDA será renderizada.

<html>
    <body><div>About<div>             
    </body>
    <script type="text/javascript" src="~/lib/layout.js"></script>
    <script type="text/javascript" src="~/lib/contacts.js"></script>
</html>

EM BREVE, quando definido como true , independentemente de você precisar ou não em outras páginas, ele será renderizado de qualquer maneira. Se definido como false , ele será renderizado apenas quando a página filha for renderizada.

Maria Jesusa Galapon
fonte
16
Isso não está correto. Você deve tentar sua resposta e perceberá que receberá uma Section not defined: "scripts".quando renderizar sua página Sobre ao definir o sinalizador necessário true.
cgijbels
Apenas um esclarecimento. Não deveria ser "scripts" em vez de "Scripts"?
Sridharan
2

Aqui a definição de Rendersection de MSDN

Nas páginas de layout, renderiza o conteúdo de uma seção nomeada. MSDN

Na página _layout.cs, coloque

@RenderSection("Bottom",false)

Aqui, renderize o conteúdo da seção bootom e especifique a falsepropriedade booleana para especificar se a seção é necessária ou não.

@section Bottom{
       This message form bottom.
}

Esse significado, se você deseja a seção inferior em todas as páginas, deve usar false como o segundo parâmetro no método Rendersection.

Brijesh Mavani
fonte
2

Suponha que eu tenha GetAllEmployees.cshtml

<h2>GetAllEmployees</h2>

<p>
    <a asp-action="Create">Create New</a>
</p>
<table class="table">
    <thead>
         // do something ...
    </thead>
    <tbody>
       // do something ...
    </tbody>
</table>

   //Added my custom scripts in the scripts sections

@section Scripts
    {
    <script src="~/js/customScripts.js"></script>
    }

E outra visualização "GetEmployeeDetails.cshtml" sem scripts

<h2>GetEmployeeByDetails</h2>

@Model.PageTitle
<p>
    <a asp-action="Create">Create New</a>
</p>
<table class="table">
    <thead>
       // do something ... 
    </thead>
    <tbody>
       // do something ...
    </tbody>
</table>

E minha página de layout "_layout.cshtml"

@RenderSection("Scripts", required: true)

Então, quando eu navego para GetEmployeeDetails.cshtml. Recebo o erro de que não há scripts de seção a serem renderizados no GetEmployeeDetails.cshtml. Se eu mudar a flag @RenderSection()de required : truepara `` required: false`. Significa renderizar os scripts definidos nos scripts da seção @ das visualizações, se presentes. Caso contrário, não faça nada. E a abordagem refinada estaria em _layout.cshtml

@if (IsSectionDefined("Scripts"))
    {
        @RenderSection("Scripts", required: true)
    }
Vijay
fonte