Nota
L'accesso a questa pagina richiede l'autorizzazione. È possibile provare ad accedere o modificare le directory.
L'accesso a questa pagina richiede l'autorizzazione. È possibile provare a modificare le directory.
Questa è un'esercitazione per principianti che presenta le nozioni di base di ASP.NET MVC. Si creerà una semplice applicazione Web che legge e scrive da un database. Visitare il centro di apprendimento MVC ASP.NET per trovare altre esercitazioni e esempi di MVC ASP.NET.
In questa sezione verrà illustrato come è possibile usare la classe HelloWorldController per incapsulare correttamente la generazione di risposte HTML a un client.
Si inizierà usando un modello View con il metodo Index. Il metodo è denominato Index ed è presente in HelloWorldController. Attualmente il metodo Index() restituisce una stringa con un messaggio hardcoded all'interno della classe Controller.
public string Index()
{
return "<html><body>This is my default action...</body></html>";
}
A questo punto, modificare il metodo Index in modo che sia simile al seguente:
public ActionResult Index()
{
return View();
}
Aggiungere ora un modello View al progetto che è possibile usare per il metodo Index(). A tale scopo, fare clic con il pulsante destro del mouse in un punto centrale del metodo Index e scegliere Aggiungi visualizzazione...
Verrà visualizzata la finestra di dialogo "Aggiungi visualizzazione" che offre alcune opzioni per la creazione di un modello di visualizzazione che può essere usato dal metodo Index. Per il momento, non modificare nulla e fare clic sul pulsante Aggiungi.
Dopo aver fatto clic su Aggiungi, verrà visualizzata una nuova cartella e un nuovo file nella cartella della soluzione, come illustrato qui. Ora ho una cartella HelloWorld in Views e un file Index.aspx all'interno di tale cartella.
Il nuovo file di indice è già aperto e pronto per la modifica. Aggiungere un testo sotto il primo <indice< h2>/h2>, ad esempio "Hello World".
<h2>Index</h2>
Hello world!
Eseguire l'applicazione e visitare http://localhost:xx/HelloWorld di nuovo nel browser. Il metodo Index nel controller in questo esempio non ha eseguito alcuna operazione, ma ha chiamato "return View()" che indicava che si voleva usare un file modello di visualizzazione per eseguire il rendering di una risposta al client. Poiché non è stato specificato in modo esplicito il nome del file modello di visualizzazione da usare, ASP.NET MVC ha usato il file di visualizzazione Index.aspx all'interno della cartella \Views\HelloWorld. Ora viene visualizzata la stringa hardcoded nella visualizzazione.
Sembra abbastanza buono. Si noti tuttavia che il titolo del browser indica "Index" e il titolo grande nella pagina indica "My MVC Application". Cambiamo quelli.
Modifica di visualizzazioni e pagine master
Prima di tutto, modificare il testo "My MVC Application". Il testo viene condiviso e visualizzato in ogni pagina. Viene effettivamente visualizzato in un'unica posizione nel codice, anche se si trova in ogni pagina dell'app. Passare alla cartella /Views/Shared nel Esplora soluzioni e aprire il file Site.Master. Questo file è denominato pagina master ed è la "shell" condivisa usata da tutte le altre pagine.
Si noti un testo che indica ContentPlaceholder "MainContent" in questo file.
<asp:ContentPlaceHolder ID="MainContent" runat="server" />
Tale segnaposto è la posizione in cui verranno visualizzate tutte le pagine create, "incapsulate" nella pagina master. Provare a modificare il titolo, quindi eseguire l'app e visitare più pagine. Si noterà che una modifica viene visualizzata in più pagine.
<div id="title">
<h1>My MVC Movie Application</h1>
</div>
Ora ogni pagina avrà l'intestazione primaria, ovvero H1, di "My MVC Movie Application". Che gestisce il testo bianco nella parte superiore in cui è condiviso tra tutte le pagine.
Di seguito è riportato site.master nel suo insieme con il titolo modificato:
<%@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>
<link href="../../Content/Site.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="page">
<div id="header">
<div id="title">
<h1>My MVC Movie Application</h1>
</div>
<div id="logindisplay">
<% Html.RenderPartial("LogOnUserControl"); %>
</div>
<div id="menucontainer">
<ul id="menu">
<li><%: Html.ActionLink("Home", "Index", "Home")%></li>
<li><%: Html.ActionLink("About", "About", "Home")%></li>
</ul>
</div>
</div>
<div id="main">
<asp:ContentPlaceHolder ID="MainContent" runat="server" />
<div id="footer">
</div>
</div>
</div>
</body>
</html>
A questo punto, modificare il titolo della pagina Indice.
Aprire /HelloWorld/Index.aspx. Ci sono due posti da cambiare. Prima di tutto, il titolo visualizzato nel titolo del browser, quindi l'intestazione secondaria, ovvero H2, anche. Li renderà leggermente diversi, in modo da poter vedere quale parte dell'app cambia un bit di codice.
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
Movie List
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<h2>My Movie List</h2>
Hello World!
</asp:Content>
Eseguire l'app e visitare /Movies. Si noti che il titolo del browser, l'intestazione primaria e le intestazioni secondarie sono state modificate. È facile apportare grandi modifiche all'app con piccole modifiche alla visualizzazione.
Il nostro piccolo "dati" (in questo caso il messaggio "Hello World!" è stato hardcoded. Sono disponibili V (visualizzazioni) e C (controller), ma non m (modello). Verrà illustrato brevemente come creare un database e recuperare i dati del modello da esso.
Passaggio di un viewModel
Prima di passare a un database e parlare di Modelli, tuttavia, parliamo prima di tutto di "ViewModels". Si tratta di oggetti che rappresentano ciò che un modello di visualizzazione richiede per eseguire il rendering di una risposta HTML a un client. In genere vengono creati e passati da una classe Controller a un modello di visualizzazione e devono contenere solo i dati richiesti dal modello Di visualizzazione e non più.
In precedenza con l'esempio HelloWorld, il metodo di azione Welcome() ha preso un nome e un parametro numTimes e lo restituisce nel browser. Invece di fare in modo che il controller continui a eseguire direttamente il rendering di questa risposta, si creerà invece una piccola classe per contenere i dati e quindi passarli a un modello di visualizzazione per eseguire il rendering della risposta HTML usandola. In questo modo il controller è interessato da un elemento e dal modello di visualizzazione, consentendo di mantenere la "separazione pulita delle preoccupazioni" all'interno dell'applicazione.
Tornare al file HelloWorldController.cs e aggiungere una nuova classe "WelcomeViewModel" e modificare il metodo Welcome all'interno del controller. Ecco il file HelloWorldController.cs completo con la nuova classe nello stesso file.
using System.Web.Mvc;
namespace Movies.Controllers
{
public class HelloWorldController : Controller
{
public ActionResult Index()
{
return View();
}
public ActionResult Welcome(string name, int numTimes = 1)
{
var viewModel = new WelcomeViewModel
{
Message = "Hello " + name,
NumTimes = numTimes
};
return View(viewModel);
}
public class WelcomeViewModel
{
public string Message { get; set; }
public int NumTimes { get; set; }
}
}
}
Anche se si trova su più righe, il metodo Welcome è davvero solo due istruzioni di codice. La prima istruzione inserisce i due parametri in un oggetto ViewModel e il secondo passa l'oggetto risultante alla vista.
A questo momento è necessario un modello di visualizzazione di benvenuto. Fare clic con il pulsante destro del mouse sul metodo Welcome e scegliere Aggiungi visualizzazione. Questa volta, si verificherà "Crea una visualizzazione fortemente tipizzata" e si seleziona la classe WelcomeViewModel dall'elenco a discesa. Questa nuova visualizzazione conoscerà solo WelcomeViewModels e nessun altro tipo di oggetti.
NOTA: dopo aver aggiunto WelcomeViewModel per essere visualizzato nell'elenco a discesa, sarà necessario aver compilato una sola volta.
Ecco l'aspetto della finestra di dialogo Aggiungi visualizzazione. Fare clic sul pulsante Aggiungi.
Aggiungere questo codice sotto h2 <> nel nuovo welcome.aspx. Si creerà un ciclo e si dirà Hello quante volte l'utente dice che dovremmo!
<% for(int i=0;i<Model.NumTimes;i++) { %>
<%h3><%: Model.Message %></h3>
<% } %>
Si noti anche che durante la digitazione, poiché è stato detto a questa visualizzazione di WelcomeViewModel (sono sposati, ricordate?) che si ottiene utile IntelliSense ogni volta che si fa riferimento all'oggetto Model come illustrato nello screenshot seguente:
Eseguire l'applicazione e visitare http://localhost:xx/HelloWorld/Welcome?name=Scott&numtimes=4 di nuovo. Ora si recuperano i dati dall'URL, vengono passati automaticamente al controller, il controller inserisce i dati in un viewModel e lo passa alla visualizzazione. La visualizzazione di visualizza i dati come HTML per l'utente.
Beh, questo è stato un tipo di "M" per Model, ma non il tipo di database. Verranno ora illustrati i concetti appresi e viene creato un database di film.