Compartir a través de


Agregar un controlador: presenta los conceptos básicos de ASP.NET MVC

por Scott Hanselman

Nota:

Una versión actualizada de este tutorial está disponible aquí mediante Visual Studio 2013. El nuevo tutorial usa ASP.NET MVC 5, que proporciona muchas mejoras en este tutorial.

En este tutorial para principiantes se presentan los conceptos básicos de ASP.NET MVC. Creará una aplicación web sencilla que lea y escriba en una base de datos. Visite el centro de aprendizaje de ASP.NET MVC para encontrar otros tutoriales y ejemplos de ASP.NET MVC.

MVC significa Modelo, Vista, Controlador. MVC es un patrón para desarrollar aplicaciones de forma que cada parte tenga una responsabilidad diferente de otra.

  • Modelo: los datos de la aplicación
  • Vistas: los archivos de plantilla que usará la aplicación para generar dinámicamente respuestas HTML.
  • Controladores: clases que controlan las solicitudes de dirección URL entrantes a la aplicación, recuperan datos del modelo y, a continuación, especifican plantillas de vista que representan una respuesta al cliente.

En este tutorial se tratarán todos estos conceptos y se mostrará cómo usarlos para compilar una aplicación.

Vamos a crear un nuevo controlador haciendo clic con el botón derecho del ratón en la carpeta de controladores del Explorador de soluciones y seleccionando Añadir controlador.

AddControllerRightClick

Asigne a su nuevo controlador el nombre "HelloWorldController" y haga clic en Agregar.

Add Controller Dialog

Observe en el Explorador de soluciones de la derecha que se ha creado un nuevo archivo llamado HelloWorldController.cs y que ese archivo está ahora abierto en el IDE.

HelloWorldControllerCode

Cree dos nuevos métodos con el siguiente aspecto dentro de su nueva clase pública HelloWorldController. Devolveremos una cadena de HTML directamente desde nuestro controlador como ejemplo.

using System.Web.Mvc;
 
namespace Movies.Controllers
{
    public class HelloWorldController : Controller
    {
        public string Index()
        {
            return "This is my default action...";      
        }
        
        public string Welcome()
        {  
            return "This is the Welcome action method...";
        }  
    }
}

Su Controlador se llama HelloWorldController y su nuevo Método se llama Index. Vuelva a ejecutar la aplicación, igual que antes (haga clic en el botón Reproducir o presione F5 para hacerlo). Una vez que su explorador se haya puesto en marcha, cambie la ruta de acceso en la barra de direcciones a http://localhost:xx/HelloWorld, donde xx es el número que haya elegido su equipo. Ahora su explorador debería parecerse a la captura de pantalla siguiente. En nuestro método anterior devolvimos una cadena pasada a un método llamado "Content". Le dijimos al sistema que solo devolviera algo de HTML, ¡y así fue!

ASP.NET MVC invoca diferentes clases de controlador (y diferentes métodos de acción dentro de ellas) en función de la URL entrante. La lógica de asignación predeterminada que utiliza ASP.NET MVC usa un formato como este para controlar qué código se ejecuta:

/[Controller]/[ActionName]/[Parameters]

La primera parte de la URL determina la clase de controlador que se ejecutará. Así, /HelloWorld se asigna a la clase HelloWorldController. La segunda parte de la dirección URL determina el método de acción en la clase que se va a ejecutar. Así, /HelloWorld/Index provocaría la ejecución del método Index() de la clase HelloWorldController. Observe que anteriormente solo teníamos que visitar /HelloWorld y el método Index estaba implícito. Esto se debe a que un método llamado "Index" es el método predeterminado que se llamará en un controlador si no se especifica uno explícitamente.

This is my default action

Ahora, visitemos http://localhost:xx/HelloWorld/Welcome. Ahora nuestro método de bienvenida se ha ejecutado y ha devuelto su cadena HTML.

De nuevo, /[Controller]/[ActionName]/[Parameters] por lo que Controller es HelloWorld y Welcome es el método en este caso. Aún no hemos abordado los Parámetros.

This is the Welcome action method

Modifiquemos ligeramente nuestro ejemplo para que podamos pasar alguna información de la URL a nuestro controlador, por ejemplo, así: /HelloWorld/Welcome?name=Scott&numtimes=4. Cambie su método Welcome para que incluya dos parámetros y actualícelo como se indica a continuación. Observe que hemos usado las características de parámetro opcional de C# para indicar que el parámetro numTimes debería estar predeterminado en 1 si no se pasa.

public string Welcome(string name, int numTimes = 1)
{
   string message = "Hello " + name + ", NumTimes is: " + numTimes;
   return "" + Server.HtmlEncode(message) + "";
}

Ejecute su aplicación y visite http://localhost:xx/HelloWorld/Welcome?name=Scott&numtimes=4 cambiando el valor de name y numtimes como quiera. El sistema ha asignado automáticamente los parámetros con nombre de su cadena de consulta en la barra de direcciones a los parámetros de su método.

En estos dos ejemplos el controlador ha estado haciendo todo el trabajo, y ha estado devolviendo HTML directamente. Normalmente no queremos que nuestros controladores devuelvan HTML directamente, ya que eso termina siendo muy complicado para el código. En su lugar, usaremos normalmente un archivo de plantilla de vista independiente para ayudar a generar la respuesta HTML. Veamos cómo podemos hacerlo. Cierre el explorador y vuelva al IDE.