Sections
You can define named placeholders called sections in the markup of any view. Subsequently any view can also define a content for them.
This is particularly useful if partial view needs a particular css, font or javascript resource.
In this case, the partial view can define their needs, thus encapsulating the responsibilities, and the master page, or an encapsulating view can offer the right placement for these resources.
Section related attributes
On any htnl element you can define the following attribute to make them a section. It is advised to use div for this.
| Attribute | Description |
eve-section="scripts" |
Defines a named section for the page. |
eve-sectioncontentfor="scripts" |
Defines a content for a named section. |
eve-renderonlycontent
|
Defines that only the inner content of a given tag is considered as a content for a named section. |
Sections Tutorial
Please observe the source files for this tutorial to follow along.
All the view markups are under the EV5.Samples.ViewEngine/Assets/Sample/Sections folder.
Similarly the view classes are in the EV5.Samples.ViewEngine/Views/Sections folder.
The master page contains two sections, one for the scripts and another for the css classes.
<div eve-section="scripts" eve-renderinstead></div> <!-- Bootstrap core JS--> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script> <!-- Core theme JS--> <script src="/EV5.VE-Assets.Sample.SimpleHtml.js.scripts.js"></script> </body> </html>
<head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> <meta name="description" content="" /> <meta name="author" content="" /> <title>Creative - Start Bootstrap Theme</title> <!-- Favicon--> <link rel="icon" type="image/x-icon" href="assets/favicon.ico" /> <!-- Bootstrap Icons--> <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css" rel="stylesheet" /> <!-- Google fonts--> <link href="https://fonts.googleapis.com/css?family=Merriweather+Sans:400,700" rel="stylesheet" /> <link href="https://fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic" rel="stylesheet" type="text/css" /> <!-- Core theme CSS (includes Bootstrap)--> <link href="/EV5.VE-Assets.Sample.SimpleHtml.css.styles.css" rel="stylesheet" /> <div eve-section="class" eve-renderinstead></div> </head>
The portfolio section is part of the Content partial view that is using the lightbox.js, hence it defines the contents for these script and classes.
<div eve-sectioncontentfor="scripts" eve-renderonlycontent> <!-- SimpleLightbox plugin JS--> <script src="https://cdnjs.cloudflare.com/ajax/libs/SimpleLightbox/2.1.0/simpleLightbox.min.js"></script> </div> <div eve-sectioncontentfor="class" eve-renderonlycontent> <!-- SimpleLightbox plugin CSS--> <link href="https://cdnjs.cloudflare.com/ajax/libs/SimpleLightbox/2.1.0/simpleLightbox.min.css" rel="stylesheet" /> </div>
The contact partial view is using the SB Forms JS thus it defines additional content for this script reference.
<div eve-sectioncontentfor="scripts" eve-renderonlycontent> <!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *--> <!-- * * SB Forms JS * *--> <!-- * * Activate your form at https://startbootstrap.com/solution/contact-forms * *--> <!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *--> <script src="https://cdn.startbootstrap.com/sb-forms-latest.js"></script> </div>
Click here to see the view in action.