Andres Felipe Blog's

My WordPress Blog

Aprendiendo .NET MVC 4 [Parte 1] – Creación de Controladores y Vistas

aprendiendo-net-mvc4Hola a todos, no hace poco empece a sumergirme en el mundo de DOT NET, por simple curiosidad; nada mas !!. Inicia con algunas investigaciones y después de instalar una maquina virtual con Windows 7 y descargarme el Visual Studio Web Express, me embarque en una nueva aventura de aprender un poco de las tecnologías de Microsoft. A pesar de que soy un gran defensor del software libre, ustedes pensaran ¿que diablos hago estudiando .NET?; la razón es sencilla, la demanda de profesionales en Colombia que dominen este tipo de tecnología es muy alta (las otras son JAVA y PHP) y los sueldos son muy bien remunerados y mejora si se obtiene un certificado de la escuela de Microsoft.

Pues bien dejemos tanto boa bla bla y entremos en acción 🙂

El tutorial del dia de hoy es sencillo, simplemente les voy a ilustrar como crear un proyecto .NET MVC en la version 4 y como empezar a interactuar con los controladores y su respectiva vista. Es importante tener claro el concepto de MVC (revisa Wikipedia) pues básicamente el Framework de .NET se basa en su totalidad en este patron de diseño y la finalidad de este articulo no hablar sobre MVC. No queda mas que decir y bienvenidos a este humilde tutorial.

aprendiendo-net-mvc4

Img 1

Entonces abrimos Visual Studio Web Express 2012 y seleccionamos Nuevo Proyecto, después se selecciona un proyecto de tipo Aplicación web ASP.NET MVC 4 y le ponemos cualquier nombre; en mi caso “AprendiendoMVC4” (img 1), esperamos unos segundos… hasta que se nos presente la siguiente pantalla.

aprendiendo-net-mvc4

Img 2

En esta sección (img 2) es necesario activar en el Motor de Vista: “Razor” (ASP.NET Razor View Engine) que nos ayudara en el diseño de vistas, seleccionar el Marco de Pruebas Visual Studio Unit Test y por ultimo seleccionar el tipo de proyecto Basico. Este tipo de proyecto ya viene diseñado para empezar a trabajar y es el que recomiendo usar. Esperamos unos segundos.

Ahora voy a explicar en que consiste o como se compone un proyecto ASP.NET MVC, básicamente lo que hace el Framework es crear un conjunto de carpetas y archivos organizadas de forma estricta, es necesario y recomendable mantener este orden ya que se garantizara una buena organización del proyecto y sera muy fácil para otros desarrolladores contextualizar el código.

aprendiendo-net-mvc4

Img 3

Esta es la primera imagen que se vera una vez se haya creado el proyecto, en la parte derecha se puede observar la estructura de directorios divido en App_Data, App_Start, Content, Controllers, Models, Scripts, Views y algunos archivos de configuración. Para este articulos nos centraremos en tres directorios únicamente. En las carpetas Cotrollers, Views y App_Start, respectivamente la primera almacena las clases controladores, la segunda las vistas (Razor) y la tercera almacena una clase llamada RouteConfi.cs utilizada para parametrizar el enrutamiento del proyecto.

Crear una Clase Controladora (Controller)

aprendiendo-net-mvc4

Img 4

Para crea un clase de este tipo, se hace de una forma muy sencilla; simplemente debemos seguir los siguientes paso:

  1. Hacer click derecho en la carpeta llamada Controllers
  2. Agregar > Controlador (ver Img 4)
  3. Se abrira otra ventana que nos solicitara el nombre del controlador.
  4. Por estándar y orden es necesario dejar el sufijo Controller, entonces la clase la llamare HolaController.
  5. Por ultimo Agregar y esperar unos segundos.

Esta es la estructura que genera el Framework:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace AprendiendoMVC4.Controllers
{
    public class HolaController : Controller
    {
        //
        // GET: /Hola/

        public ActionResult Index()
        {
            return View();
        }

        public ActionResult HolaMundo() {

            return View();
        }

    }
}

Las funciones o métodos de la clase controlador se dominan Acciones y en C# se definen con la clase ActionResult, en el código anterior definí una nueva acción llamada HolaMundo y retorna la vista View(), ¿ahora que nos falta? la vista.

Crear una Vista (View)

Pues bien, como existe una carpeta para almacenar las clases controladores, también existe una carpeta para almacenar las vistas; esta directorio se llama Views y para crear una vista se debe realizar los siguientes pasos:

  1. Desde la clase controladora, hacer click derecho sobre el nombre de la acción, en mi caso sobre HolaMundo() (ver Img 5)
  2. Seleccionar Agregar Vista y esperar unos segundos.
  3. Ahora no preguntara el nombre la vista y el motor de plantillas, lo dejamos por defecto y Agregar.
aprendiendo-net-mvc4

Img 5

Después de seguir estos pasos, le voy a explicar que hace el Framework. ASP.NET crea en la carpeta Views una capeta con el nombre del controlador (en mi caso Hola) y dentro de ella genera un archivo con el mismo nombre de la acción HolaMundo.cshtml, esta es la estructura del archivo:

@{
    ViewBag.Title = "HolaMundo";
}

<h2>HolaMundo</h2>

Ahora ¿como ejecuto un proyecto ASP.NET MVC 4? Vamos a la opción Compilar > Compilar Solución y después ejecutar, todo se puede hacer mas rápido oprimiendo la tecla F5, se abrirá el navegador por defecto mostrando el proyecto WEB. Este proceso puede tomar varios segundos.

aprendiendo-net-mvc4

Img 6

Por defecto, al ejecutar el proyecto no va ha encontrar la pagina por defecto y aparecerá un error de ejecución, pero ahora ¿como ejecuto el controlador? pues bien si recuerdan, mencione una carpeta llamada App_Start en donde se encuentra un archivo llamado RouteConfig.cs; en este archivo se define las rutas del sistema y por defecto el Framework define la siguiente mapeo:

{controller}/{action}/{id}. 

Entonces, para ejecutar nuestro controlador se debe hacer de la siguiente forma http://localhost:8080/Hola/HolaMundo (ahi que recordar que el puerto es un numero aleatorio que asigna el RUNTIME, puede cambiar) y finalmente obtendremos el resultado esperado (ver Img 7).

aprendiendo-net-mvc4

img 7

En el proximo articulo hare una pequeña reseña de como pasar valores del controlador a la vista, por medio de la clase ViewBag. Ya en para concluir en este articulo se describió como crear un proyecto ASP.NET MVC 4, también la creación de un controlador sencillo y su respectiva vista. Espero que el presente post sea de mucha ayuda y recuerden dejar sus preguntas que responderé lo mas rápido posible.

Un abrazo desarrolladores y nos encontraremos en la próxima … Chao !! 😉

Anterior

Lectura preliminar para realizar estudios en sistemas complejos

Siguiente

UML en 24 Horas [Hora 1] – Conceptos generales

  1. Miguel Ocampo

    excelente articulo, gracias !!!

  2. Hola amigo, recien estoy comenzando a aprender la programacion web y se me hizo muy amigable tu explicacion. Sigue asi!

  3. Daniel

    Hola Andres, muy buen tutorial , muchas gracias desde Argentina

  4. Aixa

    Hola Andres, una consulta estoy tratando de crear un vista y aparece “PROBLEMA AL OBTENER EL APPDOMAIN PARA EJECUTAR LA TRANSFORMACIÓN DESDE EL HOST. ” me podrás dar alguna idea de como solucionar este problema.

    Saludos

  5. SAQUEO Z. G.

    Excelente explicación amigo.

  6. Excelente forma de compartir conocimientos.
    Saludos

  7. Buenas noches, saludos. Donde debo colocar esto: http://localhost:8080/Hola/HolaMundo ?

  8. Le faltaria agregar una parte del código en la parte del controlador :

    return View(“/Views/HolaMundo.cshtml”);

    sin eso , al llamarse a la vista este generario un error

  9. Fabio Adolfo

    Buen tutorial, cuando compile y me salio el error, ya iba a empezar a revisar el IIS hasta que leí y vi que era deliberado para entender el enrutamiento, muy bueno.

  10. EXcelnte articulo amigo, muchas gracias por la explicación, espero sigas ayudándonos con tus explicaciones

Deja un comentario

Creado con WordPress & Tema de Anders Norén