Será un tutorial de MVC.NET, desde el principio a helpers, enrutadores, Linq, EF Code First, KnockOut, SignalR, … Este primer artículo sera introductorio, veremos como hacer un Hola mundo en MVC .NET y que estructura tiene el proyecto que nos crea.
Todos los artículos del tutorial aparecerán aquí
¿Que vamos a ver?
La intención es ir viendo como se hace un CRUD ( Create – Read – Update – Delete ) con MVC .NET a modo de tutorial, con un proyecto concreto e irlo mejorando. Al principio utilizaremos C#, Js/Jquery, Entity Framework Code First y LinQ, pero iremos añadiendo funcionalidades en cuanto se avance un poco. Veremos los enrutadores, helpers, llamadas de ajax, validaciones, … y, por ejemplo, cuando se avance mas, mi intención es poner KnockOut, añadir algo en SignalR, WCF, transpasar nuestra funcionalidad a una Api, … Quiero aprovechar este proyecto cuando este «asentado» para finalizar algún post que tengo con xxxx I: Empezando
¿Que es?
MVC son las siglas de Model View Controller. Básicamente es un patrón desarrollado para escritorio en los 70′ para el desarrollo de escritorio, pero donde se saco provecho es en los últimos años en entorno web. El model obtiene los datos, la vista muestra el código html/js y el controller es el que enlaza todo. Con este patrón el usuario ya no accede directamente a una página web, si no que accede al controller, que obtiene los datos del model si lo necesita y envía esos datos a la vista.
Este patrón no es exclusivo de .NET, lo podemos encontrar en varios lenguajes.
Ventajas
Las ventajas de MVC son bastantes, el código se divide bastante por lo que es más fácil de mantener y hacer nuevos desarrollos, al acceder al controller, y que este nos de el código resultado, también ofrecemos una capa de ofuscación…
Y en .NET conseguimas mas ventajas, tenemos los helpers de razor, si enviamos datos en json desde la vista al controller, se puede traducir automáticamente (tenemos que crear un objeto con esas propiedades y listo), el intellisense de VS, el IDE en general de VS, …
Empezamos
Primero vamos a ver un ejemplo, del típico «hola mundo» y después iré explicando que nos podemos encontrar en este proyecto. Crearemos un proyecto de MCV Empty(Lo iré explicando con MVC 4) y que tenga las plantillas de razor.
Controller
Crearemos un Controller que se llame Compra con una función que se llame ListaCompra, esta devolverá una un listado de objetos en JSON con la compra. Para hacerlo, tenemos que darle botón derecho sobre Controllers y le damos Add/Controller, como nombre le ponemos CompraController ( siempre tiene que llevar la coletilla de Controller) y le indicamos en el Template la opción de Empty controller.
Aquí podemos ver que solo hay una función que se llama Index, esta se ejecutará al llamar al Controller sin parámetros. Lo dejamos tal cual.
View
Crearemos una View para asociarlo con el Controller de Compra. Desplegamos el directorio Views del proyecto y le damos (con el botón derecho) a Agregar/Nueva Carpeta y le llamamos Compra (como el Controller, tiene que ser así), y ahora le damos con el botón derecho a Agregar/View y le llamamos Index (como la función del Controller, y se tiene que llamar igual :) ) y debajo del titulo de Index, ponemos un párrafo con «Hola mundo».
Resultado
Ahora ejecutamos el proyecto y nos saltará un error, es normal, en la url agregamos el nombre del Controller pero sin la coletilla de Controller, en nuestro caso «Compra» y veremos que nos carga la página. Así ya tenemos el Hola mundo ahora vamos a explicar un poco como esta distribuido el proyecto.
Distribución del proyecto.
- Lo primero que nos encontramos son las Properties y References, que son las propiedades y las referencias a dll/proyectos respectivamente.
- Content es un directorio donde tendremos nuestras Css, es para tenerlo organizado.
- Controller es donde estarán todos nuestros Controllers, si en la url no hay ningún Controller, irá a buscar uno que se llama HomeController e irá a buscar la función de Index. Por eso nos saltaba el error antes.
- Models, esto tendrá los objetos tipo Model para devolverlos a la vista. Ya lo veremos mas al detalle.
- Scripts, como deduciréis, es para meter todos los js ahí. Tanto en esta, como en Content recomiendo, si el fichero solo afecta a una View, seguir una estructura como en Views para tenerlo organizado.
- Views es donde están las vistas, el código html/razor. La estructura deberá ser con un directorio llamado como el Controller y después una View con el nombre de la función/acción.
- Dentro de Views tenemos el directorio Shared, aquí tendremos las vistas compartidas ( ya entraré en detalle). Ahora solo tenemos un _Layout.cshtml que, básicamente, solo es una plantilla (contiene el header y le puedes meter el footer, los links de js genericos, css, …), y esta se indica que es la plantilla por el fichero de Views/_ViewStart.cshtml. También tenemos la página de error, si queremos una personalizada, sustituimos esta o la modificamos.
- Aparte en el directorio principal tenemos el Global.asax ( tenemos las rutas y filtros que ya explicaremos), el packages.config (es para Nugget. Nugget es una herramienta que te instala paquetes en tu proyecto, por ejemplo jquery, signalR, etc…) y el Web.Config (Se encarga de permisos de acceso, referencias, constantes, configuraciones, …).
En el siguiente artículo veremos como pasar datos del Controller a la View y viceversa, para continuar con razor, creación de formularios y Entity Framewrok Code First (y más).