ASP.NET MVC 3 - Presentare i dati nella View

2,104 views

Published on

Mostrare i dati all'utente nelle View con Razor

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,104
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
25
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

ASP.NET MVC 3 - Presentare i dati nella View

  1. 1. Sviluppo applicazioni web e linguaggio HTML LEZIONE 05ASP.NETModel View Controller
  2. 2. Model
  3. 3. Con le Viewmostriamo i datiall’utente
  4. 4. Quali dati?
  5. 5. Quelli del model …
  6. 6. Quelli del model …Visualizziamo in homepage il numero totale dipost e commenti utilizzando il DbContext
  7. 7. 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();}
  8. 8. … e nella vista i daticome li trasportiamo?
  9. 9. ViewBagIn una valigia,ovviamente …
  10. 10. ViewBagdynamic al qualepossiamo assegnareproprietà arbitrarie
  11. 11. ViewBag.TotalPostsdynamic al qualepossiamo assegnareproprietà arbitrarie
  12. 12. 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;
  13. 13. In realtà …Il ViewBag permette di rendere dinamicol’accesso ad un dizionario, il ViewData
  14. 14. 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;
  15. 15. ma vediamo comenella vista i dati delmodel si mescolano alcodice html …
  16. 16. ma vediamo comenella vista i dati delmodel si mescolano alcodice html …
  17. 17. Questa sintassi in esecuzione vieneinterpretata da un View Engine
  18. 18. Questa sintassi in esecuzione vieneinterpretata da un View Engine, cheha il compito di tradurre il codicesottostante nell’html da inviare albrowser.
  19. 19. 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
  20. 20. Mostriamo in home gli ultimi post:
  21. 21. 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>();
  22. 22. 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;
  23. 23. 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> }
  24. 24. 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> }
  25. 25. Strongly-typed viewsPossiamo dire alla vista iltipo del modello che glipassiamo
  26. 26. Strongly-typed viewspublic ActionResult Index() { … var posts = …; ViewBag.Posts = posts; return View(posts);}
  27. 27. Strongly-typed views@using WebApp.Blog.Domain.Model;@model IList<Post>@foreach(var item in Model){…
  28. 28. Blocco di codice:@{ ViewBag.Title = "Home Page";}
  29. 29. Espressione con html encoding<h2>@item.Title</h2>
  30. 30. Espressione senza encoding<p>@Html.Raw(item.Title)</p>
  31. 31. Chiamata di un metodo<p>@(DateTime.Now.ToLocalTime()))</p>
  32. 32. Controllo del flusso@foreach (var item in Model){ <h2>@item.Title</h2> <p>@item.Body</p> <p class="tags">@item.Tags</p>}
  33. 33. 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>}
  34. 34. LayoutSelezionando le parti comunitra le pagine del nostro sitopossiamo definire un layoute delle sezioni da riutilizzare
  35. 35. 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>
  36. 36. 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>
  37. 37. 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>
  38. 38. LayoutCome faccio a fare in modo che lavista utilizzi un determinato layout?@{ ViewBag.Title = "Home Page"; Layout = "~/Views/Shared/_Layout.cshtml";}
  39. 39. LayoutMa lo devo fare per ogni vista?!
  40. 40. LayoutMa lo devo fare per ogni vista?!NO, basta utilizzare il ViewStart …
  41. 41. _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
  42. 42. PartialViewSe le informazioni da visualizzaresono le stesse (o quasi) per moltepagine, allora possiamo creare una“vista parziale” che le contenga
  43. 43. 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>
  44. 44. RenderActionSe non mi basta la vista parzialeposso ricorrere alle “child action”
  45. 45. RenderAction1 @{ Html.RenderAction("List", "Category"); } All’interno di una vista
  46. 46. 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); }
  47. 47. 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>
  48. 48. 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
  49. 49. continua …
  50. 50. 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/
  51. 51. Thank You MANUEL SCAPOLAN website: www.manuelscapolan.it twitter: manuelscapolan e-mail: info@manuelscapolan.it

×