de texto, base de datos etc.) se debe programar en el "modelo", pero cuando tenemos que
implementar algoritmos para la presentación de datos aparece el motor de vistas Razor.
Razor nos permite implementar pequeños algoritmos dentro de los archivos cshtml.
Problema
3. Ahora generaremos la vista para la página principal del sitio, como sabemos
tenemos que abrir el archivo HomeController y presionar el botón derecho del
mouse sobre el método Index y seleccionar "Agregar vista" .
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<div>
</div>
</body>
</html>
@{
Layout = null;
}
@{
string titulo = "Página principal";
int dia = DateTime.Now.Day;
int mes = DateTime.Now.Month;
int año = DateTime.Now.Year;
string cadena;
if (dia > 15)
{
cadena = "Estamos en la segunda parte del mes";
}
else
{
cadena = "Estamos en la primer parte del mes";
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<div>
<h1>@titulo</h1>
<p>Fecha:@dia/@mes/@año</p>
<p>@cadena</p>
</div>
</body>
</html>
Hemos dispuesto un segundo bloque de código Razor donde definimos cinco variables y las
inicializamos por asignación:
@{
string titulo = "Página principal";
int dia = DateTime.Now.Day;
int mes = DateTime.Now.Month;
int año = DateTime.Now.Year;
string cadena;
if (dia > 15)
{
cadena = "Estamos en la segunda parte del mes";
}
else
{
cadena = "Estamos en la primer parte del mes";
}
}
Para generar HTML dentro de la página debemos disponer fuera del código Razor la
variable a imprimir antecedida por el caracter @:
<h1>@titulo</h1>
<p>Fecha:@dia/@mes/@año</p>
<p>@cadena</p>
Hay que tener en cuenta que todos los bloques Razor no llegan al navegador web que hace
la petición de la página:
Presionamos el botón derecho del mouse dentro del navegador y seleccionamos "Ver
código fuente de la página":
Todos los bloques Razor no aparecen en la página servida al cliente y los lugares que
dispusimos variables en Razor, por ejemplo @titulo se sustituyeron por los valores
contenidos en las variables.
Vimos que podemos acceder a variables de tipo primitiva (int, string, float etc.), pero
también podemos acceder a estructuras de datos y disponer una estructura for, while, if etc.
fuera del bloque Razor:
@{
Layout = null;
}
@{
int[] diasFeriados = { 1, 17, 24, 30 };
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<div>
<h1>Dias feriados.</h1>
<ul>
@foreach (var dia in diasFeriados)
{
<p>Dia:@dia</p>
}
</ul>
</div>
</body>
</html>
@{
int[] diasFeriados = { 1, 17, 24, 30 };
}
Luego para imprimir los elementos del vector podemos disponer una instrucción foreach
fuera del bloque, para ello debemos anteceder el caracter @ previo a la palabra clave
foreach:
El motor Razor puede identificar cual es el código HTML que se debe generar y cual es la
variable a mostrar gracias a que le antecedemos el caracter @ a la variable dia.
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<div>
<table border="1">
@for (int fila = 1; fila <= 12; fila++)
{
<tr>
@for (int columna = 1; columna <= 10; columna++)
{
<td>@fila * @columna = @(fila * columna)</td>
}
</tr>
}
</table>
</div>
</body>
</html>
Veremos todos los pasos que debemos enfrentar cuando queremos implementar una
aplicación que se conecta a un servidor de base de datos SQL Server y proceder a efectuar
un listado, alta, baja y modificación de una tabla.
Problema
Crear con el "Microsoft SQL Server Management Studio" una base de datos llamada
"base1" y luego una tabla llamada "articulos" con la siguiente estructura:
Creación del proyecto. Para esto seleccionamos desde el menú la opción "Archivo"
-> "Nuevo" -> "Proyecto..."
Aparece un diálogo donde debemos indicar del lado izquierdo que utilizaremos el
lenguaje Visual C# y del lado de la derecha seleccionamos "Aplicación web
ASP.NET (.Net Framework)" y en la parte inferior definimos el "nombre",
"ubicación" y "nombre de la solución" (podemos usar el mismo texto para el
"nombre de la solución" y "nombre"):
<connectionStrings>
<add name="administracion" connectionString="Initial
Catalog=base1;Data Source=DIEGO-PC\SQLEXPRESS;Integrated
Security=true"/>
</connectionStrings>
La base de datos se define en la propiedad Initial Catalog, luego en la propiedad
Data Source le asignamos el nombre de nuestro servidor. Para conocer el nombre de
nuestro servidor de SQL Server desde el Management Studio presionamos el botón
derecho del mouse:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace Proyecto6.Models
{
public class Articulo
{
public int Codigo { get; set; }
public string Descripcion { get; set; }
public float Precio { get; set; }
}
}
MantenimientoArticulo.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
namespace Proyecto6.Models
{
public class MantenimientoArticulo
{
private SqlConnection con;
Lllamamos al método "Conectar" que tiene por objetivo iniciar la variable "con"
con la conexión a la base de datos "base1":
Conectar();
comando.Parameters.Add("@codigo", SqlDbType.Int);
comando.Parameters.Add("@descripcion",
SqlDbType.VarChar);
comando.Parameters.Add("@precio", SqlDbType.Float);
comando.Parameters["@codigo"].Value = art.Codigo;
comando.Parameters["@descripcion"].Value =
art.Descripcion;
comando.Parameters["@precio"].Value = art.Precio;
Visual Studio .Net nos genera el esqueleto básico de nuestro controlador llamado
HomeController solo con la acción Index:
HomeController.cs"
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace Proyecto6.Controllers
{
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
return View();
}
}
}
53. Listado
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Proyecto6.Models;
namespace Proyecto6.Controllers
{
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
MantenimientoArticulo ma = new MantenimientoArticulo();
return View(ma.RecuperarTodos());
}
}
}
La vista todavía no existe por lo que presionamos el botón derecho del mouse sobre
"Index()" y seleccionamos "Agregar Vista", en este diálogo en plantilla
seleccionamos "Empty":
Ahora se ha generado el archivo "Index.cshtml" :
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<div>
</div>
</body>
</html>
@model IEnumerable<Proyecto6.Models.Articulo>
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<table class="table">
<tr>
<th>
Codigo
</th>
<th>
Descripcion
</th>
<th>
Precio
</th>
<th>
Borrar
</th>
<th>
Modificar
</th>
</tr>
</table>
<a href="/Home/Alta">Agregar</a>
</body>
</html>
Desde el controlador recordemos que llamamos al método View y le pasamos como
parámetro lo que retorna el método RecuperarTodos. El método RecuperarTodos de
la clase MantenimientoArticulo retorna un objeto List<Articulo>:
@model IEnumerable<Proyecto6.Models.Articulo>
54. Alta
Ya tenemos la página principal que muestra todas las filas de la tabla "articulos",
ahora implementaremos el alta de artículos. Debemos definir dos acciones más en la
clase "HomeController":
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Proyecto6.Models;
namespace Proyecto6.Controllers
{
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
MantenimientoArticulo ma = new MantenimientoArticulo();
return View(ma.RecuperarTodos());
}
[HttpPost]
public ActionResult Alta(FormCollection collection)
{
MantenimientoArticulo ma = new MantenimientoArticulo();
Articulo art = new Articulo
{
Codigo = int.Parse(collection["codigo"]),
Descripcion = collection["descripcion"],
Precio =
float.Parse(collection["precio"].ToString())
};
ma.Alta(art);
return RedirectToAction("Index");
}
}
}
Si bien las dos acciones se llaman igual "Alta" la segunda se le agrega el atributo
[HttpPost].
La primera de las acciones Alta() tiene por objetivo mostrar la vista con un
formulario HTML que permita ingresar los datos de un artículo. Luego cuando se
presione el botón de tipo "submit" se ejecutará la otra acción Alta que recibe como
parámetro los datos cargados en el formulario.
Solo la primer acción "Alta" se le debe asociar una vista. Para esto presionamos el
botón derecho del mouse en Alta() y seleccionamos "Agregar Vista":
Tenemos ahora creada la vista Alta.cshtml:
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Alta</title>
</head>
<body>
<div>
<form method="post" action="/Home/Alta">
Codigo:
<input type="text" name="codigo" />
<br />
Descripcion:
<input type="text" name="descripcion" />
<br />
Precio:
<input type="text" name="precio" />
<br />
<input type="submit" value="Confirmar" />
</form>
</div>
</body>
</html>
[HttpPost]
public ActionResult Alta(FormCollection collection)
{
MantenimientoArticulo ma = new MantenimientoArticulo();
Articulo art = new Articulo
{
Codigo = int.Parse(collection["codigo"]),
Descripcion = collection["descripcion"],
Precio =
float.Parse(collection["precio"].ToString())
};
ma.Alta(art);
return RedirectToAction("Index");
}
Como podemos ver a este método llega un objeto de la clase FormCollection donde
se almacenan todos los datos cargados en el formulario.
55. Baja
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Proyecto6.Models;
namespace Proyecto6.Controllers
{
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
MantenimientoArticulo ma = new MantenimientoArticulo();
return View(ma.RecuperarTodos());
}
[HttpPost]
public ActionResult Alta(FormCollection collection)
{
MantenimientoArticulo ma = new MantenimientoArticulo();
Articulo art = new Articulo
{
Codigo = int.Parse(collection["codigo"]),
Descripcion = collection["descripcion"],
Precio =
float.Parse(collection["precio"].ToString())
};
ma.Alta(art);
return RedirectToAction("Index");
}
Es decir que cuando desde la vista Index presionamos el hipervínculo para borrar un
determinado artículo se ejecuta la acción "Baja" y llega como parámetro el código
de articulo a borrar:
56. Modificación
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Proyecto6.Models;
namespace Proyecto6.Controllers
{
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
MantenimientoArticulo ma = new MantenimientoArticulo();
return View(ma.RecuperarTodos());
}
[HttpPost]
public ActionResult Modificacion(FormCollection collection)
{
MantenimientoArticulo ma = new MantenimientoArticulo();
Articulo art = new Articulo
{
Codigo =
int.Parse(collection["codigo"].ToString()),
Descripcion = collection["descripcion"].ToString(),
Precio =
float.Parse(collection["precio"].ToString())
};
ma.Modificar(art);
return RedirectToAction("Index");
}
}
}
Hay que generar la vista para la acción presionando el botón derecho del mouse:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Modificacion</title>
</head>
<body>
<div>
</div>
</body>
</html>
Debemos codificar la página para que muestre los datos precargados, Luego el
archivo "Modificacion.cshtml" debe ser:
@model Proyecto6.Models.Articulo
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Alta</title>
</head>
<body>
<div>
<form method="post" action="/Home/Modificacion">
Codigo:
<input type="text" name="codigo" value="@Model.Codigo"
readonly />
<br />
Descripcion:
<input type="text" name="descripcion"
value="@Model.Descripcion" />
<br />
Precio:
<input type="text" name="precio"
value="@Model.Precio"/>
<br />
<input type="submit" value="Confirmar" />
</form>
</div>
</body>
</html>
Cuando se presiona el botón submit se ejecuta la acción donde se cambian los datos
de la tabla:
[HttpPost]
public ActionResult Modificacion(FormCollection collection)
{
MantenimientoArticulo ma = new MantenimientoArticulo();
Articulo art = new Articulo
{
Codigo =
int.Parse(collection["codigo"].ToString()),
Descripcion = collection["descripcion"].ToString(),
Precio =
float.Parse(collection["precio"].ToString())
};
ma.Modificar(art);
return RedirectToAction("Index");
}
Acotaciones.
En este concepto hemos mostrado una aproximación más realista de los algoritmos que
tenemos que implementar en cada una de las carpetas del MVC.