Qu'est-ce que @RenderSection dans asp.net MVC

170

Quel est le but de @RenderSection et comment fonctionne-t-il? Je comprends ce que font les bundles, mais je n'ai pas encore compris ce que cela fait et c'est probablement important.

@RenderSection("scripts", required: false)

Peut-être un petit exemple sur la façon de l'utiliser?

asp.net-mvc Aflred
la source

Réponses:

287

Si vous avez une vue _Layout.cshtml comme celle-ci

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

alors vous pouvez avoir une vue de contenu index.cshtml comme celle-ci

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

le obligatoire indique si la vue utilisant la page de mise en page doit avoir une section de scripts

cgijbels
la source
20

Si

(1) vous avez une vue _Layout.cshtml comme celle-ci

<html>
    <body>
        @RenderBody()

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

(2) vous avez 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) vous avez About.cshtml 

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

Sur votre page de mise en page, si requis est défini sur false "@RenderSection (" scripts ", required: false)", Lorsque la page est rendue et que l'utilisateur est sur la page à propos, le fichier contacts.js ne s'affiche pas.

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

si requis est défini sur true "@RenderSection (" scripts ", required: true)", Lorsque la page est rendue et que l'utilisateur est sur la page À PROPOS, les contacts.js sont TOUJOURS rendus.

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

EN BREF, lorsqu'il est défini sur true , que vous en ayez besoin ou non sur d'autres pages, il sera rendu de toute façon. S'il est défini sur false , il sera rendu uniquement lorsque la page enfant est rendue.

Maria Jesusa Galapon
la source
16
ce n'est pas correct. Vous devriez essayer votre réponse vous-même et vous remarquerez que vous obtiendrez un Section not defined: "scripts".lors du rendu de votre page À propos lors de la définition de l'indicateur requis true.
cgijbels
Juste une clarification. Ne devrait-il pas s'agir de "scripts" au lieu de "scripts"?
SRIDHARAN
2

Voici la définition de Rendersection à partir de MSDN

Dans les pages de mise en page, rend le contenu d'une section nommée. MSDN

Dans la page _layout.cs, mettez

@RenderSection("Bottom",false)

Ici, rend le contenu de la section bootom et spécifie la falsepropriété booléenne pour spécifier si la section est requise ou non.

@section Bottom{
       This message form bottom.
}

Cela signifie que si vous souhaitez afficher la section inférieure de toutes les pages, vous devez utiliser false comme deuxième paramètre de la méthode Rendersection.

Brijesh Mavani
la source
2

Supposons que j'ai 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>
    }

Et une autre vue "GetEmployeeDetails.cshtml" sans 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>

Et ma page de mise en page "_layout.cshtml"

@RenderSection("Scripts", required: true)

Ainsi, lorsque je navigue vers GetEmployeeDetails.cshtml. J'obtiens l'erreur qu'il n'y a aucun script de section à rendre dans GetEmployeeDetails.cshtml. Si je change le drapeau @RenderSection()de required : trueà `` obligatoire: faux ''. Cela signifie rendre les scripts définis dans les scripts @section des vues si présentes. Sinon, ne rien faire. Et l'approche raffinée serait dans _layout.cshtml

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