Lezione 7 – View, C#, HTML e Bootstrap

Nella lezione precedente abbiamo visto come “ragiona” MVC, adesso vediamo come utilizzarlo per sfruttarne le potenzialità.

Le caratteristiche essenziali per una HomePage sono: l’aspetto gradevole e funzionale,  accesso ai contenuti del sito e velocità di caricamento. Per ottenere questo risultato, ormai da diversi anni, Visual Studio mette a disposizione il potentissimo foglio stile Bootstrap, inizialmente sviluppato per Twitter ed ora aggiornato regolarmente da un team di sviluppatori. Con VS2022 viene utilizzato Bootstrap 5.

Al momento la nostra HomePage è praticamente vuota. La prima funzionalità di Bootstrap che andremo ad utilizzare sarà uno dei componenti che darà immediatamente un aspetto professionale al vostro sito, il Carousel. Il codice che segue va inserito subito dopo la tag <div class="text-center"> di Index.cshtml.

    <div id="carouselHPFade" class="carousel slide carousel-fade" data-bs-ride="carousel">
        <div class="carousel-inner">

            <div class="carousel-item active">
                <img src="~/images/homepage/hp01.jpg" class="d-block w-100" alt="img n.1" />
            </div>
            <div class="carousel-item">
                <img src="~/images/homepage/hp02.jpg" class="d-block w-100" alt="img n.2" />
            </div>
            <div class="carousel-item">
                <img src="~/images/homepage/hp03.jpg" class="d-block w-100" alt="img n.3" />
            </div>
            <div class="carousel-item">
                <img src="~/images/homepage/hp04.jpg" class="d-block w-100" alt="img n.4" />
            </div>
            <div class="carousel-item">
                <img src="~/images/homepage/hp01.jpg" class="d-block w-100" alt="img n.4" />
            </div>

            @*
                @for (var i = 1; i <= 5; i++)
                {
                if (i == 1)
                {
                <div class="carousel-item active">
                <img src="~/images/homepage/@string.Format("hp0{0}.jpg", i)" class="d-block w-100" alt="img n.@i.ToString()" />
                </div>
                }
                else
                {
                <div class="carousel-item">
                <img src="~/images/homepage/@string.Format("hp0{0}.jpg", i)" class="d-block w-100" alt="img n.@i.ToString()" />
                </div>
                }
                }
            *@
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#carouselHPFade" data-bs-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Previous</span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#carouselHPFade" data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
        </button>
    </div>

Salvate F5 per lanciare il Debug, per il momento godiamoci l’effetto, poi vedremo meglio come funzionano le componenti Bootstrap. Quello che dovete fare ora è allargare e stringere la finestra del browser. Come potete notare la componente Bootstrap riconosce la dimensione della vostra finestra e si adatta. Chiudiamo il debugging.

Torniamo per un momento nel file _Layout.cshtml. Qui troviamo la prima componente utilizzata per la creazione del Menu Bar: <nav>, la documentazione completa di Bootstrap la trovate alla URL “https://getbootstrap.com/”. Ora in queste lezioni non faremo un vero e proprio corso su Bootstrap, ma sarà inevitabile utilizzarne componenti e funzionalità per la realizzazione del nostro sito di vendite online, quindi sarà anche inevitabile descrivere per quanto possibile questi oggetti utilizzati.

Già che ci siamo nel file _Layout.cshtml modifichiamo la tag <div class="container"> in

<div class="container-fluid">.

    …
    <div class="container-fluid">
         <main role="main" class="pb-3">
             @RenderBody()
         </main>
    </div>
    …

Questa modifica permetterà al contenuto della pagina di arrivare al limite laterale massimo lasciando solo lo spazio minimo prima di andare oltre. Inoltre questo spazio varierà a seconda della risoluzione orizzontale del Device utilizzato. Quello che vedremo l’abbiamo più o meno simulato prima aprendo e chiudendo la finestra del browser. E’ chiaro che se utilizziamo uno smartphone con schermo in verticale o lo schermo 16:9 di un computer quello che andremo a vedere dovrà essere adeguato e coerente. Bootstrap ci aiuta totalmente in questa attività di adeguamento con strumenti che nascono già per adattarsi a questa esigenza.

Torniamo al Carousel, all’interno ci sono le 5 tag <div class="carousel-item”></div> che contengono la tag <img> per il caricamento delle immagini. Se notiamo poco sotto c’è un’area commentata contraddistinta da se la riportiamo eseguibile, selezionando il codice commentato e clickando in alto nella barra dei tool l’icona di “Uncomment”.

Se non la trovate dovete fare click destro all’altezza della barra e selezionare “Text Editor”.

Adesso premete Ctrl+K+D per riformattare il codice. Ora andate sulle div sopra e selezionate il codice e commentate il codice con il tasto della bar “Comment”.

Premete Ctrl+K+D e riformattate il codice. Ora come potete vedere abbiamo un classico codice C# con all’interno del codice HTML. Abbiamo già precedentemente accennato che nelle pagine Razor il simbolo “@” apre un blocco di codice C#. Questo blocco po’ essere solo la visualizzazione del valore di una variabile (es.:  @ViewData["Title"]) oppure un blocco C# vero e proprio (es.: @{ … } ), oppure come nel caso di un ciclo for o foreach che all’interno avrà del codice HTML (es: @for ( …) { C# { HTML } C# }). In questo caso specifico il vantaggio non è molto, visto che la quantità di linee scritte sono più o meno le stesse, ma nel caso di includere 10 immagini il vantaggio sarebbe stato evidente. Questo tipo di sintassi sarà alla base della visualizzazione dei dati dell’applicazione.

Continuiamo con la modifica della pagina. Sotto alla tag <h1 class="display-4">@ViewData["Title"]</h1> inseriamo il codice della prossima textbox.

    …
    <div class="row ps-5 pe-5">
        <div class="col-sm-12 col-md-9 border">
            <h2>Area Prodotti</h2>
                <br />
                <br />
        </div>
        <div class="col-sm-12 col-md-3 border">
                <h2>Area Banner</h2>          
                <br />
                <br />
        </div>
    </div>
    …

Salvate e lanciate il Debug. Allargate e riducete il margine orizzontale della finestra, vedrete che le due aree si adatteranno alla dimensione della visualizzazione.

Come potete vedere le due visualizzazioni tengono conto in questo caso dell’apertura o meno della finestra, ma nel caso di un Device diverso avrebbero avuto lo stesso effetto. Cosa abbiamo fatto. Per dividere lo spazio di visualizzazione in due colonne abbiamo usato la classe “row” e abbiamo assegnato ad una delle aree uno spazio di 9 colonne e all’altra di 3, ma nel caso che lo spazio orizzontale fosse più stretto sono tornate entrambe a 12.

E’ così che ragiona Bootstrap per gestire lo spazio orizzontale, lo divide in 12 colonne. Per capire questo cosa significa dobbiamo introdurre il concetto di griglia e breakpoint. Bootstrap 5 ha introdotto una nuova lista di breakpoint:

Quindi se lo schermo ha meno di 576 pixel sarà X-Small, se ne avrà tra 992 e 1199 pixel sarà Large, ecc. Questo definisce i diversi punti di rottura per passare da una visualizzazione all’altra, ma il concetto di colonna rimane sempre lo stesso. Avremo sempre 12 colonne che si tratti di una visualizzazione Small o Extra Large, ma possiamo decidere quante colonne la visualizzazione può utilizzare. E’ chiaro che un testo o un’immagine occuperanno più o meno spazio a seconda dei pixel utilizzati, quindi in uno schermo piccolo sarà meglio visualizzarlo a schermo intero (12 colonne), ma sul monitor 21’’ del desktop potrà essere affiancato ad un testo o ad un’altra immagine in due spazi da 6 colonne ciascuno. Mi rendo conto che ad un primo approccio non è semplicissimo da comprende, ma con l’esperienza diventerà automatico applicarlo.

Comunque una consultazione della documentazione di Bootstrap nella “Getting Started” vi aiuterà a capire meglio quanto useremo in seguito.

Per il momento lasciamo la HomePage com’è, la modificheremo in modo adeguato in una delle prossime lezioni.

Nella prossima lezione aggiungeremo altre tabelle al database e inizieremo la definizione vera e propria delle pagine del sito.