ASP.NET MVC 3 - Presentare i dati nella View

Sviluppo applicazioni web e linguaggio HTML LEZIONE 05ASP.NETModel View Controller

Con le Viewmostriamo i datiall’utente

Quali dati?

Quelli del model …

Quelli del model …Visualizziamo in homepage il numero totale dipost e commenti utilizzando il DbContext

Quelli del model …Visualizziamo in homepage il numero totale di poste commenti utilizzando il DbContext e LINQ to Entitiesint totalPosts = 0, totalComments = 0;using (var db = new BlogContext()){ totalComments = db.Comments.Count(); totalPosts = (from p in db.Posts where p.IsPublished select p).Count();}

… e nella vista i daticome li trasportiamo?

ViewBagIn una valigia,ovviamente …

ViewBagdynamic al qualepossiamo assegnareproprietà arbitrarie

ViewBag.TotalPostsdynamic al qualepossiamo assegnareproprietà arbitrarie

ViewBag.TotalPostsint totalPosts = 0, totalComments = 0;using (var db = new BlogContext()){ totalComments = db.Comments.Count(); totalPosts = (from p in db.Posts where p.IsPublished select p).Count();}ViewBag.TotalPosts = totalPosts;ViewBag.TotalComments = totalComments;

In realtà …Il ViewBag permette di rendere dinamicol’accesso ad un dizionario, il ViewData

ViewBag.TotalPostsint totalPosts = 0, totalComments = 0;using (var db = new BlogContext()){ totalComments = db.Comments.Count(); totalPosts = (from p in db.Posts where p.IsPublished select p).Count();}ViewBag.TotalPosts = totalPosts;ViewData[“TotalComments”] = totalComments;

ma vediamo comenella vista i dati delmodel si mescolano alcodice html …

Questa sintassi in esecuzione vieneinterpretata da un View Engine

Questa sintassi in esecuzione vieneinterpretata da un View Engine, cheha il compito di tradurre il codicesottostante nell’html da inviare albrowser.

Questa sintassi in esecuzione vieneinterpretata da un View Engine, cheha il compito di tradurre il codicesottostante nell’html da inviare albrowser. Il View Engine in questionesi chiama Razor

Mostriamo in home gli ultimi post:

Mostriamo in home gli ultimi post:1 var posts = ( from p in db.Posts where p.IsPublished orderby p.CreatedDate descending select p ).Skip(0) .Take(3) .ToList<Post>();

Mostriamo in home gli ultimi post: var posts = ( from p in db.Posts where p.IsPublished orderby p.CreatedDate descending select p ).Skip(0) .Take(3) .ToList<Post>();2 ViewBag.Posts = posts;

Mostriamo in home gli ultimi post: var posts = ( from p in db.Posts where p.IsPublished orderby p.CreatedDate descending select p ).Skip(0) .Take(3) .ToList<Post>(); ViewBag.Posts = posts;3 @foreach (var item in (IList<Post>)ViewBag.Posts) { <h2>@item.Title</h2> <h3>Pubblicato il @item.PublishedDate</h3> <p>@item.Body</p> <p class="tags">@item.Tags</p> }

Il ViewBag è molto comodo, ma cicostringe a eseguire sempre un castprima di utilizzarlo se la proprietà è unoggetto complesso @foreach (var item in (IList<Post>)ViewBag.Posts) { <h2>@item.Title</h2> <h3>Pubblicato il @item.PublishedDate</h3> <p>@item.Body</p> <p class="tags">@item.Tags</p> }

Strongly-typed viewsPossiamo dire alla vista iltipo del modello che glipassiamo

Strongly-typed viewspublic ActionResult Index() { … var posts = …; ViewBag.Posts = posts; return View(posts);}

Strongly-typed views@using WebApp.Blog.Domain.Model;@model IList<Post>@foreach(var item in Model){…

Blocco di codice:@{ ViewBag.Title = "Home Page";}

Espressione con html encoding<h2>@item.Title</h2>

Espressione senza encoding<p>@Html.Raw(item.Title)</p>

Chiamata di un metodo<p>@(DateTime.Now.ToLocalTime()))</p>

Controllo del flusso@foreach (var item in Model){ <h2>@item.Title</h2> <p>@item.Body</p> <p class="tags">@item.Tags</p>}

Mescolare codice e testo@foreach (var item in Model){ <h2>@item.Title</h2> <p>@item.Body</p> <p class="tags">@item.Tags</p> <text>Copyright - 2012</text>}

LayoutSelezionando le parti comunitra le pagine del nostro sitopossiamo definire un layoute delle sezioni da riutilizzare

Layout<!DOCTYPE html><html><head><title>@ViewBag.Title</title></head><body> <header> <h1>My MVC Application</h1> </header> <section id="main"> @RenderBody() </section> <footer>@RenderSection("Footer")</footer></body></html>

LayoutCome faccio a fare in modo che lavista utilizzi un determinato layout?@{ ViewBag.Title = "Home Page"; Layout = "~/Views/Shared/_Layout.cshtml";}

LayoutMa lo devo fare per ogni vista?!

LayoutMa lo devo fare per ogni vista?!NO, basta utilizzare il ViewStart …

_ViewStartE’ un file che viene inserito nellacartella principale e permette di farapplicare delle regole a tutte leviste presenti in quella cartella e intutte le sue sottocartelle

PartialViewSe le informazioni da visualizzaresono le stesse (o quasi) per moltepagine, allora possiamo creare una“vista parziale” che le contenga

RenderActionSe non mi basta la vista parzialeposso ricorrere alle “child action”

RenderAction1 @{ Html.RenderAction("List", "Category"); } All’interno di una vista

RenderAction Come action di un controller2 public ActionResult List() { IList<Category> cat_s = new List<Category>(); using (var db = new BlogContext()) { cat_s = (from c in db.Categories.Include("Posts") select c).ToList<Category>(); } return PartialView(categories); }

Codice di markupRenderAction della partialview3 @using WebApp.Blog.Domain.Model; @model ICollection<Category> <h2>Categorie</h2> <ul> @foreach (var item in Model) { <li> @item.Name (@(item.Posts != null ? item.Posts.Count() : 0)) </li> } </ul>

Come esercizio: Una pagina che visualizzi tutti i post di una categoria Una pagina che mostri i dati di un post compresi i commenti Paginare l’home page per mostrare i post meno recenti

continua …

CreditsLe immagini contenute in questa presentazionehanno licenza Creative CommonsSlide 10: http://www.flickr.com/photos/jeffwerner/2677245039/in/photostream/Slide 13: http://www.flickr.com/photos/philthomas/3345060816/in/photostream/

Thank You MANUEL SCAPOLAN website: www.manuelscapolan.it twitter: manuelscapolan e-mail: info@manuelscapolan.it

ASP.NET MVC 3 - Presentare i dati nella View

by Manuel Scapolan on Feb 13, 2012

Accessibility

Categories

Upload Details

Usage Rights

1 Embed 1

Statistics

ASP.NET MVC 3 - Presentare i dati nella View Presentation Transcript