Aggiunta di una visualizzazione (2012)
Nota
Una versione aggiornata di questa esercitazione è disponibile qui che usa ASP.NET MVC 5 e Visual Studio 2013. È più sicuro, molto più semplice da seguire e dimostra altre funzionalità.
In questa sezione verrà modificata la classe per usare i file di modello per incapsulare in modo pulito il HelloWorldController processo di generazione di risposte HTML a un client.
Si creerà un file modello di visualizzazione usando il motore di visualizzazione Razor introdotto con ASP.NET MVC 3. I modelli di visualizzazione basati su Razor hanno un'estensione file con estensione cshtml e offrono un modo elegante per creare un output HTML usando C#. Razor riduce al minimo il numero di caratteri e sequenze di tasti necessari durante la scrittura di un modello di visualizzazione e consente un flusso di lavoro di codifica veloce e fluido.
Attualmente il metodo Index restituisce una stringa con un messaggio hardcoded nella classe controller. Modificare il Index metodo per restituire un View oggetto, come illustrato nel codice seguente:
public ActionResult Index()
{
return View();
}
Il Index metodo precedente usa un modello di visualizzazione per generare una risposta HTML al browser. Metodi controller (noti anche come metodi di azione), ad esempio il Index metodo precedente, in genere restituiscono un ActionResult (o una classe derivata da ActionResult), non tipi primitivi come stringa.
Nel progetto aggiungere un modello di visualizzazione che è possibile usare con il Index metodo . A tale scopo, fare clic con il pulsante destro del mouse all'interno del Index metodo e fare clic su Aggiungi visualizzazione.
Verrà visualizzata la finestra di dialogo Aggiungi visualizzazione . Lasciare le impostazioni predefinite nel modo in cui sono e fare clic sul pulsante Aggiungi :
La cartella MvcMovie\Views\HelloWorld e il file MvcMovie\Views\HelloWorld\Index.cshtml vengono creati. È possibile visualizzarli in Esplora soluzioni:
Di seguito viene illustrato il file Index.cshtml creato:
Aggiungere il codice HTML seguente nel <h2> tag.
<p>Hello from our View Template!</p>
Il file MvcMovie\Views\HelloWorld\Index.cshtml completo è illustrato di seguito.
@{
ViewBag.Title = "Index";
}
<h2>Index</h2>
<p>Hello from our View Template!</p>
Se si usa Visual Studio 2012, in Esplora soluzioni fare clic con il pulsante destro del mouse sul file Index.cshtml e selezionare Visualizza in Controllo pagina.
L'esercitazione Controllo pagina contiene altre informazioni su questo nuovo strumento.
In alternativa, eseguire l'applicazione e passare al HelloWorld controller (http://localhost:xxxx/HelloWorld). Il metodo nel controller non ha funzionato molto. È Index sufficiente eseguire l'istruzione return View(), che ha specificato che il metodo deve usare un file modello di visualizzazione per eseguire il rendering di una risposta al browser. Poiché non è stato specificato in modo esplicito il nome del file modello di visualizzazione da usare, ASP.NET MVC predefinito per usare il file di visualizzazione Index.cshtml nella cartella \Views\HelloWorld . L'immagine seguente mostra la stringa "Hello from our View Template!" hardcoded nella visualizzazione.
Sembra abbastanza buono. Si noti tuttavia che la barra del titolo del browser mostra "Index My ASP.NET A" (Indice my ASP.NET A) e il collegamento grande nella parte superiore della pagina indica "il logo qui". Sotto il collegamento "your logo here" (Il tuo logo qui) sono registrati e accedono ai collegamenti seguenti alle pagine Home, About e Contact. Cambiamo alcuni di questi.
Modifica di visualizzazioni e pagine di layout
Prima di tutto, si vuole modificare il titolo "il logo qui". nella parte superiore della pagina. Questo testo è comune a ogni pagina. Viene effettivamente implementato in un unico posto nel progetto, anche se viene visualizzato in ogni pagina dell'applicazione. Passare alla cartella /Views/Shared in Esplora soluzioni e aprire il file _Layout.cshtml. Questo file viene chiamato pagina di layout ed è la "shell" condivisa usata da tutte le altre pagine.
I modelli di layout consentono di specificare il layout del contenitore HTML del sito in un'unica posizione e quindi di applicarlo in più pagine del sito. Trovare la riga @RenderBody(). RenderBody è un segnaposto in cui tutte le pagine specifiche della visualizzazione create vengono visualizzate, "wrapped" nella pagina di layout. Ad esempio, se si seleziona il collegamento About, viene eseguito il rendering della visualizzazione Views\Home\About.cshtml all'interno del RenderBody metodo.
Modificare l'intestazione del titolo del sito nel modello di layout da "logo qui" a "MVC Movie".
<div class="float-left">
<p class="site-title">@Html.ActionLink("MVC Movie", "Index", "Home")</p>
</div>
Sostituire il contenuto dell'elemento title con il markup seguente:
<title>@ViewBag.Title - Movie App</title>
Eseguire l'applicazione e notare che ora dice "MVC Movie". Fare clic sul collegamento Informazioni e si noterà anche come viene visualizzata la pagina "MVC Movie". È stato possibile apportare la modifica una volta nel modello di layout e avere tutte le pagine del sito riflettono il nuovo titolo.
Ora, cambiamo il titolo della visualizzazione Indice.
Aprire MvcMovie\Views\HelloWorld\Index.cshtml. Esistono due posizioni per apportare una modifica: prima, il testo visualizzato nel titolo del browser e quindi nell'intestazione secondaria (l'elemento <h2> ). Renderli leggermente diversi in modo da poter esaminare la parte specifica di app modificata dal frammento specifico di codice.
@{
ViewBag.Title = "Movie List";
}
<h2>My Movie List</h2>
<p>Hello from our View Template!</p>
Per indicare il titolo HTML da visualizzare, il codice precedente imposta una Title proprietà dell'oggetto ViewBag ,ovvero nel modello di visualizzazione Index.cshtml . Se si esamina il codice sorgente del modello di layout, si noterà che il modello usa questo valore nell'elemento <title> come parte della <head> sezione del codice HTML modificato in precedenza. Usando questo ViewBag approccio, è possibile passare facilmente altri parametri tra il modello di visualizzazione e il file di layout.
Eseguire l'applicazione e passare a http://localhost:xx/HelloWorld. Si noti che il titolo del browser, l'intestazione primaria e le intestazioni secondarie sono cambiati. Se non vengono visualizzate modifiche nel browser, potrebbe essere possibile visualizzare contenuto memorizzato nella cache. Premere CTRL+F5 nel browser per forzare la risposta dal server da caricare. Il titolo del browser viene creato con il ViewBag.Title modello di visualizzazione Index.cshtml e il componente aggiuntivo "- Movie App" aggiunto nel file di layout.
Si noti anche come il contenuto nel modello di visualizzazione Index.cshtml è stato unito al modello di visualizzazione _Layout.cshtml e una singola risposta HTML è stata inviata al browser. I modelli di layout rendono molto semplice apportare modifiche che si applicano a tutte le pagine dell'applicazione.
Il messaggio "Hello from our View Template" (in questo caso il messaggio "Hello from our View Template") è hardcoded, anche se. L'applicazione MVC ha un elemento "V" (vista) ed è stato ottenuto un elemento "C" (controller), ma non ancora un elemento "M" (modello). A breve verrà illustrato come creare un database e recuperare i dati del modello da esso.
Passaggio di dati dal controller alla vista
Prima di passare a un database e parlare di modelli, tuttavia, si parlerà prima di tutto del passaggio di informazioni dal controller a una visualizzazione. Le classi controller vengono richiamate in risposta a una richiesta URL in ingresso. Una classe controller è la posizione in cui si scrive il codice che gestisce le richieste del browser in ingresso, recupera i dati da un database e decide infine il tipo di risposta da inviare al browser. I modelli di visualizzazione possono quindi essere usati da un controller per generare e formattare una risposta HTML al browser.
I controller sono responsabili della fornitura di dati o oggetti necessari per consentire a un modello di visualizzazione di eseguire il rendering di una risposta al browser. Procedura consigliata: un modello di visualizzazione non deve mai eseguire logica di business o interagire direttamente con un database. Invece, un modello di visualizzazione deve funzionare solo con i dati forniti dal controller. La gestione di questa "separazione delle preoccupazioni" consente di mantenere il codice pulito, testabile e più gestibile.
Attualmente, il Welcome metodo action nella HelloWorldController classe accetta un name parametro e numTimes quindi restituisce i valori direttamente nel browser. Anziché avere il controller di rendering di questa risposta come stringa, modificare il controller per usare invece un modello di visualizzazione. Il modello di vista genererà una risposta dinamica, il che significa che è necessario passare i bit di dati appropriati dal controller alla vista per generare la risposta. A tale scopo, è possibile inserire i dati dinamici (parametri) necessari dal modello di visualizzazione in un ViewBag oggetto a cui può accedere il modello di visualizzazione.
Tornare al file HelloWorldController.cs e modificare il Welcome metodo per aggiungere un Message valore e NumTimes all'oggetto ViewBag . ViewBag è un oggetto dinamico, che significa che è possibile inserire qualsiasi cosa che si vuole in esso; l'oggetto ViewBag non ha proprietà definite fino a quando non si inserisce qualcosa all'interno di esso. Il ASP.NET sistema di associazione di modelli MVC esegue automaticamente il mapping dei parametri denominati (name e numTimes) dalla stringa di query nella barra degli indirizzi ai parametri nel metodo. Il file HelloWorldController.cs completo avrà un aspetto simile al seguente:
using System.Web;
using System.Web.Mvc;
namespace MvcMovie.Controllers
{
public class HelloWorldController : Controller
{
public ActionResult Index()
{
return View();
}
public ActionResult Welcome(string name, int numTimes = 1)
{
ViewBag.Message = "Hello " + name;
ViewBag.NumTimes = numTimes;
return View();
}
}
}
Ora l'oggetto ViewBag contiene dati che verranno passati automaticamente alla visualizzazione.
Successivamente, è necessario un modello di visualizzazione iniziale. Nel menu Compila selezionare Compila MvcMovie per assicurarsi che il progetto sia compilato.
Fare quindi clic con il pulsante destro del mouse all'interno del Welcome metodo e scegliere Aggiungi visualizzazione.
Ecco l'aspetto della finestra di dialogo Aggiungi visualizzazione :
Fare clic su Aggiungi e quindi aggiungere il codice seguente nell'elemento <h2> nel nuovo file Welcome.cshtml . Si creerà un ciclo che indica "Hello" quante volte l'utente lo dice. Di seguito è riportato il file Welcome.cshtml completo.
@{
ViewBag.Title = "Welcome";
}
<h2>Welcome</h2>
<ul>
@for (int i=0; i < ViewBag.NumTimes; i++) {
<li>@ViewBag.Message</li>
}
</ul>
Eseguire l'applicazione e passare all'URL seguente:
http://localhost:xx/HelloWorld/Welcome?name=Scott&numtimes=4
I dati vengono ora acquisiti dall'URL e passati al controller usando lo strumento di associazione di modelli. Il controller inserisce i dati in un ViewBag oggetto e passa tale oggetto alla visualizzazione. La visualizzazione visualizza quindi i dati come HTML per l'utente.
Nell'esempio precedente è stato usato un ViewBag oggetto per passare i dati dal controller a una visualizzazione. Quest'ultimo dell'esercitazione userà un modello di visualizzazione per passare i dati da un controller a una vista. L'approccio al modello di visualizzazione per il passaggio dei dati è in genere preferibile rispetto all'approccio del contenitore di visualizzazioni. Per altre informazioni, vedere la voce di blog Dynamic V Fortemente tipizzata viste .
Queste operazioni hanno riguardato un tipo di "M" per modello, ma non il tipo di database. Creare un database di film con i concetti appresi.