En este artículo vamos a crear una sencilla aplicación MVC y a subirla a Azure.
Actualmente MVC va por la versión 6 que se corresponde a ASP.Net Core (Que permite desarrollar para correr los aplicativos en Linux y Mac). En este artículo se va a ver MVC 5 correspondiente con la versión de .Net Framework 4.6.2.
El modelo o patrón MVC consiste en separar el código de nuestra aplicación en tres componentes:
- Modelo: Gestiona el acceso y manipulación de la información (datos) de la aplicación.
- Controlador: Actual de puente entre el Modelo y la Vista comunicando ambos.
- Vista: «Pinta» el contenido recibido por el controlador. Es dónde se interactúa con el usuario. También obtiene información del usuario y la envía al controlador.
¿Y dónde colocamos la lógica de negocio? Desde mi punto de vista no debemos intentar relacionar directamente los tres componentes de MVC (Vista, Controlador y Modelo) con el desarrollo clásico de 3 capas (presentación, negocio y datos). Si es cierto, que nuestra lógica de negocio no va a estar en la Vista, ya que es la que pinta y recoje datos al usuario. Podemos tener lógica de negocio en el controlador (por ejemplo para transformar los datos del modelo y presentarlos en la vista, o recoger y procesar datos de la vista y guardarlos en nuestro modelo de datos) y en el modelo también podemos tener lógica de negocio (por ejemplo para gestionar los permisos de acceso a los datos).
Los lenguajes utilizados en cada componente son distintos, según si estamos codificando en un componente que está en el lado del cliente (View) o en el lado de servidor (Model & Controller)
Lenguajes MVC 5:
- Lado cliente (Vista)
- HTML
- CSS
- JavaScript
- Razor (Lenguaje de servidor para pintar contenido e interacturar con el controlador)
- Lado servidor (Modelo y Controlador)
- C# o Vb.Net
Del lado de servidor podemos usar además Entity Framework o LINQ para manejar el acceso a los datos en el modelo.
Bueno, vamos a lío. Para crear una primer aplicación MVC y subirla Azure, en primer lugar abrir Visual Studio y crear un nuevo proyecto de tipo «ASP.NET Web Application»:
Seleccionamos la plantilla MVC y en la parte inferior derecha y marcamos «Host in the cloud«. Indicamos en el desplegable App Service.
De esta forma podremos desplegar directamente desde Visual Studio nuestra Web MVC. Al dar a Ok nos solicitará un nombre único que deseamos que tenga nuestra aplicación (debe ser único ya que tendrá acceso a internet será mediante una url de Microsoft).
Si no sale la opción de «App Service» debemos descargar el SDK Azure.
Además, tenemos otras dos opciones: Virtual Machine (v1) y (v2) que permiten crear en nuestra suscripción una máquina virtual para Azure Classic (v1) o para el actual Azure RM (v2) y hospedar nuestra aplicación en ellas.
Seleccionamos por tanto «App Service». Vemos que además del nombre de nuestra aplicación en Azure debemos indicar el Grupo de recursos de Azure para organizarlo dentro del portal de Azure e indicar el Plan en dónde se va alojar esta aplicación.
El plan va a indicar la máquina que lo hospeda, son planes autoescalables. Podemos poner escalado automático para un plan (dentro del portal de Azure) y entonces se crean nuevas instancias pero siempre dentro del mismo plan.
Existe un plan gratuito «Free» que no tiene escalado y que no supondrá coste.
Vemos que el proyecto creado con la plantilla MVC tiene distintas carpertas una para cada componente:
- Carpeta «Controllers».
– Carpeta «Models» (opcional)
– Carpeta «Views»
En la carpeta Shared van siempre la plantillas, se caracterizan por que no tienen controlador. Como vemos en la plantilla crea Visual Studio para MVC por defecto se crea la plantilla principal de «_Layout» que contiene HTML y código Razor (empieza siempre por ‘@’) para crear los links a cada vista.
Observar también que con el código Razor de @RenderBody() vamos a indicar que el contenido de las vistas se debe pintar aquí (el funcionamiento es similar a las páginas master-detail de Web Forms).
La página principal se indica en “_ViewStart.cshtml«.
Podemos probar el proyecto MVC en local con ‘F5‘. Para publicar el proyecto en Azure campos a botón derecho en el proyecto e indicamos «Publish…»
Creamos un perfil de publicación y lo subimos a Azure.
Una vez subido, entrando en nuestro grupo de recursos de Azure veremos que nuestra aplicación de servicio MVC está subida a Azure y que se ha creado también un Plan para hospedar esta aplicación.
Y ya podemos entrar en la Web MVC subida a Azure: (vemos que tiene el nombre en la url que hemos puesto seguido de .azurewebsites.net)
Si cambiamos algo y volvemos a publicar sólo sube los archivos nuevos: (con la pestaña de preview lo podemos ver)
