Conceptos bsicos

MVC y primer Web

Application 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 ms avanzados donde en la introduccin a MVC de una vez
pasan a Creacin de credenciales y autenticacin, Conexin con un Entity
Framework, etc. Pero este post est ms dirigido a como llamar y ejecutar Acciones
(antes conocidos como eventos) y como manipular los componentes bsicos. Y an
mejor, si tienes dudas como, donde son las pginas? Como se invocan las pginas?
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 estn pre-creandole en el proyecto. Y s, me gusta crear
todo a pie from scratch.

Vamos a ir creando esas bases que luego van a permitir pasar a temas ms complejos
que tambin voy a tratar de postear en este blog. Porqu MVC?, como funciona
MVC?, porqu se escucha tanto ltimamente de MVC?, es mejor que Web Forms?

Porqu MVC? MVC ya lleva aos liberado y existe en diversas tecnologas a parte
de .NET. MVC permite aislar an ms responsabilidades dentro de un Web Application,
crear aplicaciones ms ligeras, trabajar con componentes y frameworks avanzados
como jQuery y utilizar un patrn de desarrollo Web que Microsoft est apoyando
mucho ms ultimamente. Dejando la interfaz grfica del lado cliente potenciandola
adems con HTML5 y CSS3. Es, adems, altamente testeable; sin dejar de lado la gran
potencia que agrega ASP.NETdel lado servidor.
Como funciona MVC? El fundamento de MVC es [MODELO] [VISTA]
[CONTROLADOR] (Model-View-Controller). Este patrn de arquitectura se basa en
PostBacks, es decir, que si vienes de una tecnologa como PHP o web pura ser muy
familiar entrar en MVC.

Componentes: Modelos: Implementan la lgica y acceso a bases de datos. Vistas:

Muestran la interfaz de usuario. Controladores: Manejan la interaccin con el usuario.
Utiliza los modelos y finalmente enva vistas a pantalla. Ejemplo de un tpico uso de
MVC ilustrado por mi:
Conocie
ndo esa introduccin (teora sobra, y mejor explicada, en internet; por si desean u
na introd

Vamos a crear un proyecto vaco con un View Engine de Razor.

Para los que no han escuchado 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
pginas web. Permite incrustar cdigo de lgica dentro del markup del HTML, es decir,
que sobre ejecucin podemos crear un for dentro del HTML que creen las filas de una
tabla. Ms adelante vamos a ver un ejemplo.
La base de la aplicacin est en las siguientes 3 carpetas:

Lo primero que se ocupar ser un concepto que

se conoca como Master Page. Vamos a crearlo dentro de una carpeta llamada Shared
dentro de Views, por convencin y como enruta MVC las pginas es el lugar ideal para
colocarlos.

Vamos a crear un par de componentes bsicos en una sitio web, como lo son el
encabezado y el pie de pgina.
Explicando que contiene la pgina de abajo: en el tag de Title utilizamos el ViewBag
(una de las formas para pasar informacin 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 pgina que estemos.

Creamos un Div para el header, uno para el contenido y otro para el footer.

En el de contenido ponemos la funcin RenderBody que se encargar de renderizar lo

que tengan las pginas que invoquen al master.

Podemos crear un controlador para esta pgina maestra, de esta forma, poner
contenido dinmico en esta zona.

Aqu un ejemplo de como un Controlador puede enviar datos dinmicamente a una

vista:

1.)
2.)

3.)

Lo siguiente sera crear una pgina default. Por convencin se crean las pginas
principales en un controlador llamado Home entonces lo primero sera crear el
controlador y que el se encargue de crear sus pginas.

Al igual que se cre el controlador anterior lo creamos, ponemos de nombreHome y

dentro de l, damos clic sobre el index y creamos una vista con un texto. Agregu un
simple CSS para mostrar como se visualizan los componentes.

En el HTML:
Ya podemos correr la aplicacin y obtendremos lo siguiente:

As terminara este primer post, en el siguiente vamos a ver como utilizar el modelo y
pasar datos a las vistas.

Conceptos bsicos
MVC y primer Web
Application con MVC 4
(Parte 2)

16 MartesJUL 2013
POSTED BY WALTER MONTES IN C#, MVC .NET, UNCATEGORIZED, WEB
2 COMENTARIOS
Etiquetas
basico mvc, mvc .net,mvc 4, mvc desde cero
En el Post anterior vimos un poco lo que es la introduccin a MVC, creamos un
proyecto bsico y un par de vistas interactuando con el controlador. Hasta pasamos
contenido desde un controlador a una vista de Layout.
Ahora vamos a ver como entra en juego el Modelo y como interactua con Razor para
crear lgica dentro de nuestra pgina.
Vamos a crear un objeto sencillo. Podemos ubicarlos dentro de la carpeta deModels en
una carpeta de entidades.

Lo que vamos a hacer ahora es meterlo en una nueva vista y crear un dropdownlist
con los datos de una coleccin de objectos de Producto. De igual forma que las vistas
anteriores se crea, clic derecho sobre Controllers, le ponemos ProductController,
damos click derecho sobre Index y creamos una vista.

Podemos pasar los datos por medio del ViewBag, ya que son pocos. Ms adelante
vamos a ver otros modos de pasar datos a las vistas.

El ViewBag, por si no lo han notado an, es dinmico, es decir, no importa lo que se le

pase el lo verifica hasta ejecutar. Podemos crear propiedades sobre el vuelo sin
necesidad de definirlas previamente. Ejemplo:

El controlador lo que har es invocar a la pgina que est ligada a Index dentro de
Product y pasarle los datos del ViewBag. En este caso la lista de Productos.
Pasamos los datos de manera quemada pero ms adelante podemos hacerlos
dinmicos y tomarlos desde una base de datos a travs de un Servicio de Datos creado
dentro de los modelos u otro proyecto.

En la vista que est ligada a este controlador hacemos lo siguiente:

Y el resultado es el siguiente:
Como pueden ver, Razor renderiza todo el cdigo .NET en puro HTML segn la funcin
creada.

Y genial, as logramos (de una de las muchas formas que se puede) pasar datos a una
vista, pero, y al revs? de una vista a un controlador para poder manipular los datos
ingresados por el usuario.

Para eso existen los forms dentro del helper de Html.

Se crea de la siguiente manera primero creamos otra vista, entonces vamos al

controller de productos, creamos una nueva funcin ActionView y hacemos lo
siguiente:

En el controlador de Productos:
Luego damos click sobre Nuevo y agregamos una vista.

En la vista de Index de Productos para poder acceder a la nueva vista:

Vamos a tomar ventaja de una nueva caracterstica que viene con MVC, los
DataAnnotations, con esto personalizamos el objeto y le damos propiedades para el
comportamiento en la vista. (Si no lo conocas vas a encontrarlo fascinante!). (Las
propiedades entre corchetes sobre cada propiedades del objeto).
Y en la nueva vista creamos el formulario y reflejamos esas nuevas propiedades que le
dimos al objeto:

Ahora solo hace falta en el controlador quien reciba el submit.

Y as hemos logrado comunicacin desde el controlador hacia la vista y viceversa!

En el prximo post voy a tratar temas un poco ms avanzados, siguiendo la lnea de
este proyecto.

Parte 3

Conceptos bsicos
MVC y primer Web
Application con MVC 4
(Parte 3)

16 MartesJUL 2013

POSTED BY WALTER MONTES IN C#, HTML5, MVC .NET, UNCATEGORIZED,WEB

1 COMENTARIO

Etiquetas

.net errores, ejemplo mvc, html, html5,manejar errores mvc,mvc 4, mvc basico, mvc errores, pagina
mvc,partial view, partialview mvc, web config errores, web workers

En el Post anterior ya vimos como pasar datos por medio del ViewBag, crear
dropdownlists, crear formularios y comunicacin en ambos lados entre el Controller y
las vistas.
En esta oportunidad vamos a ver otras propiedades de MVC importantes que facilitan
la vida desarrollando
Componentes tiles:

_ViewStart.cshtml: El ViewStart es un componente que por convencin es

llamado para verificar que Master Page o Layout se utilizar para las pginas.
Como vimos anteriormente, lo que hacamos era en cada pgina colocarle que
utilizara el Layout.
Layout = "~/Views/Shared/_Layout.cshtml";

Pero si se define esto en el archivo _ViewStart.cshtml todas las pginas que no

tengan esa sentencia definida utilizarn por defecto la que se defina en el
archivo _ViewStart.cshtml. Solo basta con crearlo y poner una pequea
sentencia y borrarla de las dems pginas, ya que por default utilizarn esta que

define este objeto.

HTML5: podemos tambin empezar a echar mano de algunas ventajas que nos
trae HTML5, como la nueva semntica, por si no han odo de la misma, es una
ayuda a los desarrolladores para tener componentes con tags ms acorde a su

funcin. Algunos son: Esto para la pgina maestra

 Layout.cshtml. Por supuesto, como toda la UI se renderiza a punta de HTML, no
hay limitantes en utilizar HTML5, CSS3, jQuery, JavaScript.

Vistas Parciales:

Las vistas parciales permiten incrustar secciones de pginas en otras, como por
ejemplo, el tpico login en el header de las pginas, que cuando uno se loggea
aparece su usuario. Cosas de este tipo nos permiten las vistas parciales. Cmo se
crean? No tienen mucha ciencia por debajo, son simples vistas pero que son llamadas
de distinta manera y no utilizan el marco o pgina maestra.

En este ejemplo voy a usar otra de las nuevas caractersticas de HTML5 que son
los Web Workers, (procesos de JavaScript que pueden correr encicladamente sin
afectar el performance del resto de la pgina o hacerla esperar a que termine.) Pero
bien, puede ser un texto quemado, algo desde la base de datos actualizado con su
controller o una imagen dinmica.

Aqu va mi ejemplo, un reloj en el header de la pgina:

JavaScript a correr con el Web Worker

Web Worker

Llamada en _layout del PartialView

Resultado

Y el web worker sigue corriendo ah actualizandonos la hora dentro de un Partial View.

Como la finalidad de esta serie de posts es aprender que se puede hacer/programar en
MVC 4 (no es que se puede insertar pre hecho) vamos a ver como personalizar pginas
de error y crear una autenticacin personalizada desde CERO.
S, ya s que se puede usar la autenticacin que .NET da por default por forms o
windows y que se puede usar las pginas error default de un proyecto de MVC, as
como se pueden crear vistas pre fabricadas para Entity Framework, pero no vamos a
ver eso en este post

Pginas de error

Como mencion en el primer post, MVC es bsicamente UI = browser / SERVER =

.NET, podemos configurar pginas de error como en cualquier otro web app de .NET, ya
sea forms o MVC, a travs del web.config.

Creamos un controlador para manejar esos errores del sistema y si se requiere

registrarlos en una bitcora para poder monitorear el comportamiento de nuestro sitio
o aplicacin web.

Nuevamente creamos las pginas de los ActionResult, clic derecho sobre el nombre
(NotFound()) y crear vista. Igual para ServerError y todas las que se deseen
personalizar. Y creamos las vistas.
Solamente falta configurar el web.config acorde a nuestras vistas de error

Corramos la aplicacin y forcemos a que ocurra un 404 para ver nuestro manejador de
errores en accin.
De esta forma, el controlador nos permite manejar las excepciones y que nuestra
pgina no presente errores genricos, sin personalizacin y que lo que logran es
asustar a los usuarios.

En el prximo post vamos a ver como configurar la autenticacin desde cero es decir,
que si uno quiere autenticarse a travs de los datos de XML se puede hacer y no
depender de un solo mtodo como Windows Authentication o Forms que pone .NET por
default.