EjercicioWeb 3

Ing.
Rubén Sanabria
Visual Studio hace todo lo posible para validar de antemano las secuencias HTML que figuran en una página
ASPX. Se generan mensajes de advertencia para llamar la atención del desarrollador acerca de las no
conformidades.
Podemos utilizar comandos directamente dentro de las páginas WebForm.
Por ejemplo podemos imprimir elementos asi:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ejercicio1.aspx.cs"
Inherits="Web001.ejercicio1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<h3>Dias de la semana</h3><br />
<div>
<ul>
<%
int i;
string[] dias = { "lunes", "martes", "miércoles", "jueves",
"viernes", "sábado", "domingo" };
for (i = 0; i < dias.Length; i++)
{
%>
<li><%= dias[i] %></li>
<% } %>
</ul>
</div>
</form>
</body>
</html>
Y el resultado corriendo el programa:
OPTATIVO IV 1
Ing. Rubén Sanabria
Los scriptlets
Los scriptlets son fragmentos de código que figuran en una página ASPX. Están delimitados por
marcadores, que los distinguen de las secuencias HTML. ASP.NET cuenta con cuatro tipos de
scriptlets: Los bloques de instrucciones Estos bloques de instrucciones se ejecutan durante la
visualización de la página. Pueden influir en la fabricación de secuencias HTML, tal y como muestra
el siguiente ejemplo de código anidado:
- Se generarán exactamente 7 etiquetas
- tantas como iteraciones del bucle for.
<%= %>
Las expresiones que figuran entre se evalúan sistemáticamente en el contexto de ejecución. Puede
tratarse de valores literales, de variables o de llamadas a métodos.
 Las expresiones anidadas Desde un punto de vista sintáctico, podemos considerar las expresiones
anidadas como una variación de las expresiones sistemáticas . Ciertos controles, tales como las listas
o las tablas de datos, iteran sobre registros con datos. El origen de los datos se enlaza a estos
componentes mediante su propiedad DataSource y, a continuación, se invoca el método DataBind().
Esto establece el orden de resolución de las expresiones que hacen referencia a las columnas del
origen de datos:
El estudio de los controles de datos y de los controles basados en un modelo detalla esta sintaxis,
algo compleja.
Las $-expressions <%$ %>
Las expresiones ligadas son útiles a la hora de acceder a las bases de datos. Aunque estas expresiones
no se evalúan hasta el momento en que se produce la llamada al método DataBind(). Pueden aparecer
errores de contexto que se producen demasiado tarde como para ser corregidos. Además, las
OPTATIVO IV 2
expresiones no pueden figurar como valor de atributo, de modo que la siguiente línea sería
incorrecta:
<asp:Label ID="Label1" runat="server" Text="<%= 10 %>"/>
Nos daría como resultado :
Para satisfacer ambos requisitos, Microsoft ha dotado a ASP.NET de las $-expressions. Se trata de
expresiones de análisis en tiempo de compilación, que limitan el riesgo de errores contextuales y que
pueden figurar como valor de un atributo.
El servidor de aplicaciones ASP.NET y Visual Studio explotan, ambos, las $-expressions. Ciertas
expresiones estándar se reconocen directamente en Visual Studio y el desarrollador las aprovecha sin
tener que introducir código.
Ejemplo :
Y la codificación sería :
<!DOCTYPE html>
<title></title>
</head>
<body>
<div>
<h3>Hallar la suma de numeros del 1 al 10</h3>
OPTATIVO IV 3
<p></p>
<%
int nro = 1;
for (int i = 1; i < 11; i++)
{
%>
<li><%= i %> + 1 = <%= i+nro %></li>
<% } %>
</div>
</form>
</body>
</html>
Ejercicio 3
Mostrar la fecha de hoy utilizando scriptlets
<!DOCTYPE html>
<title></title>
<style type="text/css">
.auto-style1 {
width: 100%;
}
</style>
</head>
<body>
<div><p></p>
<% string cadena = "Bienvenidos a Scriptlets de ASP.NET";%><br />
<%= cadena %><br />
<% Response.Write(DateTime.Now.ToShortDateString()); %>
</div>
</form>
OPTATIVO IV 4
</body>
</html>
Construir la siguiente tabla : utilizando table; y una sentencia for;
La codificación :
<!DOCTYPE html>
<title></title>
.auto-style1 {
width: 100%;
}
</style>
</head>
<body>
<div>
<table class="auto-style1" border="1">

<tr>
OPTATIVO IV 5
<td>ID</td>
<td>Nombre</td>
<td>Direccion</td>
</tr>
<tbody>
<%
for (int i = 0; i <= 10; i++)
{
%>
<tr>
<td> <%= i %></td>
<td><%= "nombre_"+i %></td>
<td><%= "direccion_"+i %></td>
</tr>
<%
}
%>
</tbody>
</table>
</div>
</form>
</body>
</html>
Mostrar 10 países desde un arreglo simple con ASP.Net
OPTATIVO IV 6
Y la codificación sería :
<!DOCTYPE html>
<title></title>
.auto-style1 {
width: 100%;
}
</style>
</head>
<body>
<div>
<h3>Arreglos o array simple</h3><br />
<%
string[] paises = new string[10];
paises[0] = "Argentina";
paises[1] = "Brasil";
paises[2] = "Bolivia";
paises[3] = "Chile";
paises[4] = "Colombia";
paises[5] = "Ecuador";
paises[6] = "Paraguay";
paises[7] = "Peru";
paises[8] = "Uruguay";
paises[9] = "Venezuela";
%>

<%= paises[6] %>

<table class="auto-style1">
<tr>
<td>
<h3>Con un ciclo for</h3>

<%
for (int i = 0; i < 10; i++)
{
%>
<li><%=paises[i] %></li>
<%
}
%>
</td>
<td>
<h3>Ciclo foreach</h3>
<ul>
<% foreach (string pais in paises)
{
OPTATIVO IV 7
%>
<li><%= pais %></li>
<%
}
%>
</ul>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
Ahora podemos mostrar un arreglo bidimensional, mostrando el pais con su

capital.
El código respectivo sería :

<!DOCTYPE html>
<title></title>
</head>
<body>
OPTATIVO IV 8

<div>
<h2>Arreglo bidimensionales</h2>
<%
//pais capital
string[,] paises = new string[9, 2]
{
{"Argentina","Buenos Aires" },
{"Brasil","Brasilia" },
{"Bolivia","La Paz" },
{"Chile","Santiago" },
{"Colombia","Bogotá" },
{"Ecuador","Quito" },
{"Paraguay","Asunción" },
{"Uruguay","Montevideo" },
{"Venezuela","Caracas" }
};
%>
<br />
<ul>
<%
for (int fila = 0; fila < paises.GetLength(0);fila++)
{
%>
<li><%= paises[fila,0] %>/<%= paises[fila,1] %></li>
<%
}
%>
</ul>
</div>
</form>
</body>
</html>
Cargar Datos en un List y luego mostrar dichos datos dentro de un GridView.
OPTATIVO IV 9
Entonces se irán cargando los datos dentro de un List, hasta que presionemos el botón de
mostrar;
Tendremos primero un clase de nombre Persona :
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace Web001.Models
{
public class Persona
{
public int Doc { get; set; }
public string Nom { get; set; }
public string Dire { get; set; }
public string Telef { get; set; }
OPTATIVO IV 10
public static List<Persona> listaPersona = new List<Persona>();
}
}
Y en la pagina Web, en los eventos de los botones respectivos :
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Web001.Models;
namespace Web001
{
public partial class ejercicio06 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
// Label5.Visible = false;
protected void Button1_Click(object sender, EventArgs e)

{
//agregar nuevo registro
Persona per = new Persona();

per.Doc = Convert.ToInt32(TextBox1.Text);
per.Nom = TextBox2.Text;
per.Dire = TextBox3.Text;
per.Telef = TextBox4.Text;
Persona.listaPersona.Add(per);
// Label5.Visible = true;
Label5.ForeColor = System.Drawing.Color.Green;
Label5.Text = "Registro agregado..";
// Label5.Visible = false;
}
protected void Button2_Click(object sender, EventArgs e)

{
GridView1.DataSource = Persona.listaPersona;
GridView1.DataBind();
}
}
}
Otro ejercicio del DataGridView

Se tiene el formulario Mercadería, como muestra la pantalla, deseo agregar datos al
GridView con el siguiente botón de Nuevo; luego Grabar y por ultimo si queremos
visualizar el contenido del GridView entonces presionamos Mostrar
OPTATIVO IV 11
Le agregamos luego una GridView al formulario, si ejecutamos no se va a ver nada, porque

la propiedad del mismo está restringida.
Ingresamos a editar la grilla, para poder cambiar el formato del mismo, le damos el
formato de presentación que nos gusta etc.
Buscamos el formato en este caso Simple.
Luego le agregamos el encabezado de la GridView, ingresando en Editar columnas :
OPTATIVO IV 12
Seleccionamos TemplateField, para la cantidad de columnas que utilizaremos
Le cambiamos los
nombres de títulos
Ojo, debe estar deshabilitado
Le cambiamos los nombres de la cabecera:
Breve explicación de los templetedFields:
Los templatedFields, son las cabeceras del dataGrid, y los itemtemplate, son las filas del
dataGridView.
En los itemTemplate, se cargan los datos a ser mostrados, estos pueden ser de diversos tipos
OPTATIVO IV 13
Para configurar los itemTemplate, se configura los editarTemplates.
Editar
Al darle Editar Plantillas nos aparece la siguiente pantalla :
Observamos el combo de itemTemplate, que cada columna tienen sus elementos de itemTemplate
En el cuadro del ItemTemplate, arrastramos un label desde el cuadro de herramientas, hacemos
OPTATIVO IV 14
En su propiedad le cambiamos el nombre por lbl_it_codigo.
Luego Editamos el Editar enlaces de datos y nos aparece la siguiente pantalla :
Nombre del registro

de la BD o el
encapsulado
Al agregar todos los itemTemplates, veremos la GridViews de esta forma :
OPTATIVO IV 15
Vamos a seleccionar el AutoGenerateSelectedButton a True;
Vemos que en el GridView, nos aparece una nueva columna

de Seleccionar
Vemos en el evento del mismo que se tiene 2 eventos :
El SelectedIndexChanged : este evento ocurre cuando ya se seleccionó el ítem.
El SelectedIndexChanging: este evento ocurre cuando se está seleccionando el ítem.
OPTATIVO IV 16
En este evento hacemos doble click, y vemos que nos muestra el evento correspondiente:
protected void GridView1_SelectedIndexChanging(object sender, GridViewSelectEventArgs e)

{
Esto para saber en que fila hizo click sobre la grilla: en el evento
SelectedIndexChanging.
protected void GridView1_SelectedIndexChanging(object sender, GridViewSelectEventArgs e)

{
//cada vez que se hace click sobre Selected
String id = ((Label)GridView1.Rows[e.NewSelectedIndex].FindControl("lbl_it_codigo")).Text;
String desc = ((Label)GridView1.Rows[e.NewSelectedIndex].FindControl("lbl_it_descripcion")).Text;
String prec = ((Label)GridView1.Rows[e.NewSelectedIndex].FindControl("lbl_it_precio")).Text;
String cant = ((Label)GridView1.Rows[e.NewSelectedIndex].FindControl("lbl_it_cantidad")).Text;
String tot = ((Label)GridView1.Rows[e.NewSelectedIndex].FindControl("lbl_it_total")).Text;
lbl_mensaje.Text = "Selecciono : " + id + " " + desc + " " + prec + " " + cant + " " + tot;
}
Podemos también en la Grilla poner el botón Borrar, nos vamos a las propiedades de la
grilla y ahí ponemos el AutoGenerateDeleteButton a True;
OPTATIVO IV 17
Me pone una nueva columna en la grilla.

Tiene evento dos eventos :
RowDeleted : cuando se borro la fila

RowDeleting : cuando se esta borrando la fila.
Utilizaremos el evento RowDeleting.
protected void GridView1_RowDeleting(object sender, GridViewDeleteEventArgs e)

{
Tarea para el alumno
}
Podemos ver lo que está capturando en la fila para eliminar.
OPTATIVO IV 18
Los botones de editar
Los botones de editar, trabajan con los EditItemTemplates:
Después de cargar todos los datos al EditItemTemplate, tenemos el método de Edit;
protected void GridView1_RowEditing(object sender, GridViewEditEventArgs e)

{
GridView1.EditIndex = e.NewEditIndex;
leeTabla();
}
El único EditItemTemplate, que ponemos al editar el elementos es del tipo label, luego el
resto ponemos TextBox.
OPTATIVO IV 19
En el nombre ponemos:
En el nombre ponemos txt_eit_descripcion.
Mismo procedimiento para los demás campos.
Observamos que vamos poniendo el Bind, correspondiente a cada campo.
Al seleccionar Editar en la fila de la grilla, nos muestra dos elementos el de Actualizar y

el Cancelar.
Vemos que nos habilita los campos para ser editados, algunos de los campos no necesitamos
cambiar, por eso no edita.
OPTATIVO IV 20
Los botones Actualizar y Cancelar, también deben ser programados.
protected void GridView1_RowEditing(object sender, GridViewEditEventArgs e)

{
GridView1.EditIndex = e.NewEditIndex;
leeTabla();
}
protected void GridView1_RowCancelingEdit(object sender, GridViewCancelEditEventArgs e)

{
//para cancelar el edit
GridView1.EditIndex = -1;
leeTabla();
}
protected void GridView1_RowUpdating(object sender, GridViewUpdateEventArgs e)

{
//Para actualizar
String id_ = ((Label)GridView1.Rows[e.RowIndex].FindControl("lbl_eit_codigo")).Text;
String desc_ =
((TextBox)GridView1.Rows[e.RowIndex].FindControl("txt_eit_descripcion")).Text;
String prec_ =
((TextBox)GridView1.Rows[e.RowIndex].FindControl("txt_eit_precio")).Text;
String cant_ =
((TextBox)GridView1.Rows[e.RowIndex].FindControl("txt_eit_cantidad")).Text;
String tot_ = ((Label)GridView1.Rows[e.RowIndex].FindControl("lbl_eit_total")).Text;
//en caso de tengamos una base de datos

//Mercaderia mer = new Mercaderia();
//mer.Codigo = Convert.ToInt32(id_);
//mer.Descripcion = desc_;
//mer.Precio = Convert.ToDouble(prec_);
//mer.Cantidad = Convert.ToInt32(cant_);
//mer.Total = mer.Cantidad * mer.Precio;
//ctrl.actualizar(mer);
Tarea para el alumno

}
También podemos paginar la GridView, para eso nos vamos a las propiedades de la grilla y
ponemos :
AllowPaging a true.
OPTATIVO IV 21
Eso permite que en la grilla muestre lo siguiente :
Luego le decimos que queremos que se muestre la cantidad de filas en la grilla con las
propiedades de PageSize, por defecto es igual a 10
OPTATIVO IV 22
Entonces vamos al evento de :
PageIndexChanged, y PageIndexChanging.
Al darle créame el evento en PageIndexChanging, me crea el evento y llenamos con:
protected void GridView1_PageIndexChanging(object sender, GridViewPageEventArgs e)

{
GridView1.PageIndex = e.NewPageIndex;
leeTabla();
}
OPTATIVO IV 23
Uso de Script
Otra de las posibilidades que nos brinda ASP.Net, es la de usar Script, de la siguiente forma :
La codificación sería :
<!DOCTYPE html>
<title></title>
<script runat="server">
void enviar (object sender, EventArgs e)
{
label.Text = "Hola, " + textbox.Text + "!";
}
</script>
</head>
<body>
<form id="form1" runat="server" method="post">
<p></p>
Tu nombre:
<asp:TextBox ID="textbox" runat="server" />
<asp:Button OnClick="enviar" Text="Enviar" runat="server" />
<p>
<asp:Label ID="label" runat="server" /></p>
</form>
</body>
</html>
OPTATIVO IV 24

EjercicioWeb 3

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

EjercicioWeb 3

Cargado por

Copyright:

Formatos disponibles

Ing.

Podemos utilizar comandos directamente dentro de las páginas WebForm.

Por ejemplo podemos imprimir elementos asi:

Y el resultado corriendo el programa:

Nos daría como resultado :

Mostrar la fecha de hoy utilizando scriptlets

Construir la siguiente tabla : utilizando table; y una sentencia for;

<table class="auto-style1" border="1">

Mostrar 10 países desde un arreglo simple con ASP.Net

<%= paises[6] %>

Ahora podemos mostrar un arreglo bidimensional, mostrando el pais con su

El código respectivo sería :

<form id="form1" runat="server">

Cargar Datos en un List y luego mostrar dichos datos dentro de un GridView.

Tendremos primero un clase de nombre Persona :

public static List<Persona> listaPersona = new List<Persona>();

Y en la pagina Web, en los eventos de los botones respectivos :

protected void Button1_Click(object sender, EventArgs e)

Persona per = new Persona();

protected void Button2_Click(object sender, EventArgs e)

Otro ejercicio del DataGridView

Le agregamos luego una GridView al formulario, si ejecutamos no se va a ver nada, porque

Buscamos el formato en este caso Simple.

Luego le agregamos el encabezado de la GridView, ingresando en Editar columnas :

Seleccionamos TemplateField, para la cantidad de columnas que utilizaremos

Ojo, debe estar deshabilitado

Le cambiamos los nombres de la cabecera:

Breve explicación de los templetedFields:

Para configurar los itemTemplate, se configura los editarTemplates.

En el cuadro del ItemTemplate, arrastramos un label desde el cuadro de herramientas, hacemos

En su propiedad le cambiamos el nombre por lbl_it_codigo.

Luego Editamos el Editar enlaces de datos y nos aparece la siguiente pantalla :

Nombre del registro

Al agregar todos los itemTemplates, veremos la GridViews de esta forma :

Vamos a seleccionar el AutoGenerateSelectedButton a True;

Vemos que en el GridView, nos aparece una nueva columna

Vemos en el evento del mismo que se tiene 2 eventos :

El SelectedIndexChanged : este evento ocurre cuando ya se seleccionó el ítem.

El SelectedIndexChanging: este evento ocurre cuando se está seleccionando el ítem.

protected void GridView1_SelectedIndexChanging(object sender, GridViewSelectEventArgs e)

protected void GridView1_SelectedIndexChanging(object sender, GridViewSelectEventArgs e)

Me pone una nueva columna en la grilla.

RowDeleted : cuando se borro la fila

Utilizaremos el evento RowDeleting.

protected void GridView1_RowDeleting(object sender, GridViewDeleteEventArgs e)

Podemos ver lo que está capturando en la fila para eliminar.

Los botones de editar

Los botones de editar, trabajan con los EditItemTemplates:

Después de cargar todos los datos al EditItemTemplate, tenemos el método de Edit;

protected void GridView1_RowEditing(object sender, GridViewEditEventArgs e)

En el nombre ponemos txt_eit_descripcion.

Mismo procedimiento para los demás campos.

Observamos que vamos poniendo el Bind, correspondiente a cada campo.

Al seleccionar Editar en la fila de la grilla, nos muestra dos elementos el de Actualizar y

Los botones Actualizar y Cancelar, también deben ser programados.

protected void GridView1_RowEditing(object sender, GridViewEditEventArgs e)

protected void GridView1_RowCancelingEdit(object sender, GridViewCancelEditEventArgs e)

protected void GridView1_RowUpdating(object sender, GridViewUpdateEventArgs e)

//en caso de tengamos una base de datos

Tarea para el alumno

Eso permite que en la grilla muestre lo siguiente :

Entonces vamos al evento de :

Al darle créame el evento en PageIndexChanging, me crea el evento y llenamos con: