En esta entrada explicaremos paso a paso como enviar información desde la vista al controlador y viceversa, de esta forma podremos realizar formularios completamente funcionales en MVC.

 

Para empezar, tras iniciar Visual Studio 2015 iremos a archivo/nuevo/proyecto. Una vez en la ventana de creación de proyecto seleccionaremos ASP.NET web application y en la siguente ventana marcaremos MVC y desmarcaremos la pestañita de Azure ubicada a la derecha.

Tras crear el proyecto tendremos ya el entorno de trabajo de Visual Studio. A la derecha encontraremos el explorador de solución (solution explorer) donde podremos ver todos los directorios y archivos de que se compone nuestra aplicación MVC. Nosotros nos centraremos en dos carpetas llamadas, Views y Controllers.

La carpeta Views a su vez tiene varias subcarpetas a las que llemaremos Zonas y dentro de ellas se encuentran las vistas:

Las vistas son archivos CSHTML que utilizan código HTML5, con el que haremos el diseño de la pagina, y RAZOR, usado para la lógica.

Nuestro primer paso será clicar con el botón derecho en la carpeta Views/añadir/carpeta. De esta forma crearemos una nueva zona que llamaremos ZonaPruebas, será la que utilicemos para nuestro proposito. Una vez creada la zona, clicamos con el segundo botón en ella añadir/vista. A esta vista la llamaremos Vista1.cshtml.

 

Todas las zonas necesitan un controlador para poder acceder a sus vistas una vez ejecutemos el sitio web, por lo que nuestro siguente paso será, ir a la carpeta Controllers y añadir un nuevo controlador vacio. Click derecho en controllers/añadir/controlador. Seleccionaremos controlador vacio y lo llamaremos (MUY IMPORTANTE) ZonaPruebasController.cs

Ahora en el controler tendremos algo similar a esto :

Los public ActionResult son metodos para llamar a la vista a la que hacen referencia y que se encuentren en la zona enlazada al controlador, por ejemplo:

public ActionResult vista1() { return View() }   (este será el metodo para recibir variables desde las vistas usaremos la decoracion [httpPost] e incluiremos las variables en los paréntesis de la vista)

[httpPost]

public ActionResult vista1(tipoDeVariable nombreDeVariable, tipo nombre){}  (el tipo de la variable será el que utilicemos en los inputs de la vista y nombre el name.

Estas variables las enviaremos a la vista a traves de ViewBag quedando así:

[httpPost]

public ActionResult vista1(string marca, string modelo)

{   ViewBag.Marca = marca;  ViewBag.Modelo = modelo; return View();   }

Con esto ya tendriamos el Controlador hecho.

 

Ahora haremos la vista.

Lo primero que veremos en la vista será: @{    ViewBag.Title = “Vista1”;   }  (esto es código RAZOR que no debemos tocar)

Lo más importante a la hora de hacer el formulario es crear un <form method=”post”></form>. Dentro necesitaremos dos <input type=”text” con el atributo name exactamente igual que las variables del controlador: <input type=”text” name=”marca” />.  Un botón tipo submit <button type=”submit”></button> y un lugar para representar los valores que recibiremos por @ViewBag como un par de etiquetas <h3>: <h3>@ViewBag.marca</h3>

En la siguiente imagen estan marcadas la etiquetas y los atributos que necesitaremos.

 

Si tienes la vista y el controlador tal como se ha explicado, tras darle al botón play situado en el centro de la parte superior de Visual Studio, se cargará la pagina y podremos comprobar que funciona =)

 

Tambien podemos enviar objetos desde el controlador a las vistas asignando los valores que introducimos en los input de la vista, para ello iremos al controlador y crearemos una clase coche

public class Coche {public string Marca { get; set; } }  (habría que hacer otra variable para el modelo)

Después, dentro del controlador, en el [httpPost] ActionResult Vista1, tendremos que informar de que la vista recibirá un objeto coche de esta forma:

[httpPost]    public ActionResult Vista1(Coche c, string marca…)

Debemos igualar las variables del objeto c a las variables que recibe el ActionResult:

c.Marca = marca; c.Modelo = modelo;

Y por último mandaríamos estas variables del objeto c a traves de los ViewBag

ViewBag.Marca = c.Marca; ViewBag.Modelo = c.Modelo;

 

Si ahora vamos a la vista veremos que el resultado es igual que el anterior, con la diferencia de que ahora lo que estamos enviándole a la vista es un objeto, lo que nos da bastantes posibilidades.

 

Espero que os haya servido de ayuda, si queréis tenéis también un vídeo corto donde se muestra desde la creación del proyecto hasta el final de este post.

 

 

Autor: Alejandro Samriento Sanchez

Curso: Microsoft MCSD Web Applications + SharePoint Apps

Centro: Tajamar

Año academico: 2016-2017