Sekcje, Sections w ASP.NET MVC

Sekcje - opcjonalne części strony

Sekcje to części kodu, które mogą zostać umieszczone na stronie, lecz nie muszą. W głównym pliku z szablonem strony a więc _Layout.cshtml znajduje się kilka sekcji.

Kod pliku _Layout.cshtml

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>@ViewBag.Title - My ASP.NET MVC Application</title>
        <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
        <meta name="viewport" content="width=device-width" />
        <script src="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js" type="text/javascript" ></script>
 
        @Styles.Render("~/Content/css")
        @Scripts.Render("~/bundles/modernizr")
    </head>
    <body onload='prettyPrint()'>
        <header>
            <div class="content-wrapper">
                <div id="head">
                    <div class="float-right">
                        <section id="login">
                            @Html.Partial("_LoginPartial")
                        </section>
                    </div>
                </div>
                 <div id="menu_top">
                     <nav>
                            <ul id="menu">
                                <li>@Html.ActionLink("Strona główna", "Index", "Home")</li>
                                <li>@Html.ActionLink("O nas", "ONas", "HomeTabs")</li>
                                <li>@Html.ActionLink("Kontakt", "Kontakt", "HomeTabs")</li>
                                <li>@Html.ActionLink("Współpraca", "Wspolpraca", "HomeTabs")</li>
                            </ul>
                      </nav>  
                 </div>     
            </div>
        </header>
        <div id="body">
            @RenderSection("featured", required: false)
            <section class="content-wrapper main-content clear-fix">
                @RenderBody()
            </section>
        </div>
        <footer>
            <div class="content-wrapper">
                    <p>@DateTime.Now.Year - kurs.aspnetmvc.pl</p>
            </div>
        </footer>
 
        @Scripts.Render("~/bundles/jquery")
        @RenderSection("scripts", required: false)
    </body>
</html>

Treść strony WWW jest umieszczona w sekcji RenderBody() i jest to jedyna wymagana sekcja. Bez tej części kodu nie było by wiadome, w którym miejscu ma znajdować się główna, zmieniająca się część strony. W poniższym kodzie znajduje się również druga, nie wymagana (required: false) sekcja o nazwie "featured".

<div id="body">
    @RenderSection("featured", required: false)
    <section class="content-wrapper main-content clear-fix">
        @RenderBody()
    </section>
</div>

Aby sekcja o nazwie featured znalazła się na stronie musimy w pliku z widokiem dodać sekcje o tej samej nazwie, a w niej kod, który ma się znaleźć we wcześniej wybranym miejscu (w pliku _Layout.cshtml):

Kod sekcji z pliku Index.xshtml dla konrolera Home:

@section featured {
    <section class="featured">
        <div class="content-wrapper">
            <hgroup class="title">
                <h1>@ViewBag.Title.</h1>
                <h2>@ViewBag.Message<
            </hgroup>
            <p>
                Miło nam jest poinformować o powstaniu portalu.
            </p>
        </div>
    </section>
}

Kod HTML wygenerowany dla podstrony bez sekcji featured:

<div id="body">
    <section class="content-wrapper main-content clear-fix">
        
    </section>
</div>

Wygląd strony bez sekcji featured (Rys. 2.40):

widok bez featured

Kod HTML wygenerowany dla podstrony z sekcją featured:

<div id="body">
    <section class="featured">
        <div class="content-wrapper">
            <hgroup class="title">
                <h1>Microsoft C# i ASP.NET MVC 4.</h1>
                <h2>ASP.net MVC 4</h2>
            </hgroup>
            <p>
                Miło nam jest poinformować o powstaniu portalu.
            </p>
        </div>
    </section>
 
    <section class="content-wrapper main-content clear-fix">
        
    </section>
</div>

Wygląd strony z sekcją featured (Rys. 2.41):

Z sekcja featured

Na samym końcu wcześniej wklejonego kodu znajduje się sekcja "scripts". W tej sekcji powinny się znajdować wszystkie skrypty JavaScript unikalne dla konkretnych podstron. Sekcja ze skryptami jest ładowana na samym końcu dokumentu, aby nie blokować ładowania się strony WWW. Skrypty wspólne dla każdej podstrony są ładowane w pliku _Layout.cshtml przy pomocy:

@Scripts.Render("~/bundles/jquery")

Sekcje są pomocne dla tych części podstron, które mogą wyglądać różnie w zależności od podstrony a nie znajdują się w miejscu gdzie jest ładowana treść strony(np. reklamy dostosowane do treści na podstronach). Aby nie musieć dodawać tego samego diva do wszystkich sekcji możemy skorzystać z następującego rozwiązania:

@if(IsSectionDefined("featured")){
    <div id="jakas_kalsa">
            @RenderSection("featured", required: false)
    </div>
}

<- Wstecz

Dalej ->

Komentarze facebook (polub nasz profil na FB aby je zobaczyć):

Kurs ASP.NET MVC