ASP.NET MVC 3 - Presentare i dati nella View

Sviluppo applicazioni web e linguaggio HTML

LEZIONE 05

ASP.NET
Model View Controller

Con le View
mostriamo i dati
all’utente

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?

ViewBag
In una valigia,
ovviamente …

ViewBag
dynamic al quale
possiamo assegnare
proprietà arbitrarie

ViewBag.TotalPosts
dynamic al quale
possiamo assegnare
proprietà arbitrarie

ViewBag.TotalPosts
{

where p.IsPublished
select p).Count();
}
ViewBag.TotalPosts = totalPosts;
ViewBag.TotalComments = totalComments;

In realtà …

Il ViewBag permette di rendere dinamico
l’accesso ad un dizionario, il ViewData

ViewBag.TotalPosts
{

where p.IsPublished
select p).Count();
}
ViewBag.TotalPosts = totalPosts;
ViewData[“TotalComments”] = totalComments;

ma vediamo come
nella vista i dati del
model si mescolano al
codice html …

Questa sintassi in esecuzione viene
interpretata da un View Engine

interpretata da un View Engine, che
ha il compito di tradurre il codice
sottostante nell’html da inviare al
browser.

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:

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

var posts = ( from p in db.Posts
where p.IsPublished
select p ).Skip(0)
.Take(3)
.ToList<Post>();
2 ViewBag.Posts = posts;

var posts = ( from p in db.Posts
where p.IsPublished
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)
{
<h3>Pubblicato il @item.PublishedDate</h3>
<p>@item.Body</p>
}

Strongly-typed views
Possiamo dire alla vista il
tipo del modello che gli
passiamo

public ActionResult Index() {
…
var posts = …;
ViewBag.Posts = posts;
return View(posts);
}

@using WebApp.Blog.Domain.Model;
@model IList<Post>

@foreach(var item in Model)
{
…

Blocco di codice:

@{
ViewBag.Title = "Home Page";
}

Espressione con html encoding


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)
{
<p>@item.Body</p>
}

Mescolare codice e testo

{
<p>@item.Body</p>
<text>Copyright - 2012</text>
}

Layout
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
Come faccio a fare in modo che la
vista utilizzi un determinato layout?

@{
ViewBag.Title = "Home Page";
Layout = "~/Views/Shared/_Layout.cshtml";
}

Layout
Ma lo devo fare per ogni vista?!

Layout
Ma lo devo fare per ogni vista?!

NO, basta utilizzare il ViewStart …

_ViewStart
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

PartialView
Se le informazioni da visualizzare
sono le stesse (o quasi) per molte
pagine, allora possiamo creare una
“vista parziale” che le contenga

RenderAction
Se non mi basta la vista parziale
posso ricorrere alle “child action”

RenderAction
1 @{ Html.RenderAction("List", "Category"); }

All’interno
di una vista

RenderAction
Come action di
un controller

2 public ActionResult List()
{
IList<Category> cat_s = new List<Category>();
{
cat_s = (from c in db.Categories.Include("Posts")
select c).ToList<Category>();
}
return PartialView(categories);
}

Codice di markup
RenderAction della partialview

3 @using WebApp.Blog.Domain.Model;

@model ICollection<Category>
<h2>Categorie</h2>
<ul>
{
<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

Credits
Le immagini contenute in questa presentazione
hanno licenza Creative Commons

Slide 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

More Related Content

Viewers also liked (7)

Similar to ASP.NET MVC 3 - Presentare i dati nella View (20)

More from Manuel Scapolan (12)

ASP.NET MVC 3 - Presentare i dati nella View