MVC Framework - Primera aplicación

Saltemos y creemos nuestra primera aplicación MVC usando Vistas y Controladores. Una vez que tengamos una pequeña experiencia práctica sobre cómo funciona una aplicación MVC básica, aprenderemos todos los componentes y conceptos individuales en los próximos capítulos.

Crear la primera aplicación MVC

Step 1- Inicie su Visual Studio y seleccione Archivo → Nuevo → Proyecto. Seleccione Web → Aplicación web ASP.NET MVC y nombre este proyecto comoFirstMVCApplicatio. Seleccione la ubicación comoC:\MVC. Haga clic en Aceptar.

Step 2- Esto abrirá la opción Plantilla de proyecto. Seleccione Plantilla vacía y Ver motor como Razor. Haga clic en Aceptar.

Ahora, Visual Studio creará nuestro primer proyecto MVC como se muestra en la siguiente captura de pantalla.

Step 3- Ahora crearemos el primer controlador en nuestra aplicación. Los controladores son simples clases de C #, que contienen múltiples métodos públicos, conocidos como métodos de acción. Para agregar un nuevo controlador, haga clic con el botón derecho en la carpeta Controladores en nuestro proyecto y seleccione Agregar → Controlador. Nombre el controlador como HomeController y haga clic en Agregar.

Esto creará un archivo de clase HomeController.cs en la carpeta Controladores con el siguiente código predeterminado.

using System; 
using System.Web.Mvc;  

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

El código anterior básicamente define un índice de método público dentro de nuestro HomeController y devuelve un objeto ViewResult. En los siguientes pasos, aprenderemos cómo devolver una vista usando el objeto ViewResult.

Step 4- Ahora agregaremos una nueva vista a nuestro controlador de inicio. Para agregar una nueva vista, haga clic con el botón derecho en la carpeta de vista y haga clic en Agregar → Ver.

Step 5- Nombra la nueva vista como índice y el motor de vista como Razor (SCHTML). Haga clic en Agregar.

Esto agregará un nuevo cshtml archivo dentro de Vistas / carpeta de inicio con el siguiente código:

@{ 
   Layout = null; 
}  

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

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

Step 6 - Modifique el contenido del cuerpo de la vista anterior con el siguiente código -

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

Step 7- Ahora ejecuta la aplicación. Esto le dará la siguiente salida en el navegador. Esta salida se procesa en función del contenido de nuestro archivo Ver. La aplicación primero llama al controlador, que a su vez llama a esta vista y produce la salida.

En el paso 7, la salida que recibimos se basó en el contenido de nuestro archivo de vista y no tuvo interacción con el controlador. Dando un paso hacia adelante, ahora crearemos un pequeño ejemplo para mostrar un mensaje de bienvenida con la hora actual usando una interacción de Vista y Controlador.

Step 8- MVC usa el objeto ViewBag para pasar datos entre Controller y View. Abra HomeController.cs y edite la función de índice con el siguiente código.

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(); 
}

En el código anterior, establecemos el valor del atributo Saludo del objeto ViewBag. El código verifica la hora actual y devuelve el mensaje de Buenos días / Tardes según corresponda mediante la instrucción return View (). Tenga en cuenta que aquí Greeting es solo un atributo de ejemplo que hemos usado con el objeto ViewBag. Puede utilizar cualquier otro nombre de atributo en lugar de Saludo.

Step 9 - Abra Index.cshtml y copie el siguiente código en la sección del cuerpo.

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

En el código anterior, estamos accediendo al valor del atributo de saludo del objeto ViewBag usando @ (que se establecería desde el controlador).

Step 10- Ahora ejecute la aplicación nuevamente. Esta vez, nuestro código ejecutará el controlador primero, configurará ViewBag y luego lo renderizará usando el código de vista. Lo siguiente será la salida.

↰ Previous page Next page ↱