• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
ASP.NET MVC 3 - Presentare i dati nella View
 

ASP.NET MVC 3 - Presentare i dati nella View

on

  • 1,299 views

Mostrare i dati all'utente nelle View con Razor

Mostrare i dati all'utente nelle View con Razor

Statistics

Views

Total Views
1,299
Views on SlideShare
1,296
Embed Views
3

Actions

Likes
0
Downloads
16
Comments
0

1 Embed 3

http://www.linkedin.com 3

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-ShareAlike LicenseCC Attribution-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

    • Sviluppo applicazioni web e linguaggio HTML LEZIONE 05ASP.NETModel View Controller
    • Model
    • 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 …
    • 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>
    • 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>
    • 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
    • PartialViewNel layout o nella view<footer>@Html.Partial("Footer")</footer>In un file con nome Footer.cshtml(sotto la cartella ~/Shared )<p>Copyright © 2012</p>
    • 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