MVC Framework - Prima applicazione

Facciamo un salto e creiamo la nostra prima applicazione MVC utilizzando visualizzazioni e controller. Una volta che avremo una piccola esperienza pratica su come funziona un'applicazione MVC di base, impareremo tutti i singoli componenti e concetti nei prossimi capitoli.

Crea la prima applicazione MVC

Step 1- Avvia Visual Studio e seleziona File → Nuovo → Progetto. Selezionare Web → Applicazione Web ASP.NET MVC e denominare questo progetto comeFirstMVCApplicatio. Seleziona la posizione comeC:\MVC. Fare clic su OK.

Step 2- Questo aprirà l'opzione Modello di progetto. Seleziona Modello vuoto e Visualizza motore come Razor. Fare clic su OK.

Ora Visual Studio creerà il nostro primo progetto MVC come mostrato nello screenshot seguente.

Step 3- Ora creeremo il primo controller nella nostra applicazione. I controller sono solo semplici classi C #, che contengono più metodi pubblici, noti come metodi di azione. Per aggiungere un nuovo controller, fare clic con il pulsante destro del mouse sulla cartella Controller nel nostro progetto e selezionare Aggiungi → Controller. Assegna al controller il nome HomeController e fai clic su Aggiungi.

Questo creerà un file di classe HomeController.cs nella cartella Controller con il seguente codice predefinito.

using System; 
using System.Web.Mvc;  

namespace FirstMVCApplication.Controllers { 
   
   public class HomeController : Controller { 
      
      public ViewResult Index() { 
         return View(); 
      }  
   } 
}

Il codice precedente definisce fondamentalmente un indice del metodo pubblico all'interno del nostro HomeController e restituisce un oggetto ViewResult. Nei passaggi successivi impareremo come restituire una visualizzazione utilizzando l'oggetto ViewResult.

Step 4- Ora aggiungeremo una nuova vista al nostro controller domestico. Per aggiungere una nuova vista, fare clic con il pulsante destro del mouse sulla cartella della vista e fare clic su Aggiungi → Visualizza.

Step 5- Assegna un nome alla nuova Visualizza come indice e Visualizza motore come Razor (SCHTML). Fare clic su Aggiungi.

Questo aggiungerà un nuovo file cshtml file all'interno della cartella Views / Home con il seguente codice -

@{ 
   Layout = null; 
}  

<html> 
   <head> 
      <meta name = "viewport" content = "width = device-width" /> 
      <title>Index</title> 
   </head> 

   <body> 
      <div> 
      
      </div> 
   </body> 
</html>

Step 6 - Modifica il contenuto del corpo della vista precedente con il codice seguente -

<body> 
   <div> 
      Welcome to My First MVC Application (<b>From Index View</b>) 
   </div> 
</body>

Step 7- Ora esegui l'applicazione. Questo ti darà il seguente output nel browser. Questo output viene visualizzato in base al contenuto nel nostro file di visualizzazione. L'applicazione chiama prima il Controller che a sua volta chiama questa View e produce l'output.

Nel passaggio 7, l'output che abbiamo ricevuto era basato sul contenuto del nostro file di visualizzazione e non aveva alcuna interazione con il controller. Facendo un passo avanti, creeremo ora un piccolo esempio per visualizzare un messaggio di benvenuto con l'ora corrente utilizzando un'interazione di Visualizza e Controller.

Step 8- MVC utilizza l'oggetto ViewBag per passare i dati tra Controller e View. Aprire HomeController.cs e modificare la funzione Index con il codice seguente.

public ViewResult Index() { 
   int hour = DateTime.Now.Hour; 
             
   ViewBag.Greeting =
   hour < 12  
   ? "Good Morning. Time is" +  DateTime.Now.ToShortTimeString() 
   : "Good Afternoon. Time is " + DateTime.Now.ToShortTimeString(); 
             
   return View(); 
}

Nel codice precedente, impostiamo il valore dell'attributo Saluto dell'oggetto ViewBag. Il codice controlla l'ora corrente e restituisce di conseguenza il messaggio Good Morning / Afternoon utilizzando l'istruzione return View (). Nota che qui Saluto è solo un attributo di esempio che abbiamo usato con l'oggetto ViewBag. È possibile utilizzare qualsiasi altro nome di attributo al posto di Saluto.

Step 9 - Apri Index.cshtml e copia il codice seguente nella sezione body.

<body> 
   <div> 
      @ViewBag.Greeting (<b>From Index View</b>) 
   </div> 
</body>

Nel codice precedente, stiamo accedendo al valore dell'attributo Saluto dell'oggetto ViewBag utilizzando @ (che sarebbe impostato dal controller).

Step 10- Ora esegui di nuovo l'applicazione. Questa volta il nostro codice eseguirà prima il controller, imposterà il ViewBag e quindi lo visualizzerà utilizzando il codice di visualizzazione. Di seguito sarà l'output.