Conceptos Básicos MVC Y Primer Web Aplicación Con MVC 4




Conceptos básicos MVC y primer Web Aplicación con MVC 4 (Parte 1)

Este post va dirigido para personas iniciando desde cero en el mundo de MVC .NET, ya que existen otros posts más avanzados donde en la introducción a MVC de una vez pasan a “Creación de credenciales y autenticación”, “Conexión con un Entity Framework”, etc. Pero este post está más dirigido a como llamar y ejecutar Acciones(antes conocidos como eventos) y como manipular los componentes básicos. Y aún mejor, si tienes dudas como, ¿donde son las páginas? ¿Como se invocan las páginas? ¿Qué rayos es un controlador?, etc. A mi, personalmente, no me gusta mucho usar templates de VS donde ya crean muchas cosas por debajo, porque de repente uno no sabe realmente que es lo que están pre-creandole en el proyecto. Y sí, me gustacrear todo a pie from scratch.
Vamos a ir creando esas bases que luego van a permitir pasar a temas más complejos que también voy a tratar de postear en este blog. ¿Por qué MVC?, ¿cómo funciona MVC?, ¿por qué se escucha tanto últimamente de MVC?, ¿es mejor que Web Forms?
¿Por qué MVC? MVC ya lleva años liberado y existe en diversas tecnologías a parte de .NET. MVC permite aislar aún másresponsabilidades dentro de un Web Aplicación, crear aplicaciones más ligeras, trabajar con componentes y frameworks avanzados como jQuery y utilizar un patrón de desarrollo Web que Microsoft está apoyando mucho más ultimamente. Dejando la interfaz gráfica del lado cliente potenciandola además con HTML5 y CSS3. Es, además, altamente testeable; sin dejar de lado la gran potencia que agrega ASP.NETdel ladoservidor.
¿Cómo funciona MVC? El fundamento de MVC es [MODELO] [VISTA] [CONTROLADOR] (Model-View-Controller). Este patrón de arquitectura se basa en PostBacks, es decir, que si vienes de una tecnología como PHP o web pura será muy familiar entrar en MVC.
Componentes: Modelos: Implementan la lógica y acceso a bases de datos. Vistas: Muestran la interfaz de usuario. Controladores: Manejan lainteracción con el usuario. Utiliza los modelos y finalmente envía vistas a pantalla. Ejemplo de un típico uso de MVC ilustrado por mí:Conociendo esa introducción (teoría sobra, y mejor explicada, en internet; por si desean una introducción más detallada). Primero vamos a crear un proyecto en VS, en este caso con 2012.

Vamos a crear un proyecto vacío con un View Engine de “Razor”.
Para los que no hanescuchado hablar de Razor, es una propuesta de Microsoft que salió por ahí del 2011 para Visual Studio 2010, basado en C# o VB.NETpara crear páginas web. Permite incrustar código de lógica dentro del markup del HTML, es decir, que sobre ejecución podemos crear un for dentro del HTML que creen las filas de una tabla. Más adelante vamos a ver un ejemplo.

La base de la aplicación está en las siguientes 3carpetas:

Lo primero que se ocupará será un concepto que se conocía como Master Page. Vamos a crearlo dentro de una carpeta llamada Shared dentro de Views, por convención y como enruta MVC las páginas es el lugar ideal para colocarlos.
Vamos a crear un par de componentes básicos en una sitio web, como lo son el encabezado y el pie de página.
Explicando que contiene la página de abajo: en el tagde Title utilizamos el ViewBag (una de las formas para pasar información o datos desde el controlador a la vista. Esto significa que si el master lo tiene, siempre va a poner en el tag de Title lo que venga en el ViewBag en la propiedad Title. Así podemos ir cambiando el title del sitio dependiendo de la página que estemos.
Creamos un Div para el header, uno para el contenido y otro para elfooter.
En el de contenido ponemos la función RenderBody que se encargará de renderizar lo que tengan las páginas que invoquen al master.
Podemos crear un controlador para esta página maestra, de esta forma, poner contenido dinámico en esta zona.



Aquí un ejemplo de como un Controlador puede enviar datos dinámicamente a una vista:

1.) 
2.) 
3.) 
Lo siguiente sería crear una página default. Por...