ASP.NET
Sviluppo applicazioni web e linguaggio HTML
LEZIONE 05
Model View Controller
Model
Con le View
mostriamo i dati
all’utente
Quali dati?
Quelli del model …
Quelli del model …
Visualizziamo in homepage il numero totale di
post e commenti utilizzando il DbContext
Quelli del model …
Visualizziamo in homepage il numero totale di post
e commenti utilizzando il DbContext e LINQ to Entities
int 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 dati
come li trasportiamo?
In una valigia, ovviamente …
ViewBag
dynamic al quale
possiamo assegnare
proprietà arbitrarie
ViewBag
dynamic al quale
possiamo assegnare
proprietà arbitrarie
ViewBag.TotalPosts
int 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;
ViewBag.TotalPosts
Il ViewBag permette di rendere dinamico
l’accesso ad un dizionario, il ViewData
In realtà …
int 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;
ViewBag.TotalPosts
ma vediamo come
nella vista i dati del
model si mescolano al
codice html …
ma vediamo come
nella vista i dati del
model si mescolano al
codice html …
Questa sintassi in esecuzione viene
interpretata da un View Engine
Questa sintassi in esecuzione viene
interpretata da un View Engine, che
ha il compito di tradurre il codice
sottostante nell’html da inviare al
browser.
Questa sintassi in esecuzione viene
interpretata da un View Engine, che
ha il compito di tradurre il codice
sottostante nell’html da inviare al
browser. Il View Engine in questione
si 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:
2
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;
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 ci
costringe a eseguire sempre un cast
prima di utilizzarlo se la proprietà è un
oggetto 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 views
Possiamo dire alla vista il
tipo del modello che gli
passiamo
Strongly-typed views
public 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>
}
Selezionando le parti comuni
tra le pagine del nostro sito
possiamo definire un layout
e 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>
Layout
Come faccio a fare in modo che la
vista utilizzi un determinato layout?
Layout
@{
ViewBag.Title = "Home Page";
Layout = "~/Views/Shared/_Layout.cshtml";
}
Ma lo devo fare per ogni vista?!
Layout
Ma lo devo fare per ogni vista?!
NO, basta utilizzare il ViewStart …
Layout
E’ un file che viene inserito nella
cartella principale e permette di far
applicare delle regole a tutte le
viste presenti in quella cartella e in
tutte le sue sottocartelle
_ViewStart
Se le informazioni da visualizzare
sono le stesse (o quasi) per molte
pagine, allora possiamo creare una
“vista parziale” che le contenga
PartialView
<footer>@Html.Partial("Footer")</footer>
PartialView
Nel layout o nella view
<p>Copyright © 2012</p>
In un file con nome Footer.cshtml (sotto la cartella ~/Shared )
Se non mi basta la vista parziale
posso ricorrere alle “child action”
RenderAction
RenderAction @{ Html.RenderAction("List", "Category"); }
All’interno
di una vista
1
RenderAction
2 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);
}
Come action di
un controller
RenderAction
3 @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>
Codice di markup
della partialview
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
Come esercizio:
continua …
Slide 10: http://www.flickr.com/photos/jeffwerner/2677245039/in/photostream/
Slide 13: http://www.flickr.com/photos/philthomas/3345060816/in/photostream/
Credits Le immagini contenute in questa presentazione
hanno licenza Creative Commons
Thank You
MANUEL SCAPOLAN website: www.manuelscapolan.it twitter: manuelscapolan e-mail: [email protected]
Top Related