Você está na página 1de 32

Hemos visto que la lógica de negocios de nuestra aplicación y el acceso a datos (archivos

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

Desarrollaremos un proyecto y emplearemos el motor de vistas Razor para mostrar la


sintaxis general provista.

1. Creamos el proyecto (Proyecto5)


2. Ahora creamos el "Controlador" como hicimos en conceptos anteriores y le damos
el nombre HomeController.

Tenemos ahora creado el archivo "HomeController.cs" en la carpeta Controllers.

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" .

Ya tenemos la página cshtml donde podemos codificar con Razor:

@{
Layout = null;
}

<!DOCTYPE html>

<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<div>
</div>
</body>
</html>

Bloques de código en Razor.

Los bloques en Razor se encierran entre los caracteres @{ y }

Todo lo que dispongamos dentro será ejecutado en el servidor y no se mostrará en el


navegador.
Podemos definir varios bloques de código Razor dentro de la página. Modifiquemos el
archivo Index.cshtml con el siguiente código:

@{
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.

Es importante repetir que dentro del bloque de código Razor no implementaremos


algoritmos para el acceso a bases de dato, archivos de texto etc. ya que perdería sentido el
patrón MVC.

Acceso a estructuras de datos.

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>

Modificamos el archivo Index.cshtml donde definimos en un bloque un vector con


componentes de tipo int:

@{
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:

@foreach (var dia in diasFeriados)


{
<p>Dia:@dia</p>
}

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.

Estructuras repetitivas en Razor.

Antecediendo el caracter @ podemos disponer cualquier estructura repetitiva o condicional


en la página HTML. Para probar la facilidad de mezclar HTML y Razor modificaremos
nuestro programa para que muestre los primeros 10 términos de las tablas de multiplicar del
1 al 12:

@{
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>

El resultado de ejecutar este programa muestra en el navegador:


Como vemos tenemos dos estructuras repetitivas anidadas, dentro del for interno
mostramos los contenidos de las dos variables de los for y para mostrar el producto de los
mismos debemos encerrarlas entre paréntesis:

@for (int fila = 1; fila <= 12; fila++)


{
<tr>
@for (int columna = 1; columna <= 10; columna++)
{
<td>@fila * @columna = @(fila * columna)</td>
}
</tr>
}

Razor puede identificar dentro de la estructura repetitiva cuando se trata de un elementos


HTML, por ejemplo <td>.

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.

Emplearemos la tecnología Ado.Net para el acceso a Sql Server.

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:

Cargar un par de registros en la tabla:


Resolveremos el problema enunciando uno a uno los pasos que debemos dar en el Visual
Studio .Net para ir creando y codificando cada uno de los archivos necesarios en las
carpetas "Controllers", "Views" y "Models".

1. Creamos el proyecto (Proyecto6)

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"):

Aparece un segundo diálogo donde seleccionaremos que cree un proyecto vacío y


utilice el patrón MVC:
2. Ya tenemos nuestro proyecto creado, ahora modificaremos el archivo "Web.Config"
donde debemos definir la cadena de conexión con la base de datos "base1":
3. <?xml version="1.0" encoding="utf-8"?>
4. <!--
5. For more information on how to configure your ASP.NET
application, please visit
6. https://go.microsoft.com/fwlink/?LinkId=301880
7. -->
8. <configuration>
9.
10. <connectionStrings>
11. <add name="administracion" connectionString="Initial
Catalog=base1;Data Source=DIEGO-PC\SQLEXPRESS;Integrated
Security=true"/>
12. </connectionStrings>
13.
14. <appSettings>
15. <add key="webpages:Version" value="3.0.0.0"/>
16. <add key="webpages:Enabled" value="false"/>
17. <add key="ClientValidationEnabled" value="true"/>
18. <add key="UnobtrusiveJavaScriptEnabled" value="true"/>
19. </appSettings>
20. <system.web>
21. <compilation debug="true" targetFramework="4.6.1"/>
22. <httpRuntime targetFramework="4.6.1"/>
23. </system.web>
24. <runtime>
25. <assemblyBinding xmlns="urn:schemas-microsoft-com:asm.v1">
26. <dependentAssembly>
27. <assemblyIdentity name="System.Web.Helpers"
publicKeyToken="31bf3856ad364e35"/>
28. <bindingRedirect oldVersion="1.0.0.0-3.0.0.0"
newVersion="3.0.0.0"/>
29. </dependentAssembly>
30. <dependentAssembly>
31. <assemblyIdentity name="System.Web.WebPages"
publicKeyToken="31bf3856ad364e35"/>
32. <bindingRedirect oldVersion="1.0.0.0-3.0.0.0"
newVersion="3.0.0.0"/>
33. </dependentAssembly>
34. <dependentAssembly>
35. <assemblyIdentity name="System.Web.Mvc"
publicKeyToken="31bf3856ad364e35"/>
36. <bindingRedirect oldVersion="1.0.0.0-5.2.3.0"
newVersion="5.2.3.0"/>
37. </dependentAssembly>
38. </assemblyBinding>
39. </runtime>
40. <system.codedom>
41. <compilers>
42. <compiler language="c#;cs;csharp" extension=".cs"
43.
type="Microsoft.CodeDom.Providers.DotNetCompilerPlatform.CSharpCode
Provider, Microsoft.CodeDom.Providers.DotNetCompilerPlatform,
Version=1.0.5.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
44. warningLevel="4" compilerOptions="/langversion:default
/nowarn:1659;1699;1701"/>
45. <compiler language="vb;vbs;visualbasic;vbscript"
extension=".vb"
46.
type="Microsoft.CodeDom.Providers.DotNetCompilerPlatform.VBCodeProv
ider, Microsoft.CodeDom.Providers.DotNetCompilerPlatform,
Version=1.0.5.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
47. warningLevel="4" compilerOptions="/langversion:default
/nowarn:41008 /define:_MYTYPE=\"Web\" /optionInfer+"/>
48. </compilers>
49. </system.codedom>
50. </configuration>

Agregamos el elemento connectionStrings donde definimos la propiedad


connectionString con la cadena de conexión:

<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:

51. Crearemos ahora dos clases en la carpeta "Models":


Articulo.cs

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; }
}
}

La clase Articulo representa el modelo de datos (coincide con la estructura de la


tabla "articulos" creada en SQL Server)
Y la segunda clase a crear es "MantenimientoArticulo":

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;

private void Conectar()


{
string constr =
ConfigurationManager.ConnectionStrings["administracion"].ToString()
;
con = new SqlConnection(constr);
}

public int Alta(Articulo art)


{
Conectar();
SqlCommand comando = new SqlCommand("insert into
articulos(codigo,descripcion,precio) values
(@codigo,@descripcion,@precio)", con);
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;
con.Open();
int i = comando.ExecuteNonQuery();
con.Close();
return i;
}

public List<Articulo> RecuperarTodos()


{
Conectar();
List<Articulo> articulos = new List<Articulo>();

SqlCommand com = new SqlCommand("select


codigo,descripcion,precio from articulos", con);
con.Open();
SqlDataReader registros = com.ExecuteReader();
while (registros.Read())
{
Articulo art = new Articulo
{
Codigo =
int.Parse(registros["codigo"].ToString()),
Descripcion =
registros["descripcion"].ToString(),
Precio =
float.Parse(registros["precio"].ToString())
};
articulos.Add(art);
}
con.Close();
return articulos;
}

public Articulo Recuperar(int codigo)


{
Conectar();
SqlCommand comando = new SqlCommand("select
codigo,descripcion,precio from articulos where codigo=@codigo",
con);
comando.Parameters.Add("@codigo", SqlDbType.Int);
comando.Parameters["@codigo"].Value = codigo;
con.Open();
SqlDataReader registros = comando.ExecuteReader();
Articulo articulo = new Articulo();
if (registros.Read())
{
articulo.Codigo =
int.Parse(registros["codigo"].ToString());
articulo.Descripcion =
registros["descripcion"].ToString();
articulo.Precio =
float.Parse(registros["precio"].ToString());
}
con.Close();
return articulo;
}

public int Modificar(Articulo art)


{
Conectar();
SqlCommand comando = new SqlCommand("update articulos
set descripcion=@descripcion,precio=@precio where codigo=@codigo",
con);
comando.Parameters.Add("@descripcion",
SqlDbType.VarChar);
comando.Parameters["@descripcion"].Value =
art.Descripcion;
comando.Parameters.Add("@precio", SqlDbType.Float);
comando.Parameters["@precio"].Value = art.Precio;
comando.Parameters.Add("@codigo", SqlDbType.Int);
comando.Parameters["@codigo"].Value = art.Codigo;
con.Open();
int i = comando.ExecuteNonQuery();
con.Close();
return i;
}

public int Borrar(int codigo)


{
Conectar();
SqlCommand comando = new SqlCommand("delete from
articulos where codigo=@codigo", con);
comando.Parameters.Add("@codigo", SqlDbType.Int);
comando.Parameters["@codigo"].Value = codigo;
con.Open();
int i = comando.ExecuteNonQuery();
con.Close();
return i;
}
}
}

La clase MantenimientoArticulo tiene una serie de métodos que nos permiten


insertar una fila en la tabla "Articulos" llamando al método "Alta". Llega como
parámetro un objeto de la clase "Articulo" llamado "art":

public int Alta(Articulo art)


{

Lllamamos al método "Conectar" que tiene por objetivo iniciar la variable "con"
con la conexión a la base de datos "base1":

Conectar();

Luego creamos un objeto de la clase SqlCommand y pasamos como parámetro el


comando SQL que nos permite cargar una fila en la tabla artículos:

SqlCommand comando = new SqlCommand("insert into


articulos(codigo,descripcion,precio) values
(@codigo,@descripcion,@precio)", con);

Definimos los tipos y valores parametrizados:

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;

Abrimos la conexión y pedimos a SQL Server que ejecute el comando respectivo:


con.Open();
int i = comando.ExecuteNonQuery();
con.Close();
return i;
}

Los métodos "Modificar", "Borrar", "Recuperar" y "RecuperarTodos" son similares


pero implementando los algoritmos respectivos.

52. Ahora creamos el "Controlador" como hicimos en conceptos anteriores.

El controlador principal siempre lo llamaremos "Home", para esto presionamos el


botón derecho del mouse sobre la carpeta "Controllers" y seleccionar "Agregar" ->
Controlador...:

En el diálogo seleccionamos "Controlador de MVC 5: en blanco":.

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

Veamos ahora que debemos implementar en la acción "Index" del controlador


"HomeController" (el objetivo de este controlador será mostrar todos los artículos
en una página HTML):

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());
}
}
}

Creamos un objeto de la clase "MantenimientoArticulo" y llamamos al método


"RecuperarTodos" y se lo pasamos a la vista.

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>

Para que se muestren todos los artículos debemos implementar el siguiente


algoritmo en el archivo Index.cshtml:

@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>

@foreach (var articulo in Model)


{
<tr>
<td>
@articulo.Codigo
</td>
<td>
@articulo.Descripcion
</td>
<td>
@articulo.Precio
</td>
<td>
<a
href="/Home/Baja?cod=@articulo.Codigo">borra?</a>
</td>
<td>
<a
href="/Home/Modificacion?cod=@articulo.Codigo">modifica?</a>
</td>
</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>:

public ActionResult Index()


{
MantenimientoArticulo ma = new MantenimientoArticulo();
return View(ma.RecuperarTodos());
}

En la vista con la siguiente sintaxis indicamos el modelo:

@model IEnumerable<Proyecto6.Models.Articulo>

Mediante un foreach recorremos la lista que llegó desde el controlador y se


almacenó en la propiedad Model:

@foreach (var articulo in Model)


{
<tr>
<td>
@articulo.Codigo
</td>
<td>
@articulo.Descripcion
</td>
<td>
@articulo.Precio
</td>
<td>
<a
href="/Home/Baja?cod=@articulo.Codigo">borra?</a>
</td>
<td>
<a
href="/Home/Modificacion?cod=@articulo.Codigo">modifica?</a>
</td>
</tr>
}

Si ejecutamos ahora nuestra aplicación ya podemos ver el listado completo de


artículos:
Como vemos se muestra una tabla HTML con todos los datos de la tabla
"Articulos".

Hemos dispuesto en la parte final de la página un hipervínculo a la acción "Alta" del


controlador "Home" (todavía no la hemos codificado)

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());
}

public ActionResult Alta()


{
return View();
}

[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>

Cuando lo ejecutamos aparece la siguiente página en el navegador:

Como podemos observar la página HTML dispone un formulario donde se deben


ingresar el código, descripción y precio del artículo.

Cuando se presiona el botón se ejecuta la acción "Alta" del controlador "Home":

<form method="post" action="/Home/Alta">

Cuando se presiona el botón de tipo submit se ejecuta la acción:

[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.

No se asocia una vista a esta acción ya que mediante el método RedirectToAction se


solicita la ejecución de otra acción, en éste caso la acción "Index" que tiene por
objetivo mostrar el listado completo de artículos.

55. Baja

Implementaremos ahora el algoritmo para borrar un artículo cuando se presione el


hipervínculo "borra?".

Debemos codificar la siguiente acción llamada Baja en el controlador


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());
}

public ActionResult Alta()


{
return View();
}

[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");
}

public ActionResult Baja(int cod)


{
MantenimientoArticulo ma = new MantenimientoArticulo();
ma.Borrar(cod);
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:

public ActionResult Baja(int cod)


{
MantenimientoArticulo ma = new MantenimientoArticulo();
ma.Borrar(cod);
return RedirectToAction("Index");
}

Luego de borrarlo de la tabla de la base de datos procedemos a llamar a la acción


"Index".

56. Modificación

Para la modificación de un artículo debemos implementar dos acciones en el


controlador. El código a implementar es:

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());
}

public ActionResult Alta()


{
return View();
}
[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");
}

public ActionResult Baja(int cod)


{
MantenimientoArticulo ma = new MantenimientoArticulo();
ma.Borrar(cod);
return RedirectToAction("Index");
}

public ActionResult Modificacion(int cod)


{
MantenimientoArticulo ma = new MantenimientoArticulo();
Articulo art = ma.Recuperar(cod);
return View(art);
}

[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:

public ActionResult Modificacion(int cod)


@{
Layout = null;
}

<!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>

Al ejecutar la aplicación y seleccionar el hipervínculo de "modifica?" tenemos la


siguiente interfaz:
Como podemos ver disponemos el control input de HTML donde se ingresa el
código de solo lectura "readonly".

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.

Vemos que se encuentra perfectamente separada la lógica de la aplicación en el "Modelo",


la presentación e ingreso de datos en la "Vista" y la coordinación en el "Controlador".

En la vista codificamos fundamentalmente directamente con HTML y accedemos a los


datos mediante Razor. Veremos en el concepto siguiente el mismo problema pero
utilizando las herramientas que propone Visual Studio .net para generar las vistas en forma
automática.

Você também pode gostar