February 8, 2016

No Comments

PRIMEROS PASOS EN MVC Y SINTAXIS RAZOR

Para entender un poco más de cómo se utiliza la sintaxis del motor de vistas Razor en MVC vamos a crear un nuevo proyecto para eso abrimos Visual Studio. Nuevo proyecto.

 

Seleccionamos ASP.NET MVC 4 Web Application donde seleccionamos la ubicación y el nombre de nuestro proyecto en este caso el mio es ProjMVC

 

En las plantillas seleccionamos una plantilla Vacía esta plantilla no contiene ningún controlador ni vista. Pero no te preocupes aquí crearemos una.

En cuanto al motor de vista seleccionamos el motor Razor. En cuanto a la opción de pruebas unitarias en esta ocasión la dejamos sin seleccionar.

 

Una vez creado el proyecto podemos ver que ya están cargadas las carpetas con la estructura MVC en este caso son:

  1. Vistas
  2. Modelos
  3. Controladores

 

Para comenzar vamos agregar un nuevo controlador para eso nos colocamos en la carpeta Controller click derecho Add –> Controller. En Controller Name insertamos el nombre que deseamos tener en nuestro controlador en mi caso es Index y por norma se sugiere dejar enseguida de el nombre Controller como es mi caso.

Las plantillas apoyan al desarrollador creando una estructura en la cual pueda agregar, modificar y eliminar información de alguna base de datos. En nuestro caso la dejamos en Controlador MVC Vacío.

 

Al momento de agregar podemos observar que ya se creó el controlador dentro de la carpeta controllers

 

Al dar doble click sobre nuestro controlador tendremos la siguiente vista.

Donde nos creó un método que regresa un ActionResult el cual regresa a nuestra vista. En este caso no tenemos ninguna vista creada aun. Pero para crearla es muy sencillo. Tan solo es dar click derecho sobre el nombre del método y seleccionar Add View (Agregar Vista).

 

Donde nos abrirá una ventana donde nos indica el nombre de la nueva vista en mi caso es Index. El motor de Vistas que en este tutorial es Razor. También tenemos la opción de crear una vista fuertemente tipada a un modelo en este caso no tenemos un modelo creado que se vaya a comunicar con el controlador y la vista así que la dejamos en blanco al igual tenemos la opción de agregar una master page. En este caso igualmente dejamos en blanco a continuación damos click en Agregar.

Podemos observar que ya se creó la vista dentro de la carpeta Views (Vistas) y tenemos la siguiente pantalla al dar doble click.

Esta parte es la que nos interesa en este artículo para conocer un poco de la sintaxis de Razor.

En la parte superior podemos observar que se encuentra una sección declarada con un @{}

Dentro de esa sección nosotros podemos definir variables como comúnmente las manejábamos en el servidor con formularios en asp.net

En este caso declaremos dos inputs y un botón como en la siguiente imagen.

 

Estos input se van a comunicar con razor, ¿de qué manera? bueno como podemos observar en la parte inferior esta una variable llamada @totalMessage Esta variable es declarada en la sección antes mencionada del arroba y corchetes como veremos a continuación.


Dentro de esta sección podemos insertar la lógica como si fuera JavaScript teniendo la oportunidad de comunicarnos con los elementos que están declarados en nuestra página como veremos a continuación en donde obtendremos el valor de los dos textbox y por medio de un postback realizaremos una suma.


Como podemos apreciar con Request y el Id de nuestros controles podemos tener acceso a los mismos con la ventaja de también tener el intellinses para poderte ayudar a completar el código.

En este caso lo que realiza el código anterior es crear la variable de salida: totalMessage. Así como la la variable que alojara el resultado: total. Y dentro de las variables num1 y num2 obtenemos lo que el usuario ingrese en la página y realizamos el total indicándole que tanto num1 como num2 son enteros y guardando el resultado en totalMessage para mostrarlo en la página en esta sección


 

Debemos realizar un paso más antes de poder probar nuestros primeros pasos en MVC el cual es indicar la ruta la cual abrirá nuestra primera página para eso en el Explorado de soluciones buscamos la carpeta App_Start y dentro damos doble click sobre la clase RouteConfig.cs.


 

Este nos abrirá la siguiente página.


En donde nos indica que el controlador tiene por nombre Index que es el nombre que le indicamos al inicio al controlados que quedo como IndexController pero en este caso solo se utiliza index y la acción es el nombre del método que ejecutaremos en este caso el nombre del método es Index. En la parte de id se pueden enviar parámetros pero en esta ocasión no los usaremos.

Ahora si podemos probar nuestros primeros pasos en MVC al dar click en Ejecutar.


Resultado:

 


 

Happy Coding ;=)

Eduardo Sánchez Almazán