Web Pages Razor Manual 2
Andres David Florez OrtizSigo con la entrega de web pages razor, espero sacarlo completo en este mes, por razones de trabajo me he demorado pero una vez complete unos temas subo version actualizada.
Tabla de contenido
INTRODUCCION A Web Pages .........................................................................................................
Paginas CSHTML ...................................................................................................................................
Conociendo más a CSHTML .............................................................................................................
Razor: Conociéndolo más ...............................................................................................................
Instalando un Helper .........................................................................................................................
Mostrando un Gravatar ................................................................................................................
Usando un Helper en una página. ............................................................................................
Mostrando Data ...................................................................................................................................
Creando una Base de datos .......................................................................................................
Creando una tabla ..........................................................................................................................
Insertar Datos en la Tabla ...........................................................................................................
Mostrar datos en una WebGrid..................................................................................................
Escribiendo el código Razor ......................................................................................................
Modificando la vista del Grid .....................................................................................................
Cambiando las columnas a mostrar ........................................................................................
Cambiando el look del grid .........................................................................................................
Agregando paginación .................................................................................................................
Formularios Básicos de HTML ......................................................................................................
Los Verbos .......................................................................................................................................
GET. Usado para recuperar algo del servidor. Se ve cuando se escribe una url,
cuando se muestran las imágenes de una página web. .....................................................
POST. Permite enviar una petición con el fin de presentar los datos para agregarlos o
cambiarlos en el servidor. Se usa para manejo de base de datos. ..................................
Creando un Formulario ................................................................................................................
Leyendo los Valores del Formulario........................................................................................
El Objeto Request ..........................................................................................................................
Pasando un término de búsqueda como parámetro .........................................................
Ingresando Datos a una tabla usando Formularios ...............................................................
¿Qué Construirás? ........................................................................................................................
Creando el Formulario Básico de Entrada ............................................................................
Obteniendo Valores del Formulario .........................................................................................
Agregando Datos a la Base de Datos .....................................................................................
Validando las Entradas de Usuario ..........................................................................................
Validando con un Helper .............................................................................................................
Agregando un Link ............................................................................................................................
INTRODUCCION A Web Pages
Paginas CSHTML
Conociendo más a CSHTML
Razor: Conociéndolo más
Instalando un Helper
Mostrando un Gravatar
Ir a la página http://es.gravatar.com/ y registrarse
Ir a NuGet
En el cuadro de búsqueda poner "asp.net helpers" y seleccionar ASP.NET Web
Helpers Library
Clic en instalar, en sí y aceptar la licencia
Para desinstalarlo clic en el paquete instalado y desinstalar.
NuGet nos sirve para instalar librerías o componentes adicionales que pueden ser
requeridos para simplificar tareas.
ASP.NET Web Helpers Library es una librería que simplifica muchas tareas comunes,
incluye el Gravatar.
Usando un Helper en una página.
Para usar un helper se debe poner el @ seguido del helper a usar.
Vamos a usar el helper gravatar poniendo @Gravatar.
Seguido de eso ponemos el punto (.) esto nos mostrara los métodos del helper.
El intelliSense nos ayuda a proveer el apropiado contexto de las llamadas, trabajando en
varios lenguajes de .Net.
@Gravatar.GetHtml("john@contoso.com", 40, "wavatar")
Mostrando Data
Creando una Base de datos
Ir a bases de datos, en mi caso se encuentra en la parte inferior izquierda del programaAgregar una base de datos al sitio- Colocarle nombre a la base de datos.
Veras la base de datos creada en la parte superior izquierda del programa.
Se creara una base de datos con extensión .sdf
Creando una tabla
Clic derecho en la base de datos donde sale tablas y agregar nueva tabla.
Especificar nombre de tabla y crear las filas.
Guardar la Tabla
Ejercicio
Se creara la siguiente tabla con las siguientes filas.
peliculas
ID int Primary Key e Identity
Titulo nvarchar(100)
Genero nvarchar(40)
Año nchar(5)
Insertar Datos en la Tabla
Dar clic derecho sobre la tabla y seleccionar Datos.
Proceder a escribir los datos en las filas para ser usados.
Si ingresas un dato mal y este no es nulo mostrara un error.
Una vez finalizado cerrar la pestaña de la tabla.
Para regresar a donde están nuestros archivos, dar clic en Archivos que se
encuentra en la parte inferior del programa.
Mostrar datos en una WebGrid
Parar mostrar los datos usaremos un webgrid para verlos en una tabla, por lo tanto
genera el html de una etiqueta <table>.
Para eso debemos crear un archivo cshtml siguiendo los pasos que se encuentran
anteriormente.
Escribiendo el código Razor
var db = Database.Open("nombredelabd");
var selectedData = db.Query("SELECT * FROM nombretabla");
var grid = new WebGrid(source: selectedData);
Modificando la vista del Grid
Con esto se pretende generar una vista profesional de los datos en el webgrid, o una vista
donde se vean los datos de forma más intuitiva.
Cambiando las columnas a mostrar
Puedo quitarle las columnas para mostrar mejores resultados.
columns: grid.Columns(
grid.Column("Columna1"),
grid.Column("Columna2"),
grid.Column("Columna 3")
)
Dichas columnas son los valores que le damos a las filas de la tabla a mostrar.
Cambiando el look del grid
Primero podemos cambiar los estilos, recordemos que tratamos con una tabla.
Por eso usare este ejemplo:
<style type="text/css">
.grid { margin: 4px; border-collapse: collapse; width: 600px; }
.grid th, .grid td { border: 1px solid #C0C0C0; padding: 5px; }
.head { background-color: #E8E8E8; font-weight: bold; color: #FFF; }
.alt { background-color: #E8E8E8; color: #000; }
</style>
Seguido de eso añadimos los estilos
@grid.GetHtml(
tableStyle: "grid",
headerStyle: "head",
alternatingRowStyle: "alt",
columns: grid.Columns(
grid.Column("Titulo"),
grid.Column("Genero"),
grid.Column("Año")
)
)
Agregando paginación
Si tenemos muchos datos esto nos ayuda a que se muestre pocos datos pero las páginas
que se ven en la parte inferior nos dará un orden, el objetivo es que no se vean tantos
datos si no pocos para mostrar lo que se necesita.
var grid = new WebGrid(source: selectedData, rowsPerPage: 3);
Veremos lo aprendido a través de un ejemplo y una vista, de acuerdo a la tabla que
hemos creado.
webgrid.cshtm
@{
//Abrimos la base de datos y armamos la consulta
var db=Database.Open "nombredelabd" ;
var seleccionardatos=db.Query "SELECT * FROM peliculas" ;
//Cargamos los datos en la Grid
var grid = new WebGrid source: seleccionardatos, defaultSort: "Genero",
rowsPerPage: ;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<!-- Estilos de la tabla o el grid -->
<style type="text/css">
h {
font-family: 'Times New Roman', serif;
font-size:
px;
font-weight: bold;
}
.grid { margin: px; border-collapse: collapse;
width: 00px; }
.grid th, .grid td { border:
px solid #C0C0C0;
padding: px; }
.head { background-color: #E8E8E8; font-weight: bold;
color: #FFF; }
.alt { background-color: #E8E8E8; color: #000; }
</style>
<title>Peliculas</title>
</head>
<body>
<!-- Se muestran los resultados y se tiene la grilla -->
<h >Resultados</h >
@grid.GetHtml
tableStyle: "grid",
headerStyle: "head",
alternatingRowStyle: "alt",
columns: grid.Columns
grid.Column "Titulo" ,
grid.Column "Genero" ,
grid.Column "Año"
;
</body>
</html>
Su resultado en el navegador seria:
Formularios Básicos de HTML
Los formularios permiten a nuestros usuarios interactuar con nuestros clientes, es de
importancia que sean intuitivos y hagan lo que se les ha pedido.
Acerca de formularios HTML
Un formulario contiene elementos de entrada, entre esos están: cajas de texto, botones,
radio buttons, check boxes, drop-down lists entre otros.
El usuario llena los campos o hace sus selecciones y los envía a través de un botón, de
ese proceso obtendrá una respuesta.
<form method="post">
<input type="text" name="name" value="" />
<br/>
<input type="submit" name="submit" value="Submit" />
</form>
La etiqueta <form> y su cierre </form> contienen los inputs con los cuales interactuara
nuestro usuario.
Los Verbos
Son usados por el navegador para enviarle peticiones al servidor, se usan
mayoritariamente dos verbos para dichas peticiones permitiendo al servidor darle una
respuesta al usuario de acuerdo a una acción.
GET. Usado para recuperar algo del servidor. Se ve cuando se escribe una url, cuando se
muestran las imágenes de una página web.
Si se envían datos desde un formulario, se envían al servidor como parte de la URL.
POST. Permite enviar una petición con el fin de presentar los datos para agregarlos o
cambiarlos en el servidor. Se usa para manejo de base de datos.
Los datos son pasados al servidor según los que se encuentren en el cuerpo de la página.
En los formularios el usuario usa distintas entradas conocidas como inputs.
Estas entradas(inputs) permiten al usuario interactuar con nuestro sitio web.
La etiqueta es <input type="tipo" name="nombre" id="nombre">
Los tipos son:
Cajas de Texto text
Caja de Contraseña password
Cajas de Verificación check
Botón de Radio radio
Botón button
Botón de Envio submit
Área de Texto <textarea>
Creando un Formulario
<form method="get">
<div>
<label for="txtgenero">Genero para ver:</label>
<input type="text" name="txtgenero" value="" />
<input type="Submit" value="Buscar Genero" /><br/>
(Dejar vacio para ver todas las peliculas.)<br/>
</div>
</form>
Leyendo los Valores del Formulario
Request: es una solicitud o petición que da un formulario.
Para eso Razor nos da un código para obtener el valor que se da en el request.
var variablerequest = Request.QueryString["nameinput"];
El nameinput es el nombre que le dimos a la etiqueta input de texto, password, checkbox,
etc.
QueryString obtiene el valor de dicho input el cual fue transmitido al enviarse el
formulario. Por lo tanto, sería terrible que el usuario en dicho input no tome un valor, para
evitar eso podemos identificar si dicho elemento está vacío usando el método IsEmpty, tal
y como se muestra a continuación.
Request.QueryString["nameinput"].IsEmpty()
Por lo tanto podría hacer una condicional if para identificar si el elemento esta vacío o si
tiene un valor.
if(!Request.QueryString["nameinput"].IsEmpty() ) {
// Acciones si no está vacío
}
else{
//Acciones si esta vacío
}
Notese que usamos ¡ en la condicional, esto representa una negación, es decir no, según
el álgebra booleana si tengo la proposición no p y esta es igual a true, esta será falsa, y
pasara lo mismo en caso contrario, es decir un false se volverá true.
El Objeto Request
Este objeto contiene toda la información que el navegador envía a su aplicación cuando
esta es enviada o solicitada. Esta información es la que el usuario provee al realizar una
acción.
El objeto request es una colección de valores, tú obtienes un valor individual fuera de la
colección especificando su nombre: var algunvalor=Request["inputname"];
Request.Form da los valores de los elementos enviados de el formulario si es una
solicitud POST.
Request.QueryString
da
el
valor
en
la
URL
de
la
solicitud.
http://mysite/myapp/page?request=valorinput&request2=valor
?request=valorinput&request2=valor es la seccion de la url que es enviada.
Request.Cookies da la colecion para aceder a la cookies que el navegador ha enviado.
Por lo tanto para su uso, puedo usarlas de la siguiente manera:
Request.Form["elementoform"]
Request.Cookie["elementocookie"]
Creando una Consulta para usar un término de busqueda
Ahora que ya comprendemos bases de datos y formularios vamos a crear una consulta a
una base de datos SQL con un término de búsqueda.
Comprendemos exactamente que para consultar datos usamos un SELECT.
SELECT * FROM nombre_tabla
SELECT campo FROM nombre_tabla
SELECT campo1,...,campon FROM nombre_tabla
Donde campo es el nombre de la fila de la tabla.
Pero necesitamos encontrar dentro de nuestra tabla sea cual sea a través de un término
de búsqueda, por lo tanto debo usar las condicionales que ofrece SQL.
Esta condicional es el WHERE, cuya sintaxis es la siguiente.
SELECT ... FROM nombre_tabla WHERE campocondicion=valorcampo
Puedes usar distintos operadores como:
= Igual a
<> Diferente de
>= Mayor o igual
<= Menor o igual
> Mayor que
< Menor que
LIKE es usado en el WHERE para búsqueda por patrones.
Pasando un término de búsqueda como parámetro
Como siempre lo he dicho los lenguajes de programación nos ofrecen siempre muchos
métodos para realizar lo mismo, uno es fácil y el otro puede ser más complejo, hablare de
ambos métodos de cómo obtener la cadena de selección para hacer la solicitud de los
datos.
El primero consiste en concatenar dentro de la cadena select el parámetro de búsqueda.
C# me permite hacer una concatenación usando el signo +, de esa forma creo la
concatenación de la siguiente manera:
Si el campo es numerico.
"SELECT ... FROM nombre_tabla WHERE campocondicion="+valordelcampo
Si el campo es una cadena.
"SELECT ... FROM nombre_tabla WHERE campocondicion='"+valordelcampo+"'"
Es un método sencillo para generar la cadena de la consulta con condiciones para ser
enviado y se muestren nuestros datos.
Otro método es usando placeholder. Un placeholders es un comodín que usamos en la
cadena de consulta select para hacerlo más seguro pero a su vez un poco más
complicado si no entiendes lo que se hace.
El placeholder es el carácter @ seguido por el numero 0 (@0). Si quieres poner más
placeholders puedes llamarlos así @0, @1, @2, etc.
Para poder hacer la consulta y actualizar el valor pasado, tú debes usar el siguiente
código:
selectcommand="SELECT ... FROM nombre_tabla WHERE campo=@0";
selectdata=db.Query(selectcommand, Request.QueryString["nameinput"]);
La consulta contiene un placeholder @0
La consulta esta introducida en la variable selectcommand antes tu pasa la
consulta directamente al metodo db.Query.
Cuando tú llamas al metodo db.Query, tú pasas la consulta select y el valor para
usar en el placeholder. Si la consulta tiene múltiples placeholders tú debes separar
todos los valores para el método.
El placeholder se usa por seguridad, ya que si envías una cadena concatenada se puede
exponer a un ataque tu base de datos y eso sería algo que perjudicaría nuestra
aplicación.
Ahora ya con todos estos conocimientos es bueno hacer una página para afianzar más
los conocimientos y ver cómo funciona.
El primer paso es crear una página cshtml, la cual llamaremos datos.cshtml
Este será el código de nuestra página:
@{
//Abrimos la base de datos y hacemos la consulta
var db=Database.Open("peliculasadfo");
var seleccionardatos=db.Query("SELECT * FROM peliculas");
var termino = "";
//Preguntamos si se envian los datos por el formulario
if(!Request.QueryString["txtgenero"].IsEmpty() ) {
//termino es lo que envía el usuario
termino = Request.QueryString["txtgenero"];
seleccionardatos = db.Query("SELECT * FROM peliculas WHERE Genero = @0",
termino);
}
//Cargamos los datos en la Grid
var grid = new WebGrid(source: seleccionardatos, defaultSort: "Genero",
rowsPerPage:4);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<!-- Estilos de la tabla o el grid -->
<style type="text/css">
h1 {
font-family: 'Times New Roman', serif;
font-size: 16px;
font-weight: bold;
}
.grid { margin: 4px; border-collapse: collapse; width: 600px; }
.grid th, .grid td { border: 1px solid #C0C0C0; padding: 5px; }
.head { background-color: #E8E8E8; font-weight: bold; color: #FFF; }
.alt { background-color: #E8E8E8; color: #000; }
</style>
<title>Peliculas</title>
</head>
<body>
<!-- Formulario para buscar por genero -->
<form method="get">
<div>
<label for="txtgenero">Género para ver:</label>
<input type="text" name="txtgenero" value="@Request.QueryString["txtgenero"]" />
<input type="Submit" value="Buscar Genero" /><br/>
(Dejar vacio para ver todas las peliculas.)<br/>
</div>
</form>
<!-- Se muestran los resultados y se tiene la grilla -->
<h1>Resultados</h1>
@grid.GetHtml(
tableStyle: "grid",
headerStyle: "head",
alternatingRowStyle: "alt",
columns: grid.Columns(
grid.Column("Titulo"),
grid.Column("Genero"),
grid.Column("Año")
))
</body>
</html>
Notaran que en el formulario esta la siguiente etiqueta con los siguientes atributos:
<input type="text" name="txtgenero" value="@Request.QueryString["txtgenero"]" />.
De esta forma permito que cuando el usuario teclee el género de la película se pueda ver
en el input de texto después de ser enviado.
Aumentare la complejidad del ejercicio, para eso aumentare los inputs de búsqueda y
donde se pondrán dos placeholders para buscar gracias a esos patrones, estos patrones
son el género y el título de la película, donde el título es un indicio.
Este sería el código HTML y Razor de la página, me permitirá hacer lo que he sugerido
anteriormente dando a conocer mejor lo que hace Razor en las bases de datos.
@{
//Abrimos la base de datos y hacemos la consulta
var db=Database.Open "peliculasadfo" ;
var seleccionardatos=db.Query "SELECT * FROM peliculas" ;
var termino = "";
var termino ="";
//Preguntamos si se envian los datos por el formulario
if !Request.QueryString["txttitulo"].IsEmpty
&&
!Request.QueryString["txtgenero"].IsEmpty
{
termino = Request.QueryString["txtgenero"];
termino = "%" + Request.QueryString["txttitulo"] + "%";
seleccionardatos = db.Query "SELECT * FROM peliculas WHERE Genero=@0 AND
Titulo LIKE @ ", termino,termino ;
}
else if Request.QueryString["txttitulo"].IsEmpty
&&
!Request.QueryString["txtgenero"].IsEmpty
{
//termino es lo que envia el usuario
termino = Request.QueryString["txtgenero"];
seleccionardatos = db.Query "SELECT * FROM peliculas WHERE Genero = @0",
termino ;
}
else if !Request.QueryString["txttitulo"].IsEmpty
&&
Request.QueryString["txtgenero"].IsEmpty
{
//termino es lo que envia el usuario
termino ="%" + Request.QueryString["txttitulo"]+"%";
seleccionardatos = db.Query "SELECT * FROM peliculas WHERE Titulo LIKE
@0", termino ;
}
else{
seleccionardatos=db.Query "SELECT * FROM peliculas" ;
}
//Cargamos los datos en la Grid
var grid = new WebGrid source: seleccionardatos, defaultSort: "Genero",
rowsPerPage: ;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<!-- Estilos de la tabla o el grid -->
<style type="text/css">
h {
font-family: 'Times New Roman', serif;
font-size:
px;
font-weight: bold;
}
.grid { margin: px; border-collapse: collapse;
width: 00px; }
.grid th, .grid td { border: px solid #C0C0C0;
padding: px; }
.head { background-color: #E8E8E8; font-weight: bold;
color: #FFF; }
.alt { background-color: #E8E8E8; color: #000; }
</style>
<title>Peliculas</title>
</head>
<body>
<!-- Formulario para buscar por genero -->
<form method="get">
<div>
<label for="txtgenero">Género para ver:</label>
<input type="text" name="txtgenero"
value="@Request.QueryString["txtgenero"]" /> <input type="Submit" value="Buscar
Genero" /><br/>
Dejar vacio para ver todas las peliculas. <br/>
<br>
<label for="txtgenero">Titulo de la Pelicula:</label>
<input type="text" name="txttitulo"
value="@Request.QueryString["txttitulo"]" />
<input type="Submit" value="Buscar por Titulo" /><br/>
Dejar vacio para ver todas las peliculas. <br/>
</div>
</form>
<!-- Se muestran los resultados y se tiene la grilla -->
<h >Resultados</h >
@grid.GetHtml
tableStyle: "grid",
headerStyle: "head",
alternatingRowStyle: "alt",
columns: grid.Columns
grid.Column "Titulo" ,
grid.Column "Genero" ,
grid.Column "Año"
</body>
</html>
Así sería el resultado de la página, de esta forma habréis conocido a hacer una selección
de datos.
Se pueden ver los datos de otra manera pero se verá eso más adelante, por ahora
dejémoslo en datagrid y pasemos a ver los temas que nos faltan.
Ingresando Datos a una tabla usando Formularios
¿Qué Construirás?
En los tutoriales hemos conocido un poco acerca de Razor con c#, ya manejamos el
select manejando placeholders para hacer nuestras selecciones, ya con esos
conocimientos empezamos a insertar datos a nuestra base con un formulario HTML.
En esta ocasión crearas una página CSHTM donde el usuario ingresara nuevas películas,
esta página tendrá un formulario con textboxes donde se deberá entrar el título, género y
año de una película.
Creando el Formulario Básico de Entrada
Crea una página CSHTM llamada agregarpelicula.cshtml
Añadirás el siguiente texto a tu archivo modificando solo la parte del html sin tocar el @{}.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Agregar Pelicula</title>
</head>
<body>
<h1>Agregar Pelicula</h1>
<form method="post">
<fieldset>
<legend>Información de la Pelicula</legend>
<p><label for="txttitulo">Titulo:</label>
<input type="text" name="txttitulo" value="@Request.Form["txttitulo"]" />
</p>
<p><label for="txtgenero">Genero:</label>
<input type="text" name="txtgenero" value="@Request.Form["txtgenero"]" />
</p>
<p><label for="txtyear">Año:</label>
<input type="text" name="txtyear" value="@Request.Form["txtyear"]" />
</p>
<p><input type="submit" name="btnsubmit" value="Agregar Pelicula" /></p>
</fieldset>
</form>
</body>
</html>
Como podemos ver usamos las etiquetas fieldset y legend las cuales me permiten ponerle
el nombre a un conjunto de inputs en un formulario, y no solo eso pueden notar además
que no uso el verbo GET, si no que uso el verbo POST debido a lo que se explicó en
capítulos anteriores.
Cada formulario como pueden ver recibe los valores que son enviados, aunque después
se modificara debido a que me gusta que existan buenas practicas, por ende quiero decir
que siempre a los nombres de cada input les agrego una preposición como txt para
textbox, btn para botones, psw para password, etc. Esto lo hago y quizás tú lo hagas para
buscar rápidamente los elementos del input y poderlos diferenciar.
Obteniendo Valores del Formulario
Ahora, tendrás que agregar código para procesar el formulario, deberás hacer lo
siguiente:
1. Chequear que la pagina ha sido enviada. Tú quieres que ese código corra cuando los
usuarios dan clic en el botón y no antes cuando la página carga en el navegador.
2. Obtendrás los valores que el usuario pone en los inputs. En este caso, porque el
formulario está siendo enviado a través de un post, tu obtendrás los valores desde la
colección request.Form.
3. Insertar los valores como un nuevo registro en la tabla de la base de datos.
En la parte superior del archivo escribir el siguiente código:
@{
//inicializamos variables
var titulo = "";
var genero = "";
var year = "";
//comprobamos si el usuario dio clic en agregar película
//comprobando el evento post
if(IsPost){
//Obtiene los valores de los inputs de texto
titulo = Request.Form["txttitulo"];
genero = Request.Form["txtgenero"];
year = Request.Form["txtyear"];
}
}
Los comentarios nos muestran un poco de lo que se hace, por lo tanto ya hemos hecho el
código necesario para que se pueda hacer una inserción de datos a nuestra tabla.
Agregando Datos a la Base de Datos
Suena redundante el título, pero vamos a ver como insertar datos a la tabla, ya
anteriormente en el mostrar datos hablamos de los comodines, pues esta vez no será la
excepción. Para eso debemos comprender el SQL de un INSERT, este INSERT me
permite agregar datos a la tabla de una base de datos, la sintaxis es:
INSERT INTO tabla (columna1, columna2, columna3, ...) VALUES (valor1, valor2, valor3,
...)
Donde se debe poner el nombre de la tabla, las columnas a las cuales se les dará los
valores y los valores que estas deben contener, si es de tipo fecha o texto se debe poner
la comilla sencilla rodeando el valor a poner, la comilla sencilla es esta ', me explico para
darme a entender, si tengo por ejemplo el nombre del género, debo ponerlo como se
muestra a continuación 'Acción'. Ya conociendo la sentencia INSERT de SQL
procedemos ahora a hacer el código para insertar nuestros valores a nuestra tabla.
//Abro mi base de datos
var db = Database.Open("nombredelabd");
//Genero mi cadena INSERT de SQL
var comandoinsertar = "INSERT INTO peliculas (Titulo, Genero, Año) VALUES(@0, @1,
@2)";
//Ejecuta el comando INSERT a la base de datos
db.Execute(comandoinsertar, titulo, genero, year);
Notamos algo, y es que los campos de la tabla a los cuales das valores es a Titulo,
Genero y Año ya que el Id es auto numérico, por lo tanto no me intereso mucho por este
campo ya que el motor de base de datos le asigna valor automáticamente.
Seguido de eso el usuario necesita saber si la base de datos ha registrado lo que él ha
escrito, para eso debemos direccionarlo a nuestra página donde tenemos el select, para
eso usamos lo siguiente:
Response.Redirect("~/carpeta/paginaselect.cshtml");
Response.Redirect("~/paginaselect.cshtml");
Response.Redirect("~/paginaselect");
De esa forma sabremos que lo que escribe el usuario está siendo escrito en nuestra base
de datos.
Validando las Entradas de Usuario
Resulta que a veces nuestro usuario se les olvida u omiten algunos valores que se solicita
en la tabla para hacer la fila. En mi caso yo no quiero que el usuario tenga un valor vacío,
ya que nulo en la mayoría de veces no puede ser, me explico para aquellos que quizás no
entendieron acerca del valor nulo, supongamos lo siguiente:
Escribo una variable y la inicializo, por ejemplo que var nombre="";.
Una vez hecho eso mi variable tiene como valor "" el cual podríamos definir como un
carácter que no tiene espacio, pero que para SQL no es nulo y por lo tanto es un valor
valido, es decir el vacío en programación existe y por lo tanto no es un valor nulo.
Ahora bien si a esa variable nombre no la inicializo, la variable obtiene un valor nulo ya
que no existe, ya que no tiene ningún valor, recordemos que nulo es algo que no existe o
que no se le ha dado un valor.
Los datos que envía nuestro usuario no son nulos si no vacíos, ya que la caja de texto
“textbox” tiene como valor por defecto un "", es decir un string o cadena que tiene un valor
vacío, entonces el input de texto que envía nuestro usuario es vacío, por lo tanto SQL
puede registrar elementos vacíos.
Validando con un Helper
Anteriormente vimos cómo se instala un helper y lo usamos para un gravatar, ahora
usaremos estos helpers para hacer las respectivas validaciones de los datos solicitados al
usuario.
Para eso usamos el helper Validation, este me permite validar que los datos estén
correctos, para validar estos datos tú harás lo siguiente:
Usar código para especificar qué valores requieres en las cajas de texto de la
página.
Haz una prueba en el código así que la información de la película es agregada a la
base de datos solo si cada campo ha sido validado.
Agrega un código para mostrar mensajes de error.
Validation nos ofrece un método que nos permite hacer identificar si el campo tiene algún
valor, y para eso usaremos la siguiente
sintaxis:
Validation.RequireField("nameinput","Mensaje de error");
Es fácil de entenderlo, nos pide el nombre del input y el mensaje que mostraremos si
nuestro usuario no escribe nada en dicho campo.
Ahora queremos saber si las validaciones se hicieron correctamente para que se pueda
hacer la inserción en la tabla de la base de datos, para eso usamos lo siguiente:
Validation.IsValid()
Esta validación devuelve un True o un False si se cumple o no las validaciones.
Por lo tanto con el ejercicio que estamos haciendo debe quedar el siguiente código:
Validation.RequireField "txttitulo","Debes ponerle el título" ;
Validation.RequireField "txtgenero","Debes poner un género" ;
Validation.RequireField "txtyear","El año no debe estar vacío" ;
//inicializamos variables
var titulo = "";
var genero = "";
var year = "";
//comprobamos si el usuario dio clic en agregar película
//comprobando el evento post
if IsPost && Validation.IsValid
{
//Obtiene los valores de los inputs de texto
titulo = Request.Form["txttitulo"];
genero = Request.Form["txtgenero"];
year = Request.Form["txtyear"];
var db = Database.Open "nombredelabd" ;
var comandoinsertar = "INSERT INTO peliculas Titulo, Genero, Año VALUES @0,
@ , @ ";
db.Execute comandoinsertar, titulo, genero, year ;
Response.Redirect "~/webgrid" ;
}
Pero ahora tenemos que hacer algo, tenemos que mostrar los errores de los campos no
validados y que por ende tienen un valor vacío, esta parte ya corresponde a nuestro html,
como mostraremos ese error y advertiremos a nuestro usuario que ese campo debe estar
completo.
Como podrán notar en este manual se muestra dos formas para hacerlo.
La primera es mostrar los mensajes a traves de una lista, para eso usaremos el siguiente
comando:
@Html.ValidationSummary()
El segundo metodo es poner el mensaje de error en los inputs, ya sea debajo, al lado, etc.
Se usa para eso el siguiente comando:
@Html.ValidationMessage("nameinput")
Cabe recordar que nameinput es el nombre del input.
Dando estilos para los Mensajes de Error
Los mensajes de errores que usa Validation, son mensajes de texto, por lo tanto puedo
crear los estilos y poner las clases creadas en una etiqueta de texto.
Primero creemos los estilos, los estilos irán en el <head>, los estilos serán:
<style type="text/css">
.field-validation-error {
font-weight:bold;
color:red;
}
.validation-summary-errors{
border:2px dashed red;
color:red;
font-weight:bold;
margin:12px;
}
</style>
Donde el primero es para los errores al lado del input y el otro es para la lista de errores.
Tu puedes poner los css en un archivo .css, pero para simplificar los ejemplos lo haremos
en el archivo cshtml.
Estilos para el error en el input.
<span class="field-validation-error">@Html.ValidationMessage("nameinput")</span>
Estilos para la lista de errores.
<span class="validation-summary-errors"> @Html.ValidationSummary()</span>
Agregando un Link
Creo que en una tutoría anterior, hablamos de como redireccionar con razón, ahora
veremos un breve ejemplo de cómo hacerlo con un vínculo.
<p>
<a href="~/nombrepagina">Add a movie</a>
</p>
No siendo más y para terminar mostrare el código y los pantallazos de lo que sería
nuestro producto final.
Este sería nuestro código:
@{
Validation.RequireField "txttitulo","Debes ponerle el título" ;
Validation.RequireField "txtgenero","Debes poner un género" ;
Validation.RequireField "txtyear","El año no debe estar vacío" ;
//inicializamos variables
var titulo = "";
var genero = "";
var year = "";
//comprobamos si el usuario dio clic en agregar película
//comprobando el evento post
if IsPost && Validation.IsValid
{
//Obtiene los valores de los inputs de texto
titulo = Request.Form["txttitulo"];
genero = Request.Form["txtgenero"];
year = Request.Form["txtyear"];
var db = Database.Open "nombredelabd" ;
var comandoinsertar = "INSERT INTO peliculas Titulo, Genero, Año VALUES @0,
@ , @ ";
db.Execute comandoinsertar, titulo, genero, year ;
Response.Redirect "~/webgrid" ;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Agregar Pelicula</title>
<style type="text/css">
.field-validation-error {
font-weight:bold;
color:red;
}
.validation-summary-errors{
color:red;
font-weight:bold;
margin: px;
}
</style>
</head>
<body>
<h >Agregar Pelicula</h >
<form method="post">
<fieldset>
<legend>Información de la Pelicula</legend>
<p><label for="txttitulo">Titulo:</label>
<input type="text" name="txttitulo" value="@Request.Form["txttitulo"]"
/>
<br>
<span class="field-validationerror">@Html.ValidationMessage "txttitulo" </span>
</p>
/>
<p><label for="txtgenero">Genero:</label>
<input type="text" name="txtgenero" value="@Request.Form["txtgenero"]"
<br>
<span class="field-validationerror">@Html.ValidationMessage "txtgenero" </span>
</p>
<p><label for="txtyear">Año:</label>
<input type="text" name="txtyear" value="@Request.Form["txtyear"]" />
<br>
<span class="field-validationerror">@Html.ValidationMessage "txtyear" </span>
</p>
<p><input type="submit" name="btnsubmit" value="Agregar Pelicula" /></p>
</fieldset>
<span class="validation-summary-errors"> @Html.ValidationSummary
</form>
</body>
</html>
</span>
Esto sería lo que se verá en nuestro navegador:
Con un campo vacío se vería asi:
Ahora veremos lo que es actualizar nuestra base de datos.
Actualizando Data de una Base de Datos
¿Qué haremos?
En el anterior tutorial aprendiste acerca de ¿cómo guardar registros en la base de datos?,
ahora aprenderás como se editan los datos, en caso de que nuestro usuario escriba una
información o dato mal, y este desee corregirlo. Empecemos.
Adicionar un vínculo para Editar
Para empezar crearemos una página llamada editarpelicula.cshtml.
Seguido de eso iremos a la página donde mostramos nuestras películas en un
gridview.
El gridview llevara un link que nos llevara a la página editarpelicula, llevando consigo en la
URL el id de la película. Se usara el siguiente código para añadir la columna:
grid.Column(format: @<a href="~/editarpelicula?id=@item.ID">Editar</a>)
En este código agregamos una nueva columna llamada editar y tomamos el ID de nuestra
película, el cual será pasado a otro archivo CSHTML para ser modificado los datos. Una
vez puesto ese código en nuestra grilla debemos empezar con nuestra página de
modificación de datos.
Nuestra grilla quedaría así:
@grid.GetHtml(
tableStyle: "grid",
headerStyle: "head",
alternatingRowStyle: "alt",
columns: grid.Columns(
grid.Column(format: @<a href="~/editarpelicula?id=@item.ID">Editar</a>),
grid.Column("Titulo"),
grid.Column("Genero"),
grid.Column("Año")
));
Creando una columna personalizada en una Grid
Veremos algo para complementar la grid de la vista de nuestros datos, como es un código
HTML que se nos forma para que lo visualice nuestro usuario yo como su desarrollador
puedo personalizarlo y poner en la grilla etiquetas HTML.
En la página verán que pusimos como código grid.Column("nombredecolumna"), pero
ahora razor me ofrece la oportunidad de que yo pueda ponerle etiqueta HTML a esa
columna, es decir, que esa columna se vea distinta a
las demas, entonces puedo poner lo siguiente:
grid.Column(format:@<etiquetahtml>@item.columnatabla</etiquetahtml>)
Este código que puse al final indica que format me permite añadir HTML al código del
grid, por ende una vez haces eso tú debes poner el item a mostrar, en este caso
pretendemos mostrar datos, pero como los mostramos, usamos la clase item, que
almacena los datos que se obtienen en la consulta, entonces determinamos que
columnatabla es el nombre de la columna de nuestra tabla que está en la base de datos.
La página de actualización
Hace mucho creamos nuestra página editarpelicula.cshtml.
Que nos falta en ella, solo el contenido para mandar nuestros datos, para eso añadiremos
en el html el siguiente código:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Editar una Película</title>
<style>
.validation-summary-errors{
border: px dashed red;
color:red;
font-weight:bold;
margin: px;
}
</style>
</head>
</head>
<body>
<h >Editar Película</h >
@Html.ValidationSummary
<form method="post">
<fieldset>
<legend>Información de Película</legend>
<p><label for="txttitulo">Título:</label>
<input type="text" name="txttitulo" value="@titulo" /></p>
<p><label for="txtgenero">Género:</label>
<input type="text" name="txtgenero" value="@genero" /></p>
<p><label for="txtyear">Año:</label>
<input type="text" name="txtyear" value="@year" /></p>
<input type="hidden" name="idpelicula" value="@peliculaID" />
<p><input type="submit" name="btnguardarcambios" value="Guardar Cambios"
/></p>
</fieldset>
</form>
</body>
</html>
Si notan esta página es igual a la que usamos para ingresar nuestras películas, en esta
ocasión la usaremos para editar y si miran los inputs cada uno tiene un value que tiene la
forma @variable, donde cada uno de esos valores corresponde a un valor de nuestra
película, como lo son el ID, titulo, género y el año.
En esta ocasión nuestra página deberá tomar los valores del ID de la película a la cual
editaremos y deberá mostrar los datos, siendo estos guardados en una variable, para eso
debemos agregar un código Razor para leer el ID de la película seleccionada y que se
nos muestre los datos a cambiar, el código es:
var titulo = "";
var genero = "";
var year = "";
var peliculaID = "";
if !IsPost {
if !Request.QueryString["id"].IsEmpty
{
peliculaID = Request.QueryString["id"];
var db = Database.Open "nombredelabd" ;
var dbCommand = "SELECT * FROM peliculas WHERE ID = @0";
var row = db.QuerySingle dbCommand, peliculaID ;
titulo = row.Titulo;
genero = row.Genero;
year = row.Año;
}
}
else{
Validation.AddFormError "No tienes seleccionada una pelicula." ;
}
Recuerda que este código debe ir en el @{…}.
Con este código tomamos nuestro ID de película para mostrar los valores que tenemos en
la tabla de acuerdo a una película, veremos algunos códigos nuevos para poder
entenderlos y saber para que nos sirven.
Request.QueryString["variable"] me permite leer una variable que pasamos a través de
la URL. En nuestro ejemplo vemos que nos permite leer la id de nuestra película.
var row = db.QuerySingle(cadenaselect, placeholder) este código me permite
almacenar una consulta donde se tiene una sola fila la cual contiene los valores que
usaremos para su respectiva modificación. Notamos en el código que row adquiere los
valores de los nombres de las columnas de nuestra tabla como si fuesen variables de una
clase las cuales podemos usar después.
row.nombrecolumna esto permite obtener el valor que necesitamos de acuerdo a la fila y
columna que se está necesitando, podemos determinar que row es una variable que
puede obtener otros nombres convirtiéndose con el método QuerySingle en una clase que
adquiere como propiedades los nombres de las columnas de la tabla.
Para no enredar ni complicar el tutorial, con ese código y con estos métodos podemos
obtener los valores para mostrar en nuestra página web razor a través de un valor pasado
por una URL.
Actualizando los Datos
Ahora ya debemos poner a funcionar nuestro botón submit, una vez hecho eso podremos
hacer que nuestro usuario pueda modificar las películas ingresadas si ha cometido un
error, para eso usaremos un código que es parecido al de registrar una película, solo que
en esta ocasión nos servirá para actualizar. Pero antes conoceremos la sentencia sql que
nos sirve para actualizar a través del siguiente código:
UDAPTE
nombretabla
SET
columna1='valor',columna2='valor',...columnan='valor'
WHERE columnacondicion=valor
Udapte en lenguaje SQL me permite actualizar el valor de un campo o varios campos a
través de una condición, sin esa condición puedo actualizar los valores de todas las
películas generando un error. Actualizar significa modificar o cambiar dichos valores por
otro que al final usaremos.
Finalmente este es el código que usaremos para que se actualice nuestra página y
nuestro usuario corrija los errores que cometió al ingresar su película.
if IsPost {
Validation.RequireField "txttitulo","Debes ponerle el título" ;
Validation.RequireField "txtgenero","Debes poner un género" ;
Validation.RequireField "txtyear","El año no debe estar vacío" ;
Validation.RequireField "idpelicula", "¡No existe la pelicula!" ;
titulo = Request.Form["txttitulo"];
genero = Request.Form["txtgenero"];
year = Request.Form["txtyear"];
peliculaID = Request.Form["idpelicula"];
Año=@
}
}
if Validation.IsValid
{
var db = Database.Open "nombredelabd" ;
var updateCommand = "UPDATE peliculas SET Titulo=@0, Genero=@ ,
WHERE ID=@ ";
db.Execute updateCommand, titulo, genero, year, peliculaID ;
Response.Redirect "~/webgrid" ;
}
Comprobando que el ID es numérico
Siempre para que un usuario no quede viendo errores en nuestra página, debemos tratar
de conocerlos y darles una solución, un error común es que a veces con la URL es que el
usuario puede poner una a o un valor no numérico mostrando un error, y eso es lo
queremos evitar, para eso debemos decirle que si en realidad el valor dado es un numero
entero y decirle al usuario que no hay ningún error en eso, para determinar que un valor
es entero usamos el método isInt(), que nos devolverá true o false según el caso, veamos
cómo usarlo al solicitar el valor del ID de la película a nuestro cliente:
Request.QueryString["ID"].IsInt()
Usaremos este código en una condicional if, y en caso de ser erróneo le mostraremos al
usuario el error.
Comprobando que las filas no estén vacías
Una de las cosas que más preocupa a un programador son los errores en tiempo de
ejecución, pero aun así algo que nos da miedo es que el usuario vea esos errores o que
un hacker pueda acceder a nuestras tablas, para evitar esos errores debemos comprobar
cada sentencia y la que actualmente me preocupa es saber si la fila tiene algún valor.
Para eso usaremos la variable que usamos para guardar los valores de nuestra consulta a
la base de datos, en este ejercicio la llamamos row, comprobaremos que no está vacía a
través del siguiente código:
if(row!=null){
//sentencias si esta correcta
}
En esta condición estamos diciendo que row no tenga un valor nulo o que no exista, así
evitamos que cuando nuestro usuario escriba o modifique la URL un valor que no existe,
supongamos que tenemos cincuenta registros y nuestro usuario escriba 100, es un valor
que no existe y por lo tanto enviara un error en la sentencia.
Agregando un Vínculo para regresar a ver nuestras películas
Ahora para finalizar queremos que en caso de que nuestro usuario no quiera modificar la
película pueda regresar a ver las películas que tenga almacenadas, como siempre
hacemos un link simple que dice así:
<p><a href="~/webgrid">Regresar a la Lista de Películas</a></p>
Con esto hemos terminado la parte de este tutorial, ahora solo nos queda algo por hacer
en nuestra base de datos la cual veremos a continuación. Ahora dejare cual es el código
de la página que hemos realizado.
@{
var titulo = "";
var genero = "";
var year = "";
var peliculaID = "";
if !IsPost {
if !Request.QueryString["id"].IsEmpty
&&
Request.QueryString["ID"].IsInt
{
peliculaID = Request.QueryString["id"];
var db = Database.Open "nombredelabd" ;
var dbCommand = "SELECT * FROM peliculas WHERE ID = @0";
var row = db.QuerySingle dbCommand, peliculaID ;
if row!=null {
titulo = row.Titulo;
genero = row.Genero;
year = row.Año;
}
else{
titulo = "No Data";
genero = "No Data";
year = "No Data";
}
}
else{
Validation.AddFormError "No tienes seleccionada una pelicula." ;
}
}
if IsPost {
Validation.RequireField "txttitulo","Debes ponerle el título" ;
Validation.RequireField "txtgenero","Debes poner un género" ;
Validation.RequireField "txtyear","El año no debe estar vacío" ;
Validation.RequireField "idpelicula", "¡No existe la pelicula!" ;
titulo = Request.Form["txttitulo"];
genero = Request.Form["txtgenero"];
year = Request.Form["txtyear"];
peliculaID = Request.Form["idpelicula"];
Año=@
if Validation.IsValid
{
var db = Database.Open "nombredelabd" ;
var updateCommand = "UPDATE peliculas SET Titulo=@0, Genero=@ ,
WHERE ID=@ ";
db.Execute updateCommand, titulo, genero, year, peliculaID ;
}
}
}
Response.Redirect "~/webgrid" ;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Editar una Película</title>
<style>
.validation-summary-errors{
border: px dashed red;
color:red;
font-weight:bold;
margin: px;
}
</style>
</head>
</head>
<body>
<h >Editar Película</h >
@Html.ValidationSummary
<form method="post">
<fieldset>
<legend>Información de Película</legend>
<p><label for="txttitulo">Título:</label>
<input type="text" name="txttitulo" value="@titulo" /></p>
<p><label for="txtgenero">Género:</label>
<input type="text" name="txtgenero" value="@genero" /></p>
<p><label for="txtyear">Año:</label>
<input type="text" name="txtyear" value="@year" /></p>
<input type="hidden" name="idpelicula" value="@peliculaID" />
<p><input type="submit" name="btnguardarcambios" value="Guardar Cambios"
/></p>
</fieldset>
</form>
<p><a href="~/webgrid">Regresar a la Lista de Películas</a></p>
</body>
</html>
Eliminando Datos
¿Qué construirás?
Hemos aprendido mucho acerca de usar Razor y la manipulación de una base de datos,
hemos aprendido acerca de registrar, seleccionar y actualizar datos en una tabla, ahora
veremos algo que es importante, eliminar dicho registro para no volver a verlo o
simplemente que a nuestro usuario no le gusto la película.
Agregando un Vínculo para Eliminar la Película
Esto es muy parecido al que hicimos en modificar, en esta ocasión vamos a eliminar los
datos, así que usaremos el siguiente valor:
grid.Column(format: @<a href="~/eliminarpelicula?id=@item.ID">Eliminar</a>)
De esta forma aseguramos los valores que vamos a eliminar y que el usuario si se
arrepiente de eliminar regrese a la vista de los datos.
Creando la página para eliminar
Ahora crearemos la página eliminarpelicula.cshtml.
Esta página nos permitirá eliminar la película que nuestro usuario selecciono para que ya
no aparezca más en nuestra tabla, empecemos a crear esta página la cual tendrá el
siguiente código:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Eliminar Película</title>
</head>
<body>
<h >Eliminar Película</h >
@Html.ValidationSummary
<form method="post">
<fieldset>
<legend>Información de Película</legend>
<p><span>Titulo:</span>
<span>@titulo</span></p>
<p><span>Genero:</span>
<span>@genero</span></p>
<p><span>Año:</span>
<span>@year</span></p>
<input type="hidden" name="peliculaid" value="@peliculaId" />
<p><input type="submit" name="btneliminar" value="Eliminar
Película" /></p>
</fieldset>
</form>
<p><a href="~/webgrid">Regresar a la Lista de Películas</a></p>
</body>
</html>
Anteriormente vimos este código a través de la página editar, el cual tomara los valores
de la tabla películas de nuestra base de datos para verlos más adelante y así el usuario
sabrá que está eliminando:
@{
var titulo = "";
var genero = "";
var year = "";
var peliculaId = "";
if !IsPost {
if !Request.QueryString["id"].IsEmpty
&&
Request.QueryString["id"].IsInt
{
peliculaId = Request.QueryString["id"];
var db = Database.Open "nombredelabd" ;
var dbCommand = "SELECT * FROM peliculas WHERE ID = @0";
var row = db.QuerySingle dbCommand, peliculaId ;
if row != null {
titulo = row.Titulo;
genero = row.Genero;
year = row.Año;
}
else{
Validation.AddFormError "La película no fue encontrada,
ID incorrecto." ;
}
}
else{
Validation.AddFormError "Película no fue encontrada por el
ID." ;
}
}
}
Agregando el código para eliminar
Finalmente agregaremos el código para eliminar un registro, pero para eso vamos a
conocer lo que es su sentencia SQL, la sentencia SQL para eliminar un registro de una
tabla es:
DELETE FROM tabla WHERE columnacondicion = valor
Estamos diciendo que elimine desde la tabla el registro donde se cumple la condición,
algo que siempre le digo a muchos y te diré a ti, no olvides de poner el WHERE en un
DELETE FROM, ya que podría generar un problema y recuperar esos datos seria difícil o
muy poco sencillo.
Para no alargar este tutorial se enseñara como se hace un DELETE de un registro usando
Razor, debes saber que es parecido a UPDATE, solo que cambia lo que se hace, veamos
el código para desglosarlo y entenderlo mejor.
if IsPost && !Request["btneliminar"].IsEmpty
{
peliculaId = Request.Form["peliculaId"];
var db = Database.Open "nombredelabd" ;
var deleteCommand = "DELETE FROM peliculas WHERE ID = @0";
db.Execute deleteCommand, peliculaId ;
Response.Redirect "~/webgrid" ;
}
Lo único que podemos ver qué cambio es el hecho de que debemos saber cuál es el
botón que envía el formulario, en este caso lo vemos a través del código
!Request["btneliminar"].IsEmpty(), de lo demás es muy parecido a lo que hemos visto, en
conclusión esto es lo relacionado con eliminar y con el propósito de la primera parte del
manual de Páginas Web con Razor.
Este sería el código para nuestra página de eliminar.
@{
var titulo = "";
var genero = "";
var year = "";
var peliculaId = "";
if !IsPost {
if !Request.QueryString["id"].IsEmpty
&&
Request.QueryString["id"].IsInt
{
peliculaId = Request.QueryString["id"];
var db = Database.Open "nombredelabd" ;
var dbCommand = "SELECT * FROM peliculas WHERE ID = @0";
var row = db.QuerySingle dbCommand, peliculaId ;
if row != null {
titulo = row.Titulo;
genero = row.Genero;
year = row.Año;
}
else{
Validation.AddFormError "La película no fue encontrada,
ID incorrecto." ;
}
}
else{
Validation.AddFormError "Película no fue encontrada por el
ID." ;
}
}
if IsPost && !Request["btneliminar"].IsEmpty
{
peliculaId = Request.Form["peliculaId"];
var db = Database.Open "nombredelabd" ;
var deleteCommand = "DELETE FROM peliculas WHERE ID = @0";
db.Execute deleteCommand, peliculaId ;
Response.Redirect "~/webgrid" ;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Eliminar Película</title>
</head>
<body>
<h >Eliminar Película</h >
@Html.ValidationSummary
<form method="post">
<fieldset>
<legend>Información de Película</legend>
<p><span>Titulo:</span>
<span>@titulo</span></p>
<p><span>Genero:</span>
<span>@genero</span></p>
<p><span>Año:</span>
<span>@year</span></p>
<input type="hidden" name="peliculaid" value="@peliculaId" />
<p><input type="submit" name="btneliminar" value="Eliminar
Película" /></p>
</fieldset>
</form>
<p><a href="~/webgrid">Regresar a la Lista de Películas</a></p>
</body>
</html>
Ahora solo nos queda ponerle aspecto para que se vea mejor nuestra página ante los ojos
del usuario.
Este sería el aspecto de nuestra página donde se visualizan las películas.
Esta sería la página cuando damos clic en editar, así sería su aspecto en estos
momentos.
Crear un Diseño Consistente
En este tutorial vamos a crear una vista para nuestros datos y para nuestro sitio web, que
sea visible y amigable con el usuario.
Acerca de los Diseños (Layouts)
Estamos viendo una página que pues seré sincero, es muy simple y poco atractiva, un
diseño de una página web siempre está dividido en tres partes, las cuales son:
Header: en esta se tiene el nombre del sistema, sitio web, etc. Es decir nuestro
encabezado.
Content: En esta parte tenemos nuestro contenido, es decir, textos, formularios,
imágenes, etc.
Footer: en esta parte siempre se pone el creador del sitio, aunque otros diseñadores lo
usan para otros fines.
Podemos ver un ejemplo desde la página de youtube, este ejemplo define una página
organizada y a la cual nosotros queremos llegar a crear.
Microsoft nos dice que crear paginas por separado es muy molesto y nos sugiere que
creemos una sola página utilizando lo que conocemos como layouts, estos layouts nos
ahorra el trabajo de crear la misma página una y otra vez, y solo generar una sola página
la cual muchos llamamos como página maestra que contendrá nuestro header, nuestro
footer pero lo que si permitirá que es distinto es el content.
Si queremos comprenderlo, hagamos y entendamos lo sencillo que es crear estos layouts
para usarlos en un futuro. Dejare un ejemplo el cual nos mostrara como se usan los
layouts.
Agregando una Pagina Layout
Tú empezaras creando una página de diseño que define una típica página con un header,
un footer y un área para nuestro contenido. En el sitio web que creamos, agregaremos
una página llamada _layout.cshtml. El subrayado es de carácter significativo. Si una
página con nombre empezado con un guion al piso, ASP.NET no enviara esa página en el
navegador. Esta convención permite definir páginas que son requeridas para su sitio pero
que los usuarios no deberán ser capaces para dirigirse a ellas.
Remplazando el contenido en la página con el siguiente código:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Mi Sitio de Películas</title>
<link href="~/estilos/estilos.css" rel="stylesheet"
type="text/css" />
</head>
<body>
<header>
<h >Mi Sitio de Películas</h >
</header>
<div id="contenido">
@RenderBody
</div>
<footer>
Creado por nombredeempresa © @DateTime.Now.Year
</footer>
</body>
</html>
Hemos dividido en tres secciones nuestro layout, si ven está dividido en el header, footer
y content, usando en gran parte HTML5. Notamos en el footer algo que dice
@DateTime.Now.Year, el cual es un código razor para obtener el año actual. Vemos el
© el cual genera el símbolo de derechos de copia, y finalmente Creado por
nombreempresa, donde nombreempresa puede ser el nombre de la empresa creadora o
el autor.
@RenderBody() va a ser el que me permitirá el cambio entre los contenidos de las
paginas, de esa forma veremos el cambio de la página a través del diseño que tenemos
en cada uno.
Finalmente hemos añadidos estilos usando la etiqueta del head <link> apuntando a la
carpeta estilos y el nombre del archivo estilos.css, no entrare en detalles pero debes
saber que es importante para tener un mejor aspecto.
Agregando un Archivo .css
La forma preferida para darle aspecto a un sitio es a través de estilos css(cascading style
sheet), para crear un estilo y tener un orden, generalmente lo guardamos en una carpeta,
esa carpeta seria estilos, también podrías llamarla css, style, etc. Pero recuerda que la
carpeta que crees guardara todos tus estilos, algo que también deberías saber es que
siempre debemos ponerles orden a tus sitios web, en una carpeta guardaras tus
imágenes, en otras tus estilos, y en otra carpeta lo que desees, esto te facilitara buscar
las cosas y además crear una página web compleja y fácil de entender.
Ahora lo primero que haremos será crear una carpeta la cual llamaremos estilos.
Seguido de eso creamos nuestro archivo de estilos llamado estilos.css.
Ahora crearemos nuestro css para mejorar el aspecto de nuestro sitio web, estos serían
nuestros estilos:
/*Etiqueta HEADER*/
header{
font-weight: bold;
color: #000000;
width: 00%;
text-align: center;
border-bottom: px ridge # 0 0 0;
margin-bottom: px;
}
/*h header*/
header h {
font-size:
px;
font-family: Tahoma,serif;
}
/* estilos del contenido*/
#contenido{
width: 00%;
height: auto;
margin-bottom: px;
margin-top: 8px;
}
#contenido h ,h ,h ,h ,h {
font-weight: bold;
font-size:
px;
font-family: Georgia,serif;
}
/*Formularios*/
label{
font-family: Verdana,sans-serif;
font-size:
px;
font-weight: bold;
}
input[type="submit"] {
padding: px;
font-family: Verdana,sans-serif;
font-weight: bold;
font-size:
px;
}
input[type="text"] {
padding: px;
font-family: Verdana,sans-serif;
font-size:
px;
width: 00px;
-webkit-border-radius: px;
-moz-border-radius: px;
border-radius: px;
}
fieldset{-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
padding: 0px;
}
legend{font-weight: bold;
font-size:
px;
font-family: Georgia,serif;}
/*Vinculos*/
a.botonlink{
font-family: Verdana,sans-serif;
font-size:
px;
padding: 0px;
text-decoration: none;
background: #000000;
color: #ffffff;
}
a.botonlink:hover{background: # 0 0 0;}
a.botonlink:active{padding-bottom: px; padding-top:
.grid tfoot{
font-weight: bold;
font-family: Verdana,sans-serif;
font-size:
px;
padding: 0px;
height: auto !important;
padding-top: px;
px;}
padding-bottom:
px;
}
.grid tfoot tr td a{
font-family: Verdana,sans-serif;
font-size:
px;
padding: 0px;
text-decoration: none;
background: #000000;
color: #ffffff;
font-weight: normal;
}
.grid tfoot tr td a:hover{background: # 0 0 0;}
.grid tfoot tr td a:active{padding-bottom: px; padding-top:
/*Estilos Footer*/
footer{
font-family: Verdana,sans-serif;
font-weight: bold;
font-size:
px;
width: 00%;
text-align: center;
border-top: px solid #000000;
}
px;}
Estos estilos serán comunes en toda la página y serán de mucha ayuda para modificar el
aspecto de las paginas, aquí solo juego con los estilos, pero dejo esos cambios a criterio
de ti, tu puedes generar los estilos que desees e incluso hacer un aspecto mejor del
propuesto acá, puedes usar incluso bootstrap pero eso sería hablar de otro tema.
Actualizando el Diseño(Layout)
Para eso usamos el siguiente código:
Layout = "~/_layout.cshtml";
Este código me permite ingresar la plantilla a mi página tomando los estilos css que he
creado para mi página, además si la implementas te ahorras de escribir el código de tu
header y el código del footer, que por ende no cambian mucho.
Pero algo que tampoco cambia es el título así que para eso existe una solución, ponemos
el siguiente código en cada página:
Page.Title = "Título de la página";
Esto pondrá el título de la página reemplazando a la etiqueta <title>.
Una vez hecho esto queda un paso por hacer, así es debemos eliminar el código
innecesario para que nuestras páginas tomen el diseño y como llegar a decirlo, no sea tan
pesada en el tamaño de cada archivo.
Para tener una idea mostrare ahora las páginas del proyecto con su respectivo código y
ese sería nuestro resultado final, nuestro sitio web para agregar páginas, aún no hemos
terminado de recorrer asp.net web pages razor, esto es solo el inicio para irlo
comprendiendo, porque lo que vendrá a continuación ayudara a que entres en este
mundo y puedas crear buenas aplicaciones usando la plataforma .NET.
Estas serán las páginas de nuestro proyecto:
estilos.css
/*Etiqueta HEADER*/
header{
font-weight: bold;
color: #000000;
width: 00%;
text-align: center;
border-bottom: px ridge # 0 0 0;
margin-bottom: px;
}
/*h header*/
header h {
font-size:
px;
font-family: Tahoma,serif;
}
/* estilos del contenido*/
#contenido{
width: 00%;
height: auto;
margin-bottom: px;
margin-top: 8px;
}
#contenido h ,h ,h ,h ,h {
font-weight: bold;
font-size:
px;
font-family: Georgia,serif;
}
/*Formularios*/
label{
font-family: Verdana,sans-serif;
font-size:
px;
font-weight: bold;
}
input[type="submit"] {
padding: px;
font-family: Verdana,sans-serif;
font-weight: bold;
font-size:
px;
}
input[type="text"] {
padding: px;
font-family: Verdana,sans-serif;
font-size:
px;
width: 00px;
-webkit-border-radius: px;
-moz-border-radius: px;
border-radius: px;
}
fieldset{-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
padding: 0px;
}
legend{font-weight: bold;
font-size:
px;
font-family: Georgia,serif;}
/*Vinculos*/
a.botonlink{
font-family: Verdana,sans-serif;
font-size:
px;
padding: 0px;
text-decoration: none;
background: #000000;
color: #ffffff;
}
a.botonlink:hover{background: # 0 0 0;}
a.botonlink:active{padding-bottom: px; padding-top: px;}
.grid tfoot{
font-weight: bold;
font-family: Verdana,sans-serif;
font-size:
px;
padding: 0px;
height: auto !important;
padding-top: px;
padding-bottom: px;
}
.grid tfoot tr td a{
font-family: Verdana,sans-serif;
font-size:
px;
padding: 0px;
text-decoration: none;
background: #000000;
color: #ffffff;
font-weight: normal;
}
.grid tfoot tr td a:hover{background: # 0 0 0;}
.grid tfoot tr td a:active{padding-bottom: px; padding-top:
/*Estilos Footer*/
footer{
font-family: Verdana,sans-serif;
font-weight: bold;
px;}
font-size:
px;
width: 00%;
text-align: center;
border-top: px solid #000000;
}
/*WEBGRID*/
.grid { margin: px; border-collapse: collapse;
width: 00px; }
.grid th, .grid td { border: px solid #C0C0C0;
padding: px; }
.head { background-color: #E8E8E8; font-weight: bold;
color: #FFF; }
.head a{
}
.alt { background-color: #E8E8E8; color: #000; }
/*Errores*/
.field-validation-error {
font-weight:bold;
color:red;
}
.validation-summary-errors{
color:red;
font-weight:bold;
margin: px;
}
_layout.cshtml
<!DOCTYPE html>
<html lang="en">
<head>
<title>@Page.Title</title>
<link href="~/estilos/estilos.css" rel="stylesheet"
type="text/css" />
</head>
<body>
<header>
<h >Mi Sitio de Películas</h >
</header>
<div id="contenido">
@RenderBody
</div>
<footer>
Creado por nombredeempresa © @DateTime.Now.Year
</footer>
</body>
</html>
gravatar.cshtml
@{
}
Layout = "~/_layout.cshtml";
Page.Title="Gravatar";
@Gravatar.GetHtml "john@contoso.com",
webgrid.cshtml
@{
0, "wavatar"
Layout = "~/_layout.cshtml";
Page.Title="Peliculas";
//Abrimos la base de datos y hacemos la consulta
var db = Database.Open "nombredelabd" ;
var seleccionardatos=db.Query "SELECT * FROM peliculas" ;
var termino = "";
var termino ="";
//Preguntamos si se envian los datos por el formulario
if !Request.QueryString["txttitulo"].IsEmpty
&&
!Request.QueryString["txtgenero"].IsEmpty
{
termino = Request.QueryString["txtgenero"];
termino = "%" + Request.QueryString["txttitulo"] + "%";
seleccionardatos = db.Query "SELECT * FROM peliculas WHERE
Genero=@0 AND Titulo LIKE @ ", termino,termino ;
}
else if Request.QueryString["txttitulo"].IsEmpty
&&
!Request.QueryString["txtgenero"].IsEmpty
{
//termino es lo que envia el usuario
termino = Request.QueryString["txtgenero"];
seleccionardatos = db.Query "SELECT * FROM peliculas WHERE
Genero = @0", termino ;
}
else if !Request.QueryString["txttitulo"].IsEmpty
&&
Request.QueryString["txtgenero"].IsEmpty
{
//termino es lo que envia el usuario
termino ="%" + Request.QueryString["txttitulo"]+"%";
seleccionardatos = db.Query "SELECT * FROM peliculas WHERE
Titulo LIKE @0", termino ;
}
else{
seleccionardatos=db.Query "SELECT * FROM peliculas" ;
}
//Cargamos los datos en la Grid
var grid = new WebGrid source: seleccionardatos, defaultSort:
"Genero", rowsPerPage: 0 ;
}
<div>
<!-- Formulario para buscar por genero -->
<form method="get">
<label for="txtgenero">Género para ver:</label>
<input type="text" name="txtgenero"
value="@Request.QueryString["txtgenero"]" /> <input type="Submit"
value="Buscar Género" /><br/>
Dejar vacio para ver todas las películas. <br/>
<br>
<label for="txtgenero">Título de la Película:</label>
<input type="text" name="txttitulo"
value="@Request.QueryString["txttitulo"]" />
<input type="Submit" value="Buscar por Título" /><br/>
Dejar vacio para ver todas las películas. <br/>
</div>
</form>
<!-- Se muestran los resultados y se tiene la grilla -->
<h >Resultados</h >
@grid.GetHtml
tableStyle: "grid",
headerStyle: "head",
alternatingRowStyle: "alt",
columns: grid.Columns
grid.Column format: @<a
href="~/editarpelicula?id=@item.ID">Editar</a> ,
grid.Column "Titulo" ,
grid.Column "Genero" ,
grid.Column "Año" ,
grid.Column format: @<a
href="~/eliminarpelicula?id=@item.ID">Eliminar</a>
<p><a href="~/agregarpelicula" class="botonlink">Agregar
Película</a></p>
agregarpelicula.cshtml
@{
Layout = "~/_layout.cshtml";
Page.Title="Agregar Película";
Validation.RequireField "txttitulo","Debes ponerle el título" ;
Validation.RequireField "txtgenero","Debes poner un género" ;
Validation.RequireField "txtyear","El año no debe estar
vacío" ;
//inicializamos variables
var titulo = "";
var genero = "";
var year = "";
//comprobamos si el usuario dio clic en agregar película
//comprobando el evento post
if IsPost && Validation.IsValid
{
//Obtiene los valores de los inputs de texto
titulo = Request.Form["txttitulo"];
genero = Request.Form["txtgenero"];
year = Request.Form["txtyear"];
var db = Database.Open "nombredelabd" ;
var comandoinsertar = "INSERT INTO peliculas Titulo, Genero, Año
VALUES @0, @ , @ ";
db.Execute comandoinsertar, titulo, genero, year ;
Response.Redirect "~/webgrid" ;
}
}
<h >Agregar Pelicula</h >
<form method="post">
<fieldset>
<legend>Información de la Pelicula</legend>
<p><label for="txttitulo">Titulo:</label>
<input type="text" name="txttitulo"
value="@Request.Form["txttitulo"]" />
<br>
<span class="field-validationerror">@Html.ValidationMessage "txttitulo" </span>
</p>
<p><label for="txtgenero">Genero:</label>
<input type="text" name="txtgenero"
value="@Request.Form["txtgenero"]" />
<br>
<span class="field-validationerror">@Html.ValidationMessage "txtgenero" </span>
</p>
<p><label for="txtyear">Año:</label>
<input type="text" name="txtyear"
value="@Request.Form["txtyear"]" />
<br>
<span class="field-validationerror">@Html.ValidationMessage "txtyear" </span>
</p>
<p><input type="submit" name="btnsubmit" value="Agregar
Pelicula" /></p>
</fieldset>
<span class="validation-summary-errors">
@Html.ValidationSummary </span>
</form>
<p><a href="~/webgrid" class="botonlink">Ver
Películas</a></p>
editarpelicula.cshtml
@{
Layout = "~/_layout.cshtml";
Page.Title="Editar Película";
var titulo = "";
var genero = "";
var year = "";
var peliculaID = "";
if !IsPost {
if !Request.QueryString["id"].IsEmpty
&&
Request.QueryString["id"].IsInt
{
peliculaID = Request.QueryString["id"];
var db = Database.Open "nombredelabd" ;
var dbCommand = "SELECT * FROM peliculas WHERE ID =
@0";
var row = db.QuerySingle dbCommand, peliculaID ;
if row!=null {
titulo = row.Titulo;
genero = row.Genero;
year = row.Año;
}
else{
titulo = "No Data";
genero = "No Data";
year = "No Data";
}
}
else{
Validation.AddFormError "No tienes seleccionada una
pelicula." ;
}
}
if IsPost {
Validation.RequireField "txttitulo","Debes ponerle el
título" ;
Validation.RequireField "txtgenero","Debes poner un género" ;
Validation.RequireField "txtyear","El año no debe estar
vacío" ;
Validation.RequireField "idpelicula", "¡No existe la
pelicula!" ;
titulo = Request.Form["txttitulo"];
genero = Request.Form["txtgenero"];
year = Request.Form["txtyear"];
peliculaID = Request.Form["idpelicula"];
if Validation.IsValid
{
var db = Database.Open "nombredelabd" ;
var updateCommand = "UPDATE peliculas SET Titulo=@0,
Genero=@ , Año=@ WHERE ID=@ ";
db.Execute updateCommand, titulo, genero, year,
peliculaID ;
Response.Redirect "~/webgrid" ;
}
}
}
<h >Editar Película</h >
@Html.ValidationSummary
<form method="post">
<fieldset>
<legend>Información de Película</legend>
<p><label for="txttitulo">Título:</label>
<input type="text" name="txttitulo" value="@titulo"
/></p>
<p><label for="txtgenero">Género:</label>
<input type="text" name="txtgenero" value="@genero"
/></p>
<p><label for="txtyear">Año:</label>
<input type="text" name="txtyear" value="@year" /></p>
<input type="hidden" name="idpelicula" value="@peliculaID"
/>
<p><input type="submit" name="btnguardarcambios"
value="Guardar Cambios" /></p>
</fieldset>
</form>
<p><a href="~/webgrid" class="botonlink">Regresar a la Lista
de Películas</a></p>
eliminarpelicula.cshtml
@{
Layout = "~/_layout.cshtml";
Page.Title="Eliminar Película";
var titulo = "";
var genero = "";
var year = "";
var peliculaId = "";
if !IsPost {
if !Request.QueryString["id"].IsEmpty
&&
Request.QueryString["id"].IsInt
{
peliculaId = Request.QueryString["id"];
var db = Database.Open "nombredelabd" ;
var dbCommand = "SELECT * FROM peliculas WHERE ID =
@0";
var row = db.QuerySingle dbCommand, peliculaId ;
if row != null {
titulo = row.Titulo;
genero = row.Genero;
year = row.Año;
}
else{
Validation.AddFormError "La película no fue
encontrada, ID incorrecto." ;
}
}
else{
Validation.AddFormError "Película no fue encontrada
por el ID." ;
}
}
if IsPost && !Request["btneliminar"].IsEmpty
{
peliculaId = Request.Form["peliculaId"];
var db = Database.Open "nombredelabd" ;
var deleteCommand = "DELETE FROM peliculas WHERE ID = @0";
db.Execute deleteCommand, peliculaId ;
Response.Redirect "~/webgrid" ;
}
}
<h >Eliminar Película</h >
@Html.ValidationSummary
<form method="post">
<fieldset>
<legend>Información de Película</legend>
<p><span>Titulo:</span>
<span>@titulo</span></p>
<p><span>Genero:</span>
<span>@genero</span></p>
<p><span>Año:</span>
<span>@year</span></p>
<input type="hidden" name="peliculaid" value="@peliculaId"
/>
<p><input type="submit" name="btneliminar" value="Eliminar
Película" /></p>
</fieldset>
</form>
<p><a href="~/webgrid" class="botonlink">Regresar a la
Lista de Películas</a></p>
Taller 1. Entendiendo el manejo de Datos en Webpages
Preguntas:
Preguntas de selección multiple:
Ejercicio