0% encontró este documento útil (0 votos)

7 vistas269 páginas

En VS JavaScript y Bootstrap

El documento describe el entorno de desarrollo ASP.NET, un framework de Microsoft para crear aplicaciones web dinámicas. Se detallan los controles HTML y de servidor web que permiten la interacción del usuario y la validación de entradas, así como la integración de Bootstrap en Visual Studio .NET para el diseño de formularios. Además, se incluyen instrucciones sobre cómo configurar un proyecto ASP.NET y añadir funcionalidades de inicio de sesión utilizando Bootstrap y jQuery.

Cargado por

devmart industrial software

Derechos de autor

Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.

Formatos disponibles

Descarga como DOCX, PDF, TXT o lee en línea desde Scribd

0% encontró este documento útil (0 votos)

7 vistas269 páginas

En VS JavaScript y Bootstrap

Cargado por

devmart industrial software

Derechos de autor

Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.

Formatos disponibles

Descarga como DOCX, PDF, TXT o lee en línea desde Scribd

Está en la página 1/ 269

Ambiente de desarrollo

con

I.S.C. Martín García Martínez 1

ASP.NET / Bootstrap
ASP.NET

ASP.NET es un entorno para aplicaciones web desarrollado y comercializado por Microsoft. Los programadores
o también diseñadores pueden utilizar este framework para construir sitios web dinámicos, aplicaciones web y
servicios web. Apareció en enero de 2002 con la versión 1.0 del .NET Framework, y es la tecnología sucesora
de la tecnología Active Server Pages (ASP). ASP.NET está construido sobre el Common Language Runtime,
permitiendo a los programadores escribir código ASP.NET usando cualquier lenguaje admitido por el .NET
Framework.

I.S.C. Martín García Martínez 2

ASP.NET / Bootstrap
Controles HTML

El primer conjunto de controles de ASP.NET se conoce como controles HTML. Dichos controles están definidos
en el espacio de nombres System.Web.UI.HtmlControls y derivan, directa o indirectamente, de la clase base
HtmlControl.

De forma predeterminada, el servidor no tiene acceso a los elementos HTML de una página web
ASP.NET, lo cual supone que simplemente sean tratados como código de formato que se pasa al explorador.
Por ejemplo:

<input name="Text1" style="width: 284px" type="text"/>

Sin embargo, si se agrega un atributo id y el atributo runat="server", ASP.NET reconoce los elementos
como controles en la página y se pueden programar mediante código basado en el servidor. Por ejemplo, el
siguiente código HTML crea un objeto HtmlInputText llamado Text1:

<input id="Text1" style="width: 284px" type="text" runat="server"/>

Este control, a diferencia del anterior, admitiría código como el de la línea siguiente, que se ejecutaría
en el servidor por ser visible en él como un objeto de una clase exponiendo los atributos HTML como
propiedades:

string s = Text1.Value.ToString();

La siguiente tabla lista los controles HTML y las etiquetas HTML a los que corresponden:

Estos controles son útiles para guardar la compatibilidad con ASP, facilitando la transferencia de
páginas ASP existentes a páginas ASP.NET.
I.S.C. Martín García Martínez 3
ASP.NET / Bootstrap
Controles de servidor web

El otro conjunto de controles de servidor de ASP.NET se conoce como controles de servidor web. Dichos
controles están definidos en el espacio de nombres System.Web.UI.WebControls y derivan, directa o
indirectamente, de la clase base WebControl.

En este grupo se incluyen controles con formato tradicional, como TextBox y Button, y controles con un nivel
de abstracción mayor como Calendar, GridView, ListView o EntityDataSource. Los controles web simplifican
los esfuerzos de desarrollo porque:

 El modelo de objeto, de tipos muy estrictos, implementado por estos componentes ayuda a reducir los
errores de programación. La clase base WebControl implementa las propiedades comunes a todos los
controles.
 Detectan automáticamente las funciones del cliente web (por ejemplo, Microsoft Internet Explorer) y
así el usuario puede personalizar su procesamiento para aprovechar al máximo dichas funciones.
 En una página web ASP.NET, cualquier propiedad de un control se puede enlazar a datos. Además,
existen varios controles web que se pueden usar para procesar el contenido de un origen de datos.

Los controles web aparecen en el formato HTML como etiquetas de espacios de nombres; es decir, etiquetas
con un prefijo. El prefijo se usa para asignar la etiqueta al espacio de nombres del componente durante la
ejecución, y el resto de la etiqueta es el nombre de la clase. Al igual que los controles HTML, estas etiquetas
deben contener un atributo runat="server". A continuación, se muestra un ejemplo de declaración:

<asp:TextBox id="CajaTexto1" runat="server" Text="xxx"></asp:TextBox>

En el ejemplo anterior, asp es el prefijo de la etiqueta y hace referencia al espacio de nombres

System.Web.UI.WebControls y TextBox es el nombre de la clase.

El resto de este apartado describe otros controles web de uso bastante común.

Presentación del texto

Label. Permite mostrar texto en una página web ASP.NET mediante programación.

<asp:Label ID="Etiqueta1" runat="server" Text="etiqueta"></asp:Label>

I.S.C. Martín García Martínez 4

ASP.NET / Bootstrap
Controles de entrada
TextBox. Permite a los usuarios escribir datos (texto, números, fechas, etc.) en una página web ASP.NET. Es
compatible con varios modos, lo que permite que se pueda usar para entradas de una línea, de varias líneas y
de contraseñas.

<asp:TextBox ID="CajaTexto1"
runat="server">Caja de texto </asp:TextBox>

La propiedad TextMode de un TextBox vale, por omisión, SingleLine (una sola línea). Otros valores que
puede tomar esta propiedad son MultiLine (múltiples líneas) y Password (muestra asteriscos).

CheckBox. Utilizando varias casillas de verificación, se puede proporcionar un conjunto de opciones de las que
se pueden elegir varias.

<asp:CheckBox ID="CasillaVerifacion1" runat="server" Text="opción 1"

Checked="True" />

La propiedad Checked de un CheckBox vale false por omisión.

Una alternativa a las casillas de verificación es la utilización del control CheckBoxList que se indica a
continuación:

<asp:CheckBoxList ID="CheckBoxList1" runat="server">

<asp:ListItem Selected="True" Value="1">Opción 1
</asp:ListItem> <asp:ListItem
Value="2">Opción 2 </asp:ListItem> </asp:CheckBoxList><br />

RadioButton. Utilizando varios botones de opción, se puede proporcionar un conjunto de opciones que se
excluyen mutuamente.

I.S.C. Martín García Martínez 5

ASP.NET / Bootstrap
<asp:RadioButton ID="BotonOpcion1" runat="server" Text="opción 1"
Checked="True" GroupName="Grupo1" /> <br />

<asp:RadioButton ID="RadioButton2" runat="server" Text="opción 2"

GroupName="Grupo1" />

Obsérvese la propiedad GroupName de los RadioButton; tiene el mismo valor: Grupo1. De esta forma se
indica que ambos controles pertenecen al mismo grupo; así, cuando se selecciona uno, el que lo estaba deja
de estarlo. La propiedad Checked de un RadioButton vale, por omisión, false.

Una alternativa a los botones de opción es la utilización del control RadioButtonList que se indica a
continuación:

<asp:RadioButtonList ID="RadioButtonList1" runat="server">

<asp:ListItem Selected="True" Value="1">Opción 1
</asp:ListItem> <asp:ListItem Value="2">Opción 2
</asp:ListItem> </asp:RadioButtonList>

ListBox. Permite a los usuarios seleccionar uno o más elementos de una lista predefinida.

<asp:ListBox ID="ListaFija1" runat="server"> <asp:ListItem

Selected="True" Value="1">Elemento 1 </asp:ListItem>
<asp:ListItem Value="2">Elemento 2 </asp:ListItem>
</asp:ListBox><br />

DropDownList. Es igual que ListBox, excepto en que ahora la lista de elementos permanece oculta hasta que
los usuarios hacen clic en el botón que la despliega. Además, este control no admite el modo de selección
múltiple.

<asp:DropDownList ID="ListaDesp1"
runat="server">
<asp:ListItem Value="1">Elemento 1
</asp:ListItem>
<asp:ListItem Value="2">Elemento 2
</asp:ListItem>
</asp:DropDownList>

I.S.C. Martín García Martínez 6

ASP.NET / Bootstrap
Envío y devolución
Los siguientes controles se utilizan para devolver la página al servidor con valores introducidos por el usuario
para que estos puedan ser procesados por la lógica de la página. Generan un evento Click que se controla en el
servidor con el método personalizado que implementemos.

Button. Permite crear un botón de “enviar” o un botón de “órdenes”.

<asp:Button ID="boton1" runat="server" Text="Botón" Width="104px" />

LinkButton. De manera predeterminada, un control LinkButton es un botón de envío, aunque se puede crear
también un botón de órdenes (propiedades CommandName y CommandArgument).

<asp:LinkButton ID="Enviar1" runat="server">Enviar</asp:LinkButton>

ImageButton. Este control también puede ser empleado para enviar páginas. Se procesa como una imagen y
puede proporcionar las coordenadas (x, y) del clic del usuario. Si lo que se necesita solo es mostrar imágenes
en la página web, puede utilizarse también el control Image.

<asp:ImageButton ID="btImagen1" runat="server" ImageUrl="miLogo.png"

Height="48px" Width="88px" />

Exploración
HyperLink.Permite crear vínculos en una página web para que los usuarios puedan moverse por las páginas de
una aplicación. La ventaja de estos controles es que permiten establecer las propiedades de los vínculos en el
servidor.

<asp:HyperLink ID="Enlace1" runat="server"

NavigateUrl="MiPagina.aspx">Enlace </asp:HyperLink>

I.S.C. Martín García Martínez 7

ASP.NET / Bootstrap
Controles de diseño
Panel. Este control se suele utilizar como contenedor de otros controles creados dinámicamente
(normalmente no tiene ninguna apariencia visual).

Table. Este control, junto con los controles asociados TableRow y TableCell, permite crear tablas y diseños
tabulares.

<asp:Table ID="Tabla1" runat="server"

GridLines="Both">
<asp:TableRow runat="server">
<asp:TableCell runat="server">[0,0]</asp:TableCell>
<asp:TableCell runat="server">[0,1]</asp:TableCell>
</asp:TableRow>
<asp:TableRow runat="server">
<asp:TableCell runat="server">[1,0]</asp:TableCell>
<asp:TableCell runat="server">[1,1]</asp:TableCell>
</asp:TableRow>
</asp:Table>

Selección de fechas
Calendar. Se utiliza para poder explorar fechas y hacer selecciones de fechas, incluyendo rangos de fechas.

<asp:Calendar ID="Calendar1"
runat="server"
...
</asp:Calendar>

I.S.C. Martín García Martínez 8

ASP.NET / Bootstrap
Controles con enlaces a datos
Los controles con enlaces a datos, como por ejemplo GridView, DetailsView, FormView, ListView, DataList y
Repeater sirven para procesar el contenido de un origen de datos. Los veremos con más detalle en el siguiente
capítulo.

Controles de validación
Los controles de validación simplifican la tarea de validar las entradas del usuario. Generan automáticamente
un script para el cliente para que los exploradores de nivel superior ejecuten validaciones en la máquina del
usuario antes de una devolución, originando páginas de mayor interactividad y facilidad. Al mismo tiempo,
funcionan de forma idéntica en el servidor como mecanismo de arranque tras un error. A continuación, se
indica cuáles son estos controles:

 RequiredFieldValidator. Sirve para garantizar que el usuario rellena los controles de entrada de datos
que requieren una entrada.
 RangeValidator. Se emplea para comprobar que la entrada del usuario está dentro del rango válido de
valores. Esta opción es útil en las entradas numéricas o de fechas.
 CompareValidator. Sirve para comprobar la entrada en un control respecto a la de otro.
 RegularExpressionValidator. Permite comprobar la entrada de datos del usuario. Para ello emplea
como criterio una expresión regular (o un modelo de cadenas).
 CustomValidator. Permite proporcionar una lógica personalizada de validación de cliente y de
servidor.
 ValidationSummary. Proporciona un resumen de los mensajes de error producidos por todos los
controles de validación.

La propiedad CausesValidation del control que origina la petición al servidor tiene que valer true.

I.S.C. Martín García Martínez 9

ASP.NET / Bootstrap
Integrar Bootstrap al entorno de desarrollo Visual Studio .NET 2019
Versión 16.7.4 con C# y añadir Sign-in que se encuentra en ejemplos de
página oficial de Bootstrap.

Primero se va a diseñar un pequeño formulario simulando un Sign-in con datos estáticos, es decir son
interacción a base de datos, para esto se va a seleccionar en el menú la opción Archivo - Nuevo - Proyecto.

En la siguiente ventana se va a buscar seleccionar trabajar con una aplicación asp.net c#. Vacía para programar
en C#, una vez seleccionada dar doble click sobre esta.

I.S.C. Martín García Martínez 10

ASP.NET / Bootstrap
Posteriormente aparecerá una ventana como la que a continuación se muestra, en esta ventana se definirá el
nombre del proyecto, así como el nombre de la solución y la ubicación en la cual se va a guardar, ya que se han
establecido estos criterios dar click en el botón Crear.

Después aparecerá una ventana como la siguiente, en esta ventana se seleccionará la opción Vacio y después
dar click en el botón Crear.

I.S.C. Martín García Martínez 11

ASP.NET / Bootstrap
De esta forma se estará creando el proyecto.

Y así se tendrá nuestro entorno de trabajo.

I.S.C. Martín García Martínez 12

ASP.NET / Bootstrap
Ahora se empezará hacer es la parte de Login, empezando por agregar un formulario, haciendo click derecho
sobre el archivo Capa de presentación, en las opciones Agregar- Nuevo elemento…

Así en la siguiente ventana se seleccionarán las opciones Web Foms – Formulario Web Forms y se asignará el
nombre al archivo, por último, se dará click en el botón Agregar.

I.S.C. Martín García Martínez 13

ASP.NET / Bootstrap
De esta forma se estará visualizando el código del archivo que se acaba de agregar.

Antes de empezar a diseñar es recomendable instalar las siguientes extensiones por medio del menú
Extensiones – Administrar Extensiones (Se recomienda instalar todas las extensiones relacionadas con
Bootstrap y HTML 5).

I.S.C. Martín García Martínez 14

ASP.NET / Bootstrap
Una vez instaladas las extensiones referentes a los ambientes de diseño y programación que se esté usando es
recomendable reiniciar el proyecto (Para proyectos posteriores ya no va a ser necesario volver a instalar las
extensiones ya que una vez instaladas quedan residentes en el entorno de desarrollo).

Al haber reiniciado el proyecto ahora se va a insertar de forma precompilada los archivos de Bootstrap para
eso iremos a su página oficial y los descargaremos.

En esta página daremos click al botón Download.

I.S.C. Martín García Martínez 15

ASP.NET / Bootstrap
Tras haber dado click en el botón Download aparecerá una página como la que se muestra.

Una vez que se han descargado el archivo de Bootstrap este se va descomprimir

Una vez descomprimido se va a acceder a la carpeta bootstrap-4.5.2-dist.

I.S.C. Martín García Martínez 16

ASP.NET / Bootstrap
Y dentro de la carpeta js se va a guardar el archivo jQuery.

Para eso nos vamos a la página oficial de jQuery, Ya que se tiene la página se dará click en el botón de
Download jQuery.

I.S.C. Martín García Martínez 17

ASP.NET / Bootstrap
Después de haber dado click en el botón Download jQuery se abrirá una página como la siguiente en esa
página se va a dar click en el link: Download the compressed, production jQuery 3.5.1

Ya que se ha dado click en el enlace de Download the compressed, production jQuery 3.5.1 se abrirá una
página como la que se muestra a continuación, en esta página se dará click derecho al ratón y después se
seleccionará la opción de Guardar como…

I.S.C. Martín García Martínez 18

ASP.NET / Bootstrap
Este archivo se guardará con el nombre que genera por default jquery-3.5.1.min.js en la carpeta js que se
encuentra en el directorio bootstrap-4.5.2-dist.

Con esta acción se habrá quedaría instalado jQuery.

I.S.C. Martín García Martínez 19

ASP.NET / Bootstrap
Ahora la carpeta bootstrap-4.5.2-dist se arrastrará con el puntero del ratón archivo con el nombre del
proyecto Capa de presentación.

Ya que la hemos arrastrado al nombre del proyecto Capa de presentación, nos cercioramos que efectivamente
se ha agregado al Explorador de soluciones.

I.S.C. Martín García Martínez 20

ASP.NET / Bootstrap
Para poder empezar a incluir los archivos de Bootstrap y jQuery a nuestro diseño de página estos los
pondremos debajo de las etiquetas de título del archivo Login.aspx.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Login.aspx.cs"

Inherits="Capa_de_presentacion.Login" %>

<!DOCTYPE html>

<link rel="stylesheet" href="bootstrap-4.5.2-dist/css/bootstrap.min.css">

</head>
<body>
<form id="form1" runat="server">
<div>
</div>
</form>
</body>
</html

I.S.C. Martín García Martínez 21

ASP.NET / Bootstrap
De esta forma ya tenemos instalado Bootstrap dentro de nuestro ambiente de desarrollo.

Ahora para empezar a incluir ejemplos propios de Bootstrap y trabajar sobre ellos, nos vamos nuevamente a la
página oficial de Bootstrap y seleccionamos el menú Ejemplos.

En la próxima página daremos click en el botón Descarga ejemplos.

I.S.C. Martín García Martínez 22

ASP.NET / Bootstrap
Ya descargado el archivo comprimido de bootstrap-4.5.2-examples.zip ahora lo descomprimiremos.

Abriremos el archivo descomprimido y buscaremos la carpeta sign-in este tipo de archivo hace referencia a un
formulario de registro tipo Login.

Dentro de la carpeta sign-in se encontrarán dos archivos index.html y signin.css.

I.S.C. Martín García Martínez 23

ASP.NET / Bootstrap
Lo primero que haremos será copiar el archivo signin.css a la carpeta de Bootstrap dentro de la carpeta css,
(dependiendo hayamos generado nuestro proyecto se copiara dentro la carpeta css) y se copiará ahí, en este
caso nuestra ruta seria la siguiente.

C:\Users\Martin\Documents\ASP.NET\SistemaWebClinica\Capa de presentación\bootstrap-4.5.2-dist\css

I.S.C. Martín García Martínez 24

ASP.NET / Bootstrap
También al igual que los anteriores js y css, lo estaremos incluyendo su ruta al llamado de este archivo.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Login.aspx.cs"

Inherits="Capa_de_presentacion.Login" %>

<!DOCTYPE html>

<link rel="stylesheet" href="bootstrap-4.5.2-dist/css/bootstrap.min.css">

<link href="bootstrap-4.5.2-dist/css/signin.css" rel="stylesheet">

</head>
<body>
<form id="form1" runat="server">
<div>
</div>
</form>
</body>
</html>

I.S.C. Martín García Martínez 25

ASP.NET / Bootstrap
Ahora dando click sobre el archivo index.html este lo abriremos en cualquier editor de código.

I.S.C. Martín García Martínez 26

ASP.NET / Bootstrap
Después de abrir y ver el código de archivo index.html seleccionaremos y copiaremos todo del inicio del body
<body al fin del body </body>.

Pegándolo y remplazándolo por el cuerpo de nuestro código que tenemos en el entorno de visual
estudio .NET. de igual forma a partir del body.

I.S.C. Martín García Martínez 27

ASP.NET / Bootstrap
Al correr la página se ver de la siguiente forma.

Para poder interactuar directamente con el formulario sign-in de Bootstrap debemos validar sus controles
para que los tome nativos de C# (declarándolo mediante la instrucción asp:TextBox) dentro del entorno
Visual Studio .NET. eso lo haremos sustituyendo las líneas de código de las cajas de texto.

<input type="email" id="inputEmail" class="form-control" placeholder="Email address"

required autofocus> (DE EJEMPLO DE BOOTSTRAP)

Por

<asp:TextBox ID="txtUsuario" runat="server" class="form-control" placeholder="Ingresa

el usuario" required autofocus></asp:TextBox (CAMBIAR POR ESTE CODIGO)

<input type="password" id="inputPassword" class="form-control" placeholder="Password"

required> (DE EJEMPLO DE BOOTSTRAP)

Por

<asp:TextBox type="password" ID="txtPass" runat="server" class="form-control"

placeholder="Ingresa el password" required autofocus></asp:TextBox> (CAMBIAR POR ESTE
CODIGO)

I.S.C. Martín García Martínez 28

ASP.NET / Bootstrap
De igual forma también cambiaremos el botón

<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button> (DE

EJEMPLO DE BOOTSTRAP)

Por

<asp:Button ID="btnIngresar" runat="server" Text="Iniciar sesion" class="btn btn-lg

btn-primary btn-block" OnClick="btnIngresar_Click"/> (CAMBIAR POR ESTE CODIGO)
Por último no olvidemos declarar la instrucción <form id="form1" runat="server"> esta instrucción
se va a declarar antes del primer control, y validara todos los controles que vayan a
interactuar con el código de C# quedando este bloque de la siguiente manera.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Login.aspx.cs"

Inherits="Capa_de_presentacion.Login" %>

<!DOCTYPE html>

<link rel="stylesheet" href="bootstrap-4.5.2-dist/css/bootstrap.min.css"/>

<link rel="stylesheet" href="bootstrap-4.5.2-dist/css/signin.css"/>

</head>
<body class="text-center">

<form class="form-signin">
<img class="mb-4" src="../assets/brand/bootstrap-solid.svg" alt="" width="72"
height="72">
<h1 class="h3 mb-3 font-weight-normal">Please sign in</h1>
<label for="inputEmail" class="sr-only">Email address</label>
<form id="form1" runat="server">
<asp:TextBox ID="txtUsuario" runat="server" class="form-control"
placeholder="Ingresa el usuario" required autofocus></asp:TextBox>
<label for="inputPassword" class="sr-only">Password</label>
<asp:TextBox type="password" ID="txtPass" runat="server" class="form-control"
placeholder="Ingresa el password" required autofocus></asp:TextBox>
<div class="checkbox mb-3">
<label>
<input type="checkbox" value="remember-me"> Remember me
</label>
</div>
<asp:Button ID="btnIngresar" runat="server" Text="Iniciar sesion" class="btn btn-lg
btn-primary btn-block" OnClick="btnIngresar_Click"/>
<p class="mt-5 mb-3 text-muted">© 2017-2020</p>
</form>
</body>

</html>

I.S.C. Martín García Martínez 29

ASP.NET / Bootstrap
Una vez que se corra la página esta tendrá un aspecto como el siguiente.

Ahora daremos click sobre el botón Diseño que se encuentra en la parte inferior.

I.S.C. Martín García Martínez 30

ASP.NET / Bootstrap
Enseguida nos situaremos sobre el botón Iniciar sesión en vista de Diseño dando doble click sobre este para
entrar al código de C#.

Nótese como inmediatamente estas acciones nos envía a entorno de desarrollo de C#.

I.S.C. Martín García Martínez 31

ASP.NET / Bootstrap
En esta parte del botón se escribirá el código correspondiente.

protected void btnIngresar_Click(object sender, EventArgs e)

{
string user = txtUsuario.Text;
string password = txtPass.Text;

string userName = "jorge";

string passName = "jorge";
if (user.Equals(userName) && password.Equals(passName))
{
Response.Write("<script>alert('USUARIO CORRECTO')</script>");
}
else
{
Response.Write("<script>alert('USUARIO INCORRECTO')</script>");

I.S.C. Martín García Martínez 32

ASP.NET / Bootstrap
De esta manera se podrá correr página.

I.S.C. Martín García Martínez 33

ASP.NET / Bootstrap
Suma de dos números.

Basado en el la página anterior referente al formulario de registro se modificará un poco el diseño del mismo
añadiendo una caja de texto para realizar una operación básica de suma de dos números.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Login.aspx.cs"

Inherits="Capa_de_presentacion.Login" %>

<!DOCTYPE html>

<link rel="stylesheet" href="bootstrap-4.5.2-dist/css/bootstrap.min.css"/>

<link rel="stylesheet" href="bootstrap-4.5.2-dist/css/signin.css"/>

</head>
<body class="text-center">

<form class="form-signin">
<img class="mb-4"
src="https://i.pinimg.com/originals/24/6e/2b/246e2bd91a8111a822f33a911ce0c8b3.jpg"
alt="" width="72" height="72">
<h1 class="h3 mb-3 font-weight-normal">Suma de dos numeros</h1>

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

<asp:TextBox type="number" ID="txtNum1" runat="server" class="form-control"

placeholder="Ingresa el primer numero" required autofocus></asp:TextBox>

<asp:TextBox type="number" ID="txtNum2" runat="server" class="form-control"

placeholder="Ingresa el segundo numero" required autofocus></asp:TextBox>

<asp:TextBox type="number" ID="txtres" runat="server" class="form-control"

placeholder="Resultado"></asp:TextBox>

<label>

I.S.C. Martín García Martínez 34

ASP.NET / Bootstrap
</label>
</div>

<asp:Button ID="btnIngresar" runat="server" Text="Calcular" class="btn btn-lg btn-

primary btn-block" OnClick="btnIngresar_Click"/>

<p class="mt-5 mb-3 text-muted">© 2017-2020</p>

</form>
</body>

</html>

Dentro del botón se añadirá el siguiente código de C#.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace Capa_de_presentacion
{
public partial class Login : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{

protected void btnIngresar_Click(object sender, EventArgs e)

{
int total;

total = int.Parse(txtNum1.Text) + int.Parse(txtNum2.Text);

txtres.Text = total.ToString();

}
}
}

I.S.C. Martín García Martínez 35

ASP.NET / Bootstrap
Al correr el proyecto se vera de la siguiente forma.

I.S.C. Martín García Martínez 36

ASP.NET / Bootstrap
Añadiendo componentes Bootstrap.

Para poder añadir componentes de la página Oficial de Bootstrap obviamente vamos a ir a la página oficial
dentro del menú Documentación.

I.S.C. Martín García Martínez 37

ASP.NET / Bootstrap
Dentro de esta página se podrán seleccionar los componentes que se desean, para este ejemplo añadiremos
un componente de la opción Componentes.

Ya dentro de esta opción seleccionaremos el botón Tarjeta.

I.S.C. Martín García Martínez 38

ASP.NET / Bootstrap
Aquí dentro de esta página se seleccionará la tarjeta con el título Encabezado y pie de página.

De esta se copiará sus instrucciones de diseño.

I.S.C. Martín García Martínez 39

ASP.NET / Bootstrap
Y e pegara dentro del body del entorno de desarrollo, es importante no olvidar poner una línea antes del
código Bootstrap la instrucción <div class="container"/> esta instrucción permitirá centrar y darle un
formato más estético a la página.

Al correr la página se vera de la siguiente manera.

I.S.C. Martín García Martínez 40

ASP.NET / Bootstrap
De igual forma se podrán ir añadiendo diferentes tipos de componentes a nuestro entorno por medio de
Bootstrap así enseguida del componente Tarjeta debajo de este se podrá añadir un componente de la sección
Jumbotron.

I.S.C. Martín García Martínez 41

ASP.NET / Bootstrap
Nota: la instrucción <br/> nos ayudara a dar un salto de línea.

Que es el PostBack en ASP.Net

En desarrollo web con tecnología Microsoft es ampliamente manejado, para entender mejor veamos que es el
postback en ASP.Net.

El postback hace posible la comunicación entre el cliente con el servidor en la ejecución de eventos.

En cada llamada al servidor toda la información de la página es eliminada y cargada nuevamente.

Por lo tanto, cuando inicias un evento se ejecuta el Page_Load, provocando el reinicio de la página.

Por esta razón en muchas aplicaciones web, se realiza una validación que posiblemente haz visto, IsPostBack.

IsPostBack
Es una variable de tipo bool para identificar si la página ha sido cargada por primera vez o es una recarga.

 Inicia en false, indicando que es la primera carga.

 True, indica que es una recarga de página.

¿Para qué nos sirve?

Prácticamente evita que la información se elimine de la página y cargue solo la información que será
actualizada.

I.S.C. Martín García Martínez 42

ASP.NET / Bootstrap
¿Cómo funciona?

Dentro del Page_Load del archivo C# de una página aspx, debemos de colocar un validador como lo siguiente.

protected void Page_Load(object sender, EventArgs e)

{
if (Page.IsPostBack)
{
//Cargar código
}
}
En el código anterior estamos indicando que el código sea en la segunda carga, ya que IsPostBack inicia en
false.

Sin embargo, en una página todo el contenido se carga en la primera ejecución, por lo tanto, debemos hacer lo
siguiente.

protected void Page_Load(object sender, EventArgs e)

{
if (!Page.IsPostBack)
{
//Cargar código solo en la primera carga
}
}

Con el símbolo (!) invertimos el valor booleano del postback, por lo tanto, si inicia en false se convierte en
True.

En la primera ejecución se carga toda la página, en la segunda solo los datos de actualización.

De esta manera evitamos descargar todo el contenido de la página en cada acción en el formulario.

Haciendo que la página tenga un mejor rendimiento y evitando utilizar mucha memoria para guardar
información.

I.S.C. Martín García Martínez 43

ASP.NET / Bootstrap
Incrementando un número (implementando ViewState).

El ViewState (ver estado) de una página ASP.NET es lo que permite la "magia" de los PostBack. Se trata de un
campo oculto que se envía con el formulario que introduce ASP.NET en todas las páginas ASPX y contiene
información sobre el estado de los controles de la misma.

Para este ejercicio vamos a tener agregados dos controles uno referente a un textBox de texto y el otro a un
Button.

El control Textbox se va a declarar en la propiedad ID con el nombre de txtConteo y el Button con el nombre
de btnIncrementa en la propiedad ID y en la propiedad Text con el nombre de Incrementar, debiéndose de ver
como se muestra a continuación en la parte de la su estructura.

I.S.C. Martín García Martínez 44

ASP.NET / Bootstrap
Posteriormente añadiremos el código

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace ViewState
{
public partial class Incrementa : System.Web.UI.Page
{
// ViewState nos permite preservar los datos entre requests (solicitud)
// El ViewState viaja con la petición y la respuesta, de esa manera se
conserva el dato
// Tenemos que colocar el nombre de la variable para el ViewState
// Sin no se ha usado previamente tiene el valor null
// Cuando lo leamos es importante hacer el typecast correspondiente

private int conteo = 1;

protected void Page_Load(object sender, EventArgs e)

{
if (!IsPostBack)
{
txtConteo.Text = "0";
}
}

protected void btnIncrementa_Click(object sender, EventArgs e)

{
// Si ya se ha usado el viewstate con la variable click
if (ViewState["click"] != null)
{
// Leemos el valor, hacemos typecast, lo incrementamos y lo colocamos
en la
// variable para poder trabajar con ese dato en nuestro código
conteo = (int)ViewState["click"] + 1;
}

// Actualizamos el textbox
txtConteo.Text = conteo.ToString();

I.S.C. Martín García Martínez 45

ASP.NET / Bootstrap
//Asignamos el valor al viewstate en la variable click
ViewState["click"] = conteo;
}
}
}

Otra forma de hacerlo.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace ViewState
{
public partial class Incrementa : System.Web.UI.Page
{
// Los controles ASP.NET usan internamente a viewstate para guardar su estado
// Pero eso no nos quita de la responsabilidad de guardar los datos.
// correctamente en el viewstate

private int conteo = 1;

protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
txtConteo.Text = "0";
}
}

protected void btnIncrementa_Click(object sender, EventArgs e)

{
int conteo = Convert.ToInt32(txtConteo.Text) + 1;
txtConteo.Text = conteo.ToString();

}
}
}

I.S.C. Martín García Martínez 46

ASP.NET / Bootstrap
Sesión de usuarios

En este ejercicio veremos lo que son Variables de aplicación, Envió de respuesta y No usar cookies, lo primero
que haremos será inicial un proyecto a nivel de Windows Forms.

Una vez que ya tenemos el proyecto agregaremos un Nuevo elemento - WebForms…

I.S.C. Martín García Martínez 47

ASP.NET / Bootstrap
Este WebForms estará completamente vacío.

I.S.C. Martín García Martínez 48

ASP.NET / Bootstrap
Ahora entraremos al código fuente de C# de WebForm1.aspx dando doble click sobre la vista de diseño de
este.

Después nos aparecerá una apariencia como la siguiente.

I.S.C. Martín García Martínez 49

ASP.NET / Bootstrap
Y escribiremos el siguiente código.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace WebApplication1
{
public partial class WebForm1 : System.Web.UI.Page
{

// La sesión de usuario es una instancia de un browser

// pero las sesiones usan cookies, las cuales pueden ser compartidas por dos
instancias del browser
// y se considera la misma sesión
// Si abrimos en otro browser veremos que tenemos dos sesiones y una
aplicación instanciada

// Si no queremos tener cookie para nuestra sesion, Web.config

// <sessionState mode = "InProc"> cookieless="true"> </sessionState>
// Y nos manda visiblemente el sessionID

// Este handler se ejecuta cuando se carga la página

protected void Page_Load(object sender, EventArgs e)
{
// El servidor manda la respuesta al cliente

Response.Write("Cantidad de aplicaciones instanciadas " +

Application["Aplicaciones"] + "<br/>");
Response.Write("Cantidad de asesiones de usuario " +
Application["SesionesUsuario"]);
}
}
}

I.S.C. Martín García Martínez 50

ASP.NET / Bootstrap
Una vez terminando el código en este formulario, ubicar dentro del Explorador de soluciones el archivo
Global.asax.cs

Dando doble click sobre el archivo Global.asax.cs nos va a llevar al siguiente documento, Este documento va a
servir para llevar a cabo todo ese tipo de acciones que nos interesan que sucedan a nivel de aplicación como
tal.

Y dentro de este se escribirá el código el cual quedará de la siguiente forma.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Optimization;
using System.Web.Routing;
I.S.C. Martín García Martínez 51
ASP.NET / Bootstrap
using System.Web.Security;
using System.Web.SessionState;

namespace WebApplication1
{
public class Global : HttpApplication
{
// Este handler se ejecuta cuando se crea una instanca de la aplicacion.
void Application_Start(object sender, EventArgs e)
{
// Código que se ejecuta al iniciar la aplicación
// RouteConfig.RegisterRoutes(RouteTable.Routes);
// BundleConfig.RegisterBundles(BundleTable.Bundles);

// Creamos variables de estado para la aplicacion

// Puede ser leida por todas las sesiones
Application["Aplicaciones"] = 0;
Application["SesionesUsuario"] = 0;

// Incrementamos
Application["Aplicaciones"] = (int)Application["Aplicaciones"] + 1;
}

// Este handler se ejecuta cuando se crea una sesión

void Session_Start(object sender, EventArgs e)
{
Application["SesionesUsuario"] = (int)Application["SesionesUsuario"] + 1;
}

// Este handler se ejecuta cuando finaliza una sesión

void Session_End(object sender, EventArgs e)
{
Application["SesionesUsuario"] = (int)Application["SesionesUsuario"] - 1;
}

}
}

Después de haber terminado con estas líneas de código del archivo Global.asax.cs, dentro del Explorador de
soluciones seleccionaremos el archivo WebForm1.aspx y correremos nuestra aplicación (esto dentro del
explorador de chrome).

I.S.C. Martín García Martínez 52

ASP.NET / Bootstrap
Ya que lo hemos corrido nos dice que efectivamente se está ejecutando una aplicación de instancia 1 y una
sesión de usuario 1.

Ahora vamos a copiar la ruta de esta ejecución https://localhost:44364/WebForm1.aspx y abriremos una

nueva instancia de chrome es decir otra ventana y la pegaremos.

I.S.C. Martín García Martínez 53

ASP.NET / Bootstrap
Sucede esto porque cada sesión tiene un identificador, cada sesión tiene in ID y ese ID se guarda por medio de
un cookie, lo que está sucediendo es que ambas instancias del navegador están utilizando el mismo cookie,
por lo tanto se está considerando que ambas son las misma sesión, por eso aparece cantidad de sesiones de
usuario 1 en ambos casos.

Ahora si abrimos la sesión con otro navegador, con Microsoft Edge nos percataremos que en Cantidad de
sesiones de usuario es 2, esto sucede porque el navegador Microsoft Edge y Chrome no están compartiendo
el mismo cookie, entonces van a tener sesiones de usuario diferentes

De igual forma si abrimos otro navegador en este caso Firefox, al ser otro cookie este tendrá la misma
instancia pero en cantidad de usuario dirá 3.

I.S.C. Martín García Martínez 54

ASP.NET / Bootstrap
Ahora si nosotros lo deseamos también podemos indicar que no queremos utilizar cookies, en nuestro
WebForm, para eso vamos a dar doble click en el archivo Web.config el cual se encuentra dentro del
Explorador de soluciones.

Aquí vamos añadir las siguientes líneas de código debajo de la instruccion <compilation debug="true"
targetFramework="4.7.2"/>, las líneas de código serán las siguiente.

<sessionState mode="InProc" cookieless="true">

</sessionState>

Y quedara de la siguiente forma.

I.S.C. Martín García Martínez 55

ASP.NET / Bootstrap
<?xml version="1.0" encoding="utf-8"?>

<configuration>
<system.web>
<compilation debug="true" targetFramework="4.7.2"/>
<sessionState mode="InProc" cookieless="true">
</sessionState>

I.S.C. Martín García Martínez 56

ASP.NET / Bootstrap
Ahora regresando al WebForm1.aspx lo ejecutaremos nuevamente, ahora nos damos cuenta que la dirección
del host se muestra diferente https://localhost:44364/(S(sdynj1nh5peli3kkor25mnfe))/WebForm1.aspx en
esta presenta un ID.

Si abrimos ahí mismo una nueva ventana en el navegador e insertamos esa misma dirección nos aparecerá el
mismo número de instancias con el mismo número de sesión de usuario, pues tiene el mismo número de ID.

I.S.C. Martín García Martínez 57

ASP.NET / Bootstrap
Pero si abrimos le quitamos la línea que hace referencia al ID el cual quedaría de esta forma
https://localhost:44364/WebForm1.aspx nos percataremos que esta cambiara su número de usuario pues
tomara un ID distinto, en este caso se toma como si se estuviera creando una nueva sesión, y de esta forma se
estarán teniendo dos o más sesiones diferentes bajo un mismo navegador.

I.S.C. Martín García Martínez 58

ASP.NET / Bootstrap
Eventos de la página.

Eventos de aplicación, Eventos de ciclo de vida de una página, para este ejemplo deberá iniciarse directamente
como Windows Forms.

Los eventos pueden ocurrir en tres niveles, Nivel de aplicación, Nivel de página, Nivel de control.

Eventos de aplicación
Se usan para inicializar datos que estarán disponibles para todas las sesiones actuales de la aplicación.

Eventos de Sesión
Se usan para inicializar datos que estarán disponibles para la sesión individual en particular.

Se guardar en Global.asax

 Application_Start
 Application_End
 Application_Error
 Session_Start
 Session_End

Eventos de controles
Después del evento Load y son los eventos de cada control

LoadComplete.- Sucede después de los eventos de controles.

PreRender.- Antes de que se visualice la página.

I.S.C. Martín García Martínez 59

ASP.NET / Bootstrap
PreRenderComplete.- Después del evento PreRender.

Unload.-

 Primero sucede en los controles y luego en la página.

 Se lleva acabo cuando la página se libera de la memoria.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace EventosPagina003
{
public partial class WebForm1 : System.Web.UI.Page
{

protected void Page_PreInit(object sender, EventArgs s)

{
Response.Write("1) PreInit <br/>");
}
protected void Page_Init(object sender, EventArgs s)
{
Response.Write("2) Init <br/>");
}

protected void Page_InitComplete(object sender, EventArgs s)

{
Response.Write("3) InitComplete <br/>");
}

protected void Page_PreLoad(object sender, EventArgs s)

{
Response.Write("4) PreLoad <br/>");
}

protected void Page_Load(object sender,

EventArgs s)
El evento Load es el
{ evento por default
Response.Write("5) Load <br/>");
}

protected void Page_LoadComplete(object sender, EventArgs s)

{
Response.Write("6) LoadComplete <br/>");
}

protected void Page_PreRender(object sender, EventArgs s)

{
Response.Write("7) Page_PreRender <br/>");
}

protected void Page_PreRenderComplete(object sender, EventArgs s)

{

I.S.C. Martín García Martínez 60

ASP.NET / Bootstrap
Response.Write("8) Page_PreRenderComplete <br/>");
}

}
}

El orden en el cual van a ir sucediendo y se van llevando a cabo los diferentes eventos, así es el ciclo de vida de
la página.

I.S.C. Martín García Martínez 61

ASP.NET / Bootstrap
Variables de sesión
En este ejemplo vamos a ver cómo trabajan las variables de sesión, Lo primero que haremos será crear un
proyecto, que nombraremos variablesSesion04 ya dentro de nuestro proyecto crearemos dos WebForm, uno
con el nombre de WebForm1 y otro con el nombre de WebForm2.

La variable de sesión es compartida entre los diferentes WebForm que pertenezcan a la misma sesión.

I.S.C. Martín García Martínez 62

ASP.NET / Bootstrap
En el diseño del formulario de WebForm1 le daremos el siguiente aspecto, el cual va a tener un TextBox1 al
cual vamos a llamar TxtConteo y un botón al cual se nombrara con el nombre de btnIncrementa y con su
propiedad texto de con el nombre de Incrementa, y un Label con el texto de “Variables de sesión de
WebForm1”.

Una vez que se tenga el diseño se agregara el siguiente código al archivo WebForm1.aspx.

I.S.C. Martín García Martínez 63

ASP.NET / Bootstrap
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace variablesSesion04
{
public partial class WebForm1 : System.Web.UI.Page
{
private int conteo = 1;
protected void Page_Load(object sender, EventArgs e)
{
if (IsPostBack)
{
TxtConteo.Text = "0";
}
if (Session["click"] != null)
{
TxtConteo.Text = ((int)Session["click"]).ToString();
}
}

protected void btnIncrementa_Click(object sender, EventArgs e)

{
// Si ya se ha usado la variable click
if (Session["click"] != null)
{
//Leemos el valor, hacemos typecast, lo incrementamos y lo colocamos
en la
//variable para poder trabajar con ese dato en nuestro código
conteo = (int)Session["click"] + 1;
}

//Actualizamos el textbox
TxtConteo.Text = conteo.ToString();

// Asignamos el valor en la variable click

Session["click"] = conteo;
}
}

Da igual forma este mismo código exactamente el mismo se agregara ahora al WebForm2.aspx junto con el
mismo diseño respecto a los controles igual al WebForm1.

I.S.C. Martín García Martínez 64

ASP.NET / Bootstrap
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace variablesSesion04
{
public partial class WebForm2 : System.Web.UI.Page
{
private int conteo = 1;
protected void Page_Load(object sender, EventArgs e)
{
if (IsPostBack)
{
TxtConteo.Text = "0";
}
if (Session["click"] != null)
{
TxtConteo.Text = ((int)Session["click"]).ToString();
}
}

protected void btnIncrementa_Click(object sender, EventArgs e)

//Actualizamos el textbox
TxtConteo.Text = conteo.ToString();

// Asignamos el valor en la variable click

Session["click"] = conteo;
}
}

Esto significa que la variable de sesión va a ser compartida entre el WebForm1 y WebForm2, es decir si en la
sesión del navegador 1 se incrementa a 4 y si se abre otro navegador 2 y se da click en el botón Incrementar,

I.S.C. Martín García Martínez 65

ASP.NET / Bootstrap
este continuara el incremento que se quedó pendiente en el navegador 1, la sesión se comparte entre los dos
WebForm.

Eventos de controles

Ahora en estos ejercicios vamos a ejemplificar los eventos que pueden tener los controles ente los que
veremos los Eventos de PostBack, Eventos Cached y Eventos de Validación, Así como la página, el webform
que tenemos va a tener una serie de eventos, los controles también van a tener sus propios eventos.

Cuando se trabaja con ASP se consideran tres tipos de eventos que pueden suceder con los controles
(PostBack, Eventos Cached y Eventos de Validación)

Para este ejemplo agregaremos un nuevo webform con el nombre que traer por default de WebForm1.

Y enseguida se dará click en el botón Agregar.

I.S.C. Martín García Martínez 66

ASP.NET / Bootstrap
Enseguida agregaremos los siguientes controles con sus respectivas propiedades.

I.S.C. Martín García Martínez 67

ASP.NET / Bootstrap
Label con el Texto Evento PostBack
Líneas punteadas (servirá
como separador). ID btnPostBack
Text PostBack

ID lblMensajePB
Text Antes de PostBack

Text Evento Cached

ID lblMensajeCached
Text No ha sucedido el evento
Cached

ID txtChanged

Text Evento validación

ID txtValidacion
Una vez que se tenga el diseño se dará doble click en el botón con el Text Postback
para entrar a su handler correspondiente, y escribiremos el siguiente código.

protected void btnPostBack_Click(object sender, EventArgs e)

{
lblMensajePB.Text = "Ya ocurrio el evento PostBack";
}

Y al correr el programa.

y ejecutar el botón Postback nos aparecerá lo siguiente.

I.S.C. Martín García Martínez 68
ASP.NET / Bootstrap
Ahora veremos los eventos de tipo Cached, para eso daremos doble click en el control txtChanged para entrar
a su handler y escribiremos la siguiente linea de código.

protected void txtChanged_TextChanged(object sender, EventArgs e)

{
lblMensajeCached.Text = "Ya ocurrio el evento Cached";
}

Al correr el programa y escribir en la caja de texto de Cached nos damos cuenta que este no cambia al escribir
en la caja de texto y no ha cambiado porque ese evento se ha quedao guardado y cuando regrese el webform
es cuando va a suceder.

I.S.C. Martín García Martínez 69

ASP.NET / Bootstrap
Hasta que se da click en el boton de PostBack para enviar el webform al servidor y cuando regrese el servidor
el webform es cuando se va a llevar acabo.

Ahora para ejemplificar la Validación, vamos a buscar dentro del cuadro de herramientas una seccion que se
llama Validacion y aho vamos agregar un control que se llama RequiredFielValidator.

Una vez ubicado lo vamos a arrastrar junto al txtValidacion

I.S.C. Martín García Martínez 70

ASP.NET / Bootstrap
Ya que se ha agregado el control RequiredFielValidator a este se establecera con sus respectivas propiedades.

ID RFVtxtValidacion
ControlToValidate txtValidacion
ErrorMessage Mi mensaje de error

Lo que hace este control de validación es que manda un mensaje de error si el textbox no tiene ningún
contenido, es decir que si el textbox no tiene ningún contenido va a mandar un mensaje de error, en la
propiedad Error Message ahí se puede declarar un mensaje en particular en el cual hemos establecido "Mi
mensaje de error"

I.S.C. Martín García Martínez 71

ASP.NET / Bootstrap
Después de eso podemos establecer un evento de validación, el evento de validación va a suceder antes de
que el webform sea enviado al servidor a continuación veremos cómo hacerlo.

ESTE TEMA ESTA PENDIENTE

TextBox

En este ejercicio veremos algunas de las propiedades más comunes del control TextBox, como son SingleLine,
ToolTip, ReadOnly, MaxLeng, Columns, Rows, MultiLine, Password lo primero que haremos será diseñar la
siguiente página con sus propiedades señaladas.

ID txtSingleLine
ToolTip TextBox de línea

ID txtReadOnly
ReadOnly True

ID txtMaxLeng
MaxLength 5

ID txtColumnas
Columns 5

I.S.C. Martín García Martínez 72

ASP.NET / Bootstrap
ID txtMultiLine
Columns 45
TextMode MultiLine

ID txtPassword
TextMode Password

Una vez que se ha definido el diseño se definirán dos líneas de código que se establecerán desde el archivo
WebForm1.aspx.cs

using System.Web.UI;
using System.Web.UI.WebControls;

namespace Boton06
{
public partial class WebForm1 : System.Web.UI.Page
{
// Las tres formas en las que el textbox se despliega usualmente
// Single, Multiline, Password

// Propiedades mas importantes

// ReadOnly - Solo se lee, no se puede escribir en el
// MaxLength - Cantidad máxima de caracteres que recibe el textbox
// Colums -Ancho del control en caracteres
// ToolTip - Da información sobre el control
protected void Page_Load(object sender, EventArgs e)
{

// Inicializamos el readonly
txtReadOnly.Text = "Hola a todos";

// Colocamos el focus en un control

txtMultiLine.Focus();

I.S.C. Martín García Martínez 73

ASP.NET / Bootstrap
RadioButton

En esta lección vamos a trabajar con el Radio Button, veremos su uso con una aplicación de ASP.NET,
propiedades más importantes que tiene y también el AutoPostBack.

Se va a iniciar generando una nueva aplicación en para este ejemplo se le pondrá el nombre de RadioBtn07.

I.S.C. Martín García Martínez 74

ASP.NET / Bootstrap
Posteriormente se va a agregar un Nuevo elemento Formulario Web Forms como se muestra a continuación.

Ya que se tiene el Web Form limpio y vacío ahora se agregará el control RadioButton del cuadro de
herramientas, como ya se sabe el RadioButton es un control que va a permitir hacer una selección entre
diferentes opciones, de varias opciones solo una va a poder ser seleccionada, en este ambiente RadioButton
trabaja de una forma muy similar a como trabaja en plataforma de escritorio.

De igual forma se agregarán los siguientes controles con sus respectivas propiedades.

I.S.C. Martín García Martínez 75

ASP.NET / Bootstrap
ID rbtnPizza ID rbtnFrutas
GroupName Alimentos GroupName Alimentos
Text Pizza Text Frutas

ID rbtnVerduras
GroupName Alimentos
Text Verduras

ID btnProcesa
Text Procesa

Ya que se han declarado las propiedades de los controles ahora se dará click sobre el botón de Procesa para
entrar al su handler en el cual se escribirá el siguiente código.

I.S.C. Martín García Martínez 76

ASP.NET / Bootstrap
protected void btnProcesa_Click(object sender, EventArgs e)
{
{

if (rbtnPizza.Checked == true)
Response.Write("Te recomiendo la hawaiana <br>");

if (rbtnFrutas.Checked == true)
Response.Write("Te recomiendo la manzana <br>");

if (rbtnVerduras.Checked == true)
Response.Write("Te recomiendo espinacas <br>");

}
}

Hasta aquí ya se tiene la primer del programa al correrlo se ejecutará de la siguiente forma.

Al seleccionar la opción Pizza y después al darle click al botón Procesa cambiara la etiqueta de recomendación.

Al seleccionar la opción Frutas y después al darle click al botón Procesa cambiara la etiqueta de
recomendación.

I.S.C. Martín García Martínez 77

ASP.NET / Bootstrap
Al seleccionar la opción Verduras y después al darle click al botón Procesa cambiara la etiqueta de
recomendación.

Ahora seguiremos diseñando nuestra página dándole incluyendo más controles como se muestra a
continuación.

Ya que este el diseño se dará click sobre el botón Combustible para así poder ingresar a su handler y codificar.

I.S.C. Martín García Martínez 78

ASP.NET / Bootstrap
protected void btnCombustible_Click(object sender, EventArgs e)
{
if (rbtnGasolina.Checked == true)
Response.Write("Tu auto usa gasolina <br>");

if (rbtnDiesel.Checked == true)
Response.Write("Tu auto usa diesel <br>");

if (rbtnEtanol.Checked == true)
Response.Write("Tu auto usa etanol <br>");
}

Este código solo nos va a decir que RadioButton se tiene marcado.

Al correr este programa nos podemos dar cuenta que cada RadioButton trabaja y response de acuerdo al
grupo al que pertenece es decir cuando se da click en el botón Procesa o Combustible este dirá en la etiqueta
que tipo se recomienda o qué tipo de Combustible dirá que tipo de combustible utiliza el vehículo. Esta parte
del ejercicio básicamente muestra la aplicación de dos grupos diferentes de la propiedad GroupName del
RadioButton.

Ahora vamos a trabajar con la propiedad de CheckedChanged para eso nos vamos a las Propiedades y
teniendo seleccionado el control de RadioButton de Gasolina seleccionaremos el botón de Eventos.

I.S.C. Martín García Martínez 79

ASP.NET / Bootstrap
Dando doble click en el evento CheckedChanged nos va a generar el handlers para el evento CheckedChanged

En el cual se escribirá la siguiente línea de código.

protected void rbtnGasolina_CheckedChanged(object sender, EventArgs e)

{
Response.Write("La gasolina es contaminante <br>");
I.S.C. Martín García Martínez 80
ASP.NET / Bootstrap
}

De igual forma invocamos el evento CheckedChanged para el RadioButton

Diesel y le escribiremos también una línea de código como se muestra a
continuación.

protected void rbtnDiesel_CheckedChanged(object sender, EventArgs e)

{
Response.Write("El diesel es contaminante <br>");
}

Por último, debemos cambiar la propiedad de AutoPostBack a True, esto para que el cambio al seleccionar el
radioButton Gasolina o RadioButton Diesel se haga de forma inmediata en la etiqueta.

I.S.C. Martín García Martínez 81

ASP.NET / Bootstrap
Estos han sido los comportamientos básicos más importantes con relación a los RadioButtons.

CheckBox
En esta lección veremos el CheckBox, veremos la forma más fácil de utilizarlo, sus propiedades más
importantes, y también el uso de AutoPostBack.

El CheckBox es un tipo de botón el cual va a tener dos estados ya se ha marcado o desmarcado, para esto se va
a tener una propiedad que es la propiedad de Checked la cual ya conocemos del RadioButtons, cuando esta
propiedad tiene el valor de True significa que significa que el CheckBox está marcado, y cuando tiene el valor
de False significa que no ha sido marcado, a diferencia del RadioButtons nosotros podemos seleccionar
múltiples CheckBox a la vez, esa es la principal diferencia que se tiene con el RadioButtons.

Ahora se iniciará con el diseño de la interfaz del programa, este programa va a calcular la cantidad a pagar
dependiendo de los CheckBox seleccionados, y deberá quedar de la siguiente forma.

Control: Label Control: TextBox

Text Cantidad a Pagar ID txtPago
Text 0

Control: CheckBox
ID ChkQueso
Text Extra queso

I.S.C. Martín García Martínez 82

ASP.NET / Bootstrap
Control: CheckBox
ID ChkPapas
Text Papas

Control: CheckBox
ID ChkBebida
Text Bebida
Control: Label
Text Total

Control: Label
ID btnCalcular ID lblTotal
Text Calcular Text $0

Una vez que ya se tiene definido el diseño vamos a entrar al handler del botón Calcular dándole doble click.

De esta forma deberá quedar el código.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace CheckBox
{
public partial class CheckBox : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{

protected void CheckBox3_CheckedChanged(object sender, EventArgs e)

{

protected void btnCalcular_Click(object sender, EventArgs e)

{
Calcular();
}

I.S.C. Martín García Martínez 83

ASP.NET / Bootstrap
private void Calcular()
{
//Obtenemos la cantidad inicial
int cantidad = Convert.ToInt32(txtPago.Text);

//Verificamos cada CheckBox y actuamos de acuerdo

if (ChkQueso.Checked == true)
cantidad += 15;

if (ChkPapas.Checked == true)
cantidad += 20;

if (ChkBebida.Checked == true)
cantidad += 18;

//Mostrar el total
lblTotal.Text = "$" + cantidad.ToString();
}

}
}

Este programa pretende agregar precio extra a partir de una cantidad a pagar como dato de entrada.

I.S.C. Martín García Martínez 84

ASP.NET / Bootstrap
Como cualquier otro control el CheckBox también tiene sus eventos, uno de ellos eventos mas usados de este
control es el CheckedChanged, este evento se va a disparar cuando el control cambie de marcado a
desmarcado o de desmarcado a marcado, para eso deberán establecerse las siguientes propiedades en el
control de Extra queso (ChkQueso).

Y al final asi deberá quedar el código

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace CheckBox
{
public partial class CheckBox : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{

protected void CheckBox3_CheckedChanged(object sender, EventArgs e)

{

protected void btnCalcular_Click(object sender, EventArgs e)

{
Calcular();
}

I.S.C. Martín García Martínez 85

ASP.NET / Bootstrap
private void Calcular()
{
//Obtenemos la cantidad inicial
int cantidad = Convert.ToInt32(txtPago.Text);

//Verificamos cada CheckBox y actuamos de acuerdo

if (ChkQueso.Checked == true)
cantidad += 15;

if (ChkPapas.Checked == true)
cantidad += 20;

if (ChkBebida.Checked == true)
cantidad += 18;

//Mostrar el total
lblTotal.Text = "$" + cantidad.ToString();
}

protected void ChkQueso_CheckedChanged(object sender, EventArgs e)

{
Response.Write("Excelente eleccion el extra queso");
Calcular();
}
}
}

I.S.C. Martín García Martínez 86

ASP.NET / Bootstrap
HyperLink y LinkButton
En esta lección vamos a ver HyperLink y LinkButton, veremos el uso de HyperLink con sus propiedades más
importantes, también el uso de LinkButton y como se puede hacer que se ejecute código JavaScript del lado
del cliente cuando se le de click al LinkButton.

Estos controles nos van a ayudar a tener links o ligas hacia otras páginas ya sean que forme parte de nuestra
aplicación o que sean externas.

Pequeña pero principal diferencia entre HyperLink y LinkButton, la diferencia es sencilla pero muy
importante, mediante el control LinkButton se puede generar código que se ejecuta del lado del cliente, es
decir de lado de la computadora que está viendo ese Web Forms independientemente de ese código que nos
interesa que se ejecute del lado del servidor, ese código que se va a ejecutar del lado del cliente puede estar
escrito en cualquier lenguaje que soporte HTML, para el ejemplo del siguiente ejercicio se va a utilizar
JavaScript (El código de JavaScript se ejecutaría del lado del cliente y el código de c# se ejecutaría del lado del
servidor).

Ahora se iniciará con el diseño de la interfaz del programa, el cual quedará de la siguiente forma.

I.S.C. Martín García Martínez 87

ASP.NET / Bootstrap
Lo primero que haremos será crear dos Web Forms uno con el nombre WebForm1 y otro con el nombre
WebForm2, también se deberá agregar una imagen, la imagen se podrá arrastrar directamente, en este caso
deberá meterse al icono del proyecto links y así se verán en nuestro Explorador de soluciones.

Posteriormente textos al formulario y los controles en mención

I.S.C. Martín García Martínez 88

ASP.NET / Bootstrap
Control: HyperLink Control: HyperLink
ID: hlkUno ID: hlkDos
NavigateUrl: https://www.google.com/ NavigateUrl: ~/WebForm2.aspx
Text: Ir a google Text: Ir al webform2

Control: HyperLink
La propiedad Target con el atributo ID: hlkTres
_blank es la que abrirá la página en NavigateUrl: ~/WebForm2.aspx
otra pestaña Target: _blank
Text: Ir al webform2 Text: Ir a webform2 en otra pestaña

Cabe destacar que una de las formas de establecer la dirección en la propiedad NavigateUrl tratandose de
manejo interno de links es dar click en la parte derecha (…) de la propiedad en donde se abrirá una ventana
para seleccionar con comodidad el Web Forms que se desea abrir.

I.S.C. Martín García Martínez 89

ASP.NET / Bootstrap
Control: HyperLink
ID: hlkImagen
ImageUrl: ~/estados-unidos.png
NavigateUrl: ~/WebForm2.aspx
Text: Link con imagenes

Control: LinkButton
ID: lkbUno
PostBackUrl: ~/WebForm2.aspx
Text: Ir a webform2

Control: LinkButton
ID: lkbScript
OnClientClick: return Funcion();
PostBackUrl: ~/WebForm2.aspx
Text: Tiene un Script

Recomendación para link con imagen

Se recomienda siempre usar la propiedad Text del control HiperLink ya que, si por alguna razón no jala la
imagen, la propiedad Text mantendrá el vinculo del link.

Codigo de LinkButton que va de lado del cliente.

<asp:LinkButton ID="lkbScript" runat="server" OnClientClick="return Funcion();"

PostBackUrl="~/WebForm2.aspx">Tiene un Script</asp:LinkButton>

</script>

Y al ejecutarse se va a ver de la siguiente manera.

I.S.C. Martín García Martínez 90

ASP.NET / Bootstrap
ImageButton y Evento Command
En esta lección veremos el uso de ImageButton y también el evento Command entenderemos en que consiste
y vamos a trabajar con CommandName y CommandArgument, el evento Command nos permite tener un
Handler que sea común a diferentes botones.

Lo primero que se va a ser será tener una imagen lista y arrastrarla al explorador de soluciones.

ImageButton

I.S.C. Martín García Martínez 91

ASP.NET / Bootstrap
Posteriormente nos vamos a Cuadro de herramientas y buscamos el control ImageButton y lo arrastramos.

Una vez que se ha agregado el control ImageButton se le agregara la imagen que anteriormente se arrastró al
Explorador de soluciones, mediante su Propiedad ImageUrl.

I.S.C. Martín García Martínez 92

ASP.NET / Bootstrap
Así se verá nuestra ID con el control ImageButton con la imagen cargada.

Como el control ImageButton es un botón, nosotros podemos hacer las cosas que hacemos normalmente con
los botones, por ejemplo, el evento click, entonces, vamos a Propiedades, seleccionamos la lista de Eventos

I.S.C. Martín García Martínez 93

ASP.NET / Bootstrap
En el evento click le damos doble click
para entrar al Handler.

Como prueba solo escribiremos un mensaje como respuesta al evento click que diga “Botón de imagen”

Response.Write("Botón de imagen");

Una vez que se procede a ejecutar este pequeño programa se dará click en el botón ImageButton y el mensaje
se desplegará como a continuación muestra la siguiente imagen.

I.S.C. Martín García Martínez 94

ASP.NET / Bootstrap
Ya vimos que el ImageButton realmente se comporta como cualquier botón tradicional con la diferencia de
que nosotros le podemos colocar una imagen.

Evento Command
Ahora veremos el tema del evento Evento Command, el evento Command es importante porque es un evento
que nos va a permitir tener un Handler que sea utilizado por múltiples controles, es decir, en lugar de tener
que cada botón tenga un Handler, se puede tener un solo Handler que sea compartido por varios botones, y
vamos a trabajar sobre de eso.

Para ejemplificar el Evento Command, vamos a diseñar la siguiente interfaz.

ID: txtA
Text: 0 ID: txtB
Text: 0 ID: btnSuma
CommandName: suma
Text: Suma

ID: btnResta
CommandName: resta
Text: Resta

ID: btnMult
CommandName: mult
Text: Mult

ID: btnDiv
CommandName: div
I.S.C. Martín García Martínez Text: Div 95
ASP.NET / Bootstrap
Una vez que ya tenemos nuestras Propiedades de los controles definidos, nos vamos a seleccionar el control
del botón Suma y dentro de la pestaña de Eventos en la Propiedad Command escribiremos operaciones.

Después de haber escrito operación en la propiedad Command daremos doble click sobre la palabra
operaciones para entrar a su Handler, y en dicho Handler escribiremos las siguientes líneas de código, líneas
que representan las operaciones que se ejecutaran de acuerdo al botón que corresponde cada operación.

I.S.C. Martín García Martínez 96

ASP.NET / Bootstrap
Este Handler de operaciones es el que nosotros vamos a compartir con los diferentes botones, es el Handler
que va a ser invocado con el evento de Command, por lo tanto, vamos a seleccionar la opción operaciones de
la ventana de Eventos en cada una de la Propiedad Command de cada botón de operaciones (suma, resta mult
y div).

operaciones

Por medio de CommandName, nosotros podemos saber cuál fue el botón o el control que está haciendo la
invocación al Handler (operaciones), una vez que ya se estableció la opción operaciones en cada uno de los
botones vamos a correr el programa y probaremos cada una de las operaciones.

SUMA RESTA

I.S.C. Martín García Martínez 97

ASP.NET / Bootstrap

MULTIPLICACIÓN
DIVISIÓN

Ahora vamos hacer otro ejemplo con Evento Command usando un mismo Handler, pero ahora con
parámetros, para lo que vamos a diseñar una interfaz como la que se ve a continuación.

Ya que está diseñada la interfaz, Cuando usamos el evento Command, no solamente nosotros podemos indicar
por medio de CommandName, cual fue el objeto que está haciendo uso de ese Handler, sino que también
vamos a tener CommandArgument es decir nosotros podemos pasar un parámetro, un argumento junto con
el CommandName.

I.S.C. Martín García Martínez 98

ASP.NET / Bootstrap
Por lo que primero vamos a generar el código dentro del Handler del botón Saludo, este Handler se va a
generar dentro en la Propiedad Command del evento del botón Saludo con el nombre de: mensaje, (este va a
ser en Handler compartido).

Mensaje, en la Propiedad
Command

Una vez ya establecida la palabra mensaje en el evento Command del botón Suma vamos a darle enter para
entrar a su Handler y escribir las siguientes líneas de código.

I.S.C. Martín García Martínez 99

ASP.NET / Bootstrap
Describiendo el código anterior seria, si el CommandName es "esp" de español, va a escribir, en español es: y
luego el argumento que recibió, si el CommandName fue "ing" de inglés, entonces va a escribir en inglés es: y
el argumento que recibió, entonces estamos haciendo uso del CommandName y de CommandArgument,
nótese que este caso CommandName no se está usando 100 % para identificar al objeto, sino para identificar
una categoria de objeto, es decir una categoría de botón que va a ser la categoría de botones en español y mi
categoría de botones en inglés y CommandArgument, es la informacion que esta mandando para que se
pueda utilizarla adentro del código.

Ya que se tiene todo, las propiedades a cada botón y el Handler compartido, vamos a correr este ejercicio, y
dependiendo del botón que se cliquee se va a colocar un saludo o una despedida ya sea en español o en inglés.

I.S.C. Martín García Martínez 100

ASP.NET / Bootstrap
DropDownList VS2022
En esta lección vamos estar trabajando con el DropDownList, vamos a crear un DropDownList veremos cómo
podemos colocarle elementos desde el editor, también como podemos colocar elementos desde el código, y
como obtener propiedades del elemento seleccionado.

En esta ocasión vamos a trabajar con el DropDownList, es la primera lección en la cual nos enfocamos a este
control, aunque posteriormente vamos a tener otras lecciones.

Enseguida vamos a diseñar una interfaz como la que a continuación se presenta.

ID: ddlFrutas ID: btnPruebas

Text: Prueba

I.S.C. Martín García Martínez 101

ASP.NET / Bootstrap
ID: lblSeleccionado ID: lblIndice ID: lblValor

Que es lo que va hacer esta aplicación, vamos a tener el DropDownList, y el DropDownList nos va a presentar
una lista de opciones de las cuales nosotros podremos hacer una selección, ya que le demos clic al botón de
prueba, vamos a ver que opción selecciono el usuario.

Entonces para eso vamos a ver como nosotros en esta etapa de diseño de WebForm podemos colocar los
elementos al DropDownList

Entonces ahora vamos a ver como nosotros en esta etapa de diseño del WebForm podemos colocar los
elementos al DropDownList, esto lo vamos hacer teniendo seleccionado el control DropDownList, vamos a
buscarle su propiedad Items, Realmente lo que es Items, no es otra cosa más que una colección de elementos
de lista, entonces ahí es donde nosotros vamos a ir colocando cada uno de los elementos que deseamos,
aunque desde luego hay otros mecanismos por medio de los cuales podemos ir colocando esos elementos en
la colección, entonces Items es una colección y ahí van ir los elementos del DropDownList.

I.S.C. Martín García Martínez 102

ASP.NET / Bootstrap
Una vez que ya tenemos la propiedad Items del DropDownList, abriremos el Editor de la colección ListItem.

Para poder ir agregando los elementos al Editor de la colección ListItem, simplemente vamos ir dando clic al
botón agregar, y al crearse el nuevo elemento, en este nuevo elemento nosotros podemos ir colocando
diferentes propiedades, por ejemplo, en la propiedad del Texto (Text) va a ser el texto que se va a mostrar en
el WebForm. (Lo que se escriba en la Propiedad Text va a ser el valor que desplegara el control DropDownList)

La Propiedad Value es el valor que está relacionado con la base de datos, ahorita no se tiene ninguna
conectividad con la base de datos, por ahora en este ejemplo no se tiene ninguna conectividad con la base de
datos, pero cuando tengamos esa conectividad en Value vamos a tener ese valor relacionado con la base de
datos.

I.S.C. Martín García Martínez 103

ASP.NET / Bootstrap
Una vez que se han adicionado los elementos al Editor de la colección ListItem, se dará clic al botón Aceptar, y
a correr el programa se verán así nuestros elementos a la hora de desplegar el DropDownList.

Hasta ahora hemos visto cómo podemos adicionar elementos en forma de diseño y a través del Editor de la
colección ListItem, ahora veremos como ir adicionando elementos de manera programática, es decir mediante
código, para esto tenemos que modificar el código, para esto vamos a dar clic derecho al ratón sobre el diseño
de WebForm1 y aparecerá un menú contextual, en este menú seleccionaremos la opción Ver código.

I.S.C. Martín García Martínez 104

ASP.NET / Bootstrap
Enseguida así se visualizará la parte de código para empezar a programar en C#

Ya que estamos situados en el Handler del evento Load, teclearemos las siguientes líneas de código para
*adicionar mas Items desde código, en el evento Load es un buen lugar para adicionar dichos elementos pues
cada que se cargue la pagina ejecutara el código que radica en el evento Load.

El siguiente código adicionara más Items, aparte de los que ya se tienen precargados en el Editor de la
colección ListItem.

I.S.C. Martín García Martínez 105

ASP.NET / Bootstrap
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
ListItem fresa = new ListItem("Fresa", "4");
ListItem naranja = new ListItem("Naranja", "5");

ddlFrutas.Items.Add(fresa);
ddlFrutas.Items.Add(naranja);
}
}

En primer lugar se está verificando que no sea un PostBack, ¿porque se verificar esto?, porque se desea que
los elementos nuevos solamente se adicionen una vez, entonces se van adicionar cuando se cargue el
WebForm por primera vez, si no colocamos es if (!IsPostBack) entonces cada vez que se genere el evento
Load (se cargue la página) y se ejecute el Handler pues se va a tener la edición de los nuevos elemento y se
estarán agregando cada que cargue la pagina, es decir se van estar repitiendo, por eso se hace de de esta
manera y se recomienda que siempre que sea el caso se haga de esta forma.

Explicación del código: Esta cuando se crean las instancias de ListItem, que es el elemento que se guarda en la
colección para el DropDownList, entonces se crea un elemento que se llama fresa, y en el constructor se tiene
que colocar el Texto (Text) y el Valor que le corresponde (Value), entonces el Texto va a ser fresa y el valor que
le corresponde va a ser 4, Luego se tiene naranja el Texto va a ser Naranja, y el Value será 5.

Ya que se tienen todos los elementos que se quieren adicionar programáticamente, ahora simplemente se
adicionan al DropDownList, en donde en su propiedad de Item y como Item es una colección se usa el método
Add, por lo tanto, se adiciona el ListItem de Fresa y el ListItem de naranja.

ListItem fresa = new ListItem("Fresa", "4");

ListItem naranja = new ListItem("Naranja", "5");

ddlFrutas.Items.Add(fresa);
ddlFrutas.Items.Add(naranja);

Entonces cuando se cargue la pagina por primera vez van a aparecer ellos, al ejecutar el resultado será el
siguiente.

I.S.C. Martín García Martínez 106

ASP.NET / Bootstrap
Vemos que aparte de los Item que se agregaron con el Editor de la colección ListItem, aparecerá también
Fresa y Naranja.

Ahora vamos hacer algo útil como saber cuál es el elemento que selecciono el usuario, ya para esto vamos
hacer uso de nuestro botón y desde luego de nuestras etiquetas, ahora haciendo doble clic en el Botón prueba
entraremos a su Handler y escribiremos el siguiente código.

I.S.C. Martín García Martínez 107

ASP.NET / Bootstrap
protected void btnPruebas_Click(object sender, EventArgs e)
{
lblIndice.Text = ddlFrutas.SelectedIndex.ToString();
lblValor.Text = ddlFrutas.SelectedValue.ToString();
lblSeleccionado.Text = ddlFrutas.SelectedItem.ToString();

//blSeleccionado.Text = ddlFrutas.Items[ddlFrutas.SelectedIndex].ToString();
}
}

Aquí vamos a ver la información del elemento seleccionado, tenemos entonces nuestro DropDownList
ddlFrutas, y tenemos también una serie de propiedades que podremos utilizar, si utilizamos las propiedades
del SelectedIndex, se obtiene el índice del elemento que esta seleccionado, luego en la parte de
SelectedValue, este es el valor del elemento seleccionado, obviamente se está leyendo y se coloca el
resultado en la etiqueta de lblValor, ahora si queremos conocer el elemento seleccionado como tal, hacemos
uso nada más del SelectedItem, entonces aquí se obtiene el elemento como tal, el valor de Text y se está
colocando en la etiqueta de lblSeleccionado, Entonces todo esto va a suceder cuando se le dé clic al botón
Prueba.

Codificado el Botón Prueba, vamos a correr el programa, y se vera de la siguiente manera.

Vemos que al seleccionar manzana y dando clic al botón Prueba nos aparecerá, Manzana, su índice y su value,
y así se verá reflejado el resultado del índice y valor de cada una de los elementos agregados.

I.S.C. Martín García Martínez 108

ASP.NET / Bootstrap
Nota: El codigo comentado
//lblSeleccionado.Text = ddlFrutas.Items[ddlFrutas.SelectedIndex].ToString();
lblSeleccionado.Text = ddlFrutas.Items[ddlFrutas.SelectedIndex].ToString();

El código comentado es una alternativa en la cual nosotros podemos obtener el elemento, en este caso se
está obteniendo el elemento vía un índice, como al fin y al cabo Item es una coleccion, se puede utilizar un
indice para acceder al elemento en particular, ahora el índice que se desea, será el índice que ha sido
seleccionado por el usuario, por eso se está utilizando ddlFrutas.SelectedIndex como el indice, de esta
manera se llega al elemento que se encuentra en ese índice y ya se puede hacer con él lo que se necesite, en
este caso simplemente se convierte a cadena para poderlo colocar en la etiqueta lblSeleccionado, esta linea
practicamente hace lo mismo, pero lo importante de esta línea es que se puede ver que podemos trabajar con
esa colecciona a través de índices también si es que lo necesitamos y esto va a darle flexibilidad a la lógica que
nosotros necesitemos proveer en nuestras aplicaciones.

DropDownList II XML MapPath VS2022

En esta lección seguiremos trabajando con el DropDownList y veremos cómo podemos rellenar el
DropDownList con información que se encuentre en un archivo XML también veremos el uso de MapPath.

En esta lección aprenderemos como podemos rellenar un DropDownList usando los contenidos de un archivo
XML.

Para hacer esto lo primero que debemos hacer es entender otro concepto importante, y es que lo archivos van
a tener un Path, van a tener una ruta física, y también van a tener un Path con una ruta lógica.

Para comenzar lo primero que debemos hacer es adicionar al igual que los ejemplos anteriores nuestro
WebForm1, como vamos hacer que el control este lleno, gracias a los contenidos de un archivo XML,
entonces vamos adicionar DropDownList enseguida adicionaremos un archivo XML.

La forma de adicionar un archivo XML, es muy similar a como se agrega un elemento WebForm, dando click
derecho sobre el nombre de nuestro proyecto en este caso DropDownList_II, posteriormente la opción
Agregar y enseguida la opción Nuevo elemento.

I.S.C. Martín García Martínez 109

ASP.NET / Bootstrap
Cundo se abra la ventana de Agregar nuevo elemento, vamos a seleccionar la opción Visual C# y
posteriormente buscaremos el elemento Archivo XML. A este archivo lo guardaremos con el nombre de
Frutas.xml, una vez que se a definido el nombre del archivo XML daremos clic en el botón Agregar para
guardarlo.

I.S.C. Martín García Martínez 110

ASP.NET / Bootstrap
Notaremos que en el Explorador de soluciones ya aparece Frutas.xml

He incluso nos va a aparecer un archivo XML vacío

I.S.C. Martín García Martínez 111

ASP.NET / Bootstrap
Que hemos creado nuestro XML posteriormente adicionaremos las siguientes líneas de código, que es el
contenido que vamos a tener, en el cual estamos definiendo las frutas con su respectivo ide cada Ítem y si
respectivo nombre de la fruta, quedando la de siguiente manera.

<?xml version="1.0" encoding="utf-8" ?>

<Frutas>
<Fruta>
<FrutaID>1</FrutaID>
<FrutaNombre>Manzana</FrutaNombre>
</Fruta>

<Fruta>
<FrutaID>3</FrutaID>
<FrutaNombre>Naranja</FrutaNombre>
</Fruta>

<Fruta>
<FrutaID>4</FrutaID>
<FrutaNombre>Sandia</FrutaNombre>
</Fruta>
</Frutas>

I.S.C. Martín García Martínez 112

ASP.NET / Bootstrap
Entonces ya que se tiene el documento de XML, y si nosotros vamos al directorio (C:\Users\iscma\source\
repos\DropDownList_II\DropDownList_II), a la carpeta donde esta el proyecto, pues vamos a ver que ahí está
el archivo Frutas

Este Path que tenemos aquí representa a la ruta física (C:\Users\iscma\source\repos\DropDownList_II\

DropDownList_II), es decir, es la ruta que nos esta indicando adentro del disco donde existe este documento
de frutas Frutas.xml, entonces tenemos una ruta física, tenemos un Path que nos dice físicamente donde se
encuentra el archivo.

Ahora que sucede si en el Explorador de soluciones, seleccionamos con clic derecho Frutas.xml y le damos Ver
en el Explorador.

I.S.C. Martín García Martínez 113

ASP.NET / Bootstrap
Nos damos cuenta que al abrir el archivo Frutas.xml con el Explorador nos aparece la siguiente ruta,
https://localhost:44335/Frutas.xml en la barra de exploración, esta es el Path o ruta Lógica, es decir, es la ruta
que existe desde la perspectiva del servidor, entonces un mismo archivo va atener dos rutas, la ruta física, y la
ruta lógica, porque es importante esta referencia? Porque nosotros tenemos que colocar la ruta
correctamente de los archivos que vamos estar utilizando, si no el código se va a confundir y no se va a
encontrar el archivo.

Para lo cual tenemos un método que nos va a permitir colocar la ruta de forma adecuada, es decir que vamos
a poder indicar la ruta física que tiene el archivo y la va a traducir para que el servidor pueda tomar la ruta
lógica y no tengamos un problema.

Entonces vamos a irnos a WebForm1 y en la parte de diseña adicionaremos un DropDownList y en su ID

colocaremos escribiremos ddlFrutas.

I.S.C. Martín García Martínez 114

ASP.NET / Bootstrap
Una vez que hemos agregado el DropDownList a nuestro WebForm1, y hemos puesto el nombre de ddlFrutas
en su propiedad ID, ahora entraremos al código de nuestro WebForm1, dando clic derecho sobre este.

Y escribiremos las siguientes líneas de código.

//Necesario
using System.Data;

namespace DropDownList_II
{
public partial class WebForm1 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{

if (!IsPostBack)
{
DataSet DS = new DataSet();
DS.ReadXml(Server.MapPath("Frutas.xml"));

ddlFrutas.DataSource = DS;

ddlFrutas.DataValueField = "FrutaID";
ddlFrutas.DataTextField = "FrutaNombre";

ddlFrutas.DataBind();
}

I.S.C. Martín García Martínez 115

ASP.NET / Bootstrap
}
}
}

Al correr el programa nos mostrara satisfactoriamente el resultado como el que a continuación se muestra en
la siguiente hoja.

I.S.C. Martín García Martínez 116

ASP.NET / Bootstrap
Explicación del código: Veamos qué pasa si colocamos directamente el nombre del archivo en la línea 21 es
decir sin el método de Server.MapPath como se muestra en la segunda línea de las siguientes.

DS.ReadXml(Server.MapPath("Frutas.xml"));

DS.ReadXml("Frutas.xml");

Veamos a ver qué pasa.

Vemos que nos marca una Excepción, la Excepción nos está indicando de que no se pudo encontrar el archivo
FileNotFoundException, esto se debe a que el servidor esta tratando de encontrar esa ruta, pero
realmente no puede poque el servidor esta trabajando con esas rutas lógicas, entonces nosotros tenemos que
llevar a cabo el cambio necesario para que pueda funcionar, para eso nosotros vamos a tener un método que
es el método de MapPath, este método de MapPath realmente lo que va hacer es esa traducción entre la ruta
física a la ruta lógica de tal manera que el servidor lo pueda hacer correctamente.

Para este Handler del evento Load, lo primero que hacemos es adicionar el using System.Data, es
necesario adicionar el using System.Data porque vamos hacer uso de la clase DataSet, y DataSet
necesita de System.Data entonces se crea una instancia de DataSet que se llama DS y ahora si DS y
ahora si DS.ReadXml, aquí estamos usando el método que nos permite leer un Xml y colocar esos
contenidos adentro del DataSet, ahora estamos haciendo uso del Server.MapPath para que la ruta física
quede mapeada a una ruta lógica y no se tenga ningún problema al leerlo, ya que se tiene el DataSet se le
indica al DropDownList que su fuente de datos su DataSource va a ser ese DataSet que leyó el Xml,
entonces aquí se esta conectando el DropDownList al DataSet, entonces el DataSet ya contiene la
información, ahora se tiene que indicar de donde se va a obtener el valor y de donde nosotros vamos a
obtener el Texto, recordemos que el DropDownList tiene una colección de elementos y cada uno de estos
elementos tiene entre sus propiedades una propiedad que es Text y una propiedad que es Value,
ddlFrutas.DataValueField = "FrutaID", ddlFrutas.DataTextField = "FrutaNombre", tal y
como se muestra en el código de nuestro archivo Xml.

<Fruta>
<FrutaID>1</FrutaID>
<FrutaNombre>Manzana</FrutaNombre>
I.S.C. Martín García Martínez 117
ASP.NET / Bootstrap
</Fruta>

FrutaID es el que se va estar usando para Value y FrutaNombre es el que vamos a utilizar para Text,
una vez que ya se tiene todo debidamente configurado es decir el código fuente de Handler del Load, bueno
pues hacemos la parte del DataBind, este DataBind representa la parte del enlace, ya con eso ya va a
poder funcionar correctamente y nuestro DropDownList va a rellenar con la información que tiene el archivo
Xml.

Ahora vamos a ver un poco más acerca de las Rutas, cabe hacer menciona que podemos crear carpetas
dentro de nuestro proyecto, esto para tener más organizado nuestro proyecto, la forma de crear una carpeta
es haciendo lo siguiente., seleccionado en el icono damos clic derecho en nuestro proyecto en el Explorador
de soluciones, damos agregar y damos clic en nueva carpeta.

I.S.C. Martín García Martínez 118

ASP.NET / Bootstrap
Ya que demos clic en la opción nueva carpeta le daremos el nombre de CarpetaA. Véase la siguiente imagen.

I.S.C. Martín García Martínez 119

ASP.NET / Bootstrap
Una vez que ya tenemos creada la CarpetaA la seleccionamos con el puntero del ratón y de igual forma dando
clic en el botón derecho del ratón crearemos dentro de CarpetaA una nueva carpeta a la cual le pondremos el
nombre de CarpetaB.

Y adentro de CarpetaB vamos adicionar un WebForm al cual vamos a llamar EnCarpetaB.

I.S.C. Martín García Martínez 120

ASP.NET / Bootstrap
Quedando como a continuación se presenta en la siguiente imagen el Explorador de soluciones.

Ya teniendo nuestro WebForm de nombre EnCarpetaB dentro de la carpeta CarpetaB, ahora vamos a editarlo,
quedando de la siguiente forma, al agregarle el control DropDownList en su propiedad ID le daremos el
nombre de ddlFrutas, y todas sus demás propiedades las dejaremos en Default.

I.S.C. Martín García Martínez 121

ASP.NET / Bootstrap
Ahora vamos al código de este WebForm, y agregaremos la siguiente línea

protected void Page_Load(object sender, EventArgs e)

{
// El Path actual
Response.Write(Server.MapPath(".") + "<BR>");
}

Cuando nosotros estamos utilizando punto, (".") se refiere a la locacion actual, es decir a la ruta actual que
nosotros tenemos, al ejecutar nos va a dar la ruta actual en la cual nos encontramos, recordemos que el
WebForm lo metimos adentro de las carpetas que creamos.

Al ejecutar este código nos va a dar la ruta actual.

Entonces si nosotros estamos utilizando el punto ("."), este nos indica cual es nuestra ruta actual.

Ahora vamos ver que es lo que sucede si ponemos dos puntos (".."), con los dos puntos nos va a indicar, cual
es el padre de esa carpeta en la cual se encuentra el documento.

I.S.C. Martín García Martínez 122

ASP.NET / Bootstrap
// El Path del padre
Response.Write(Server.MapPath("..") + "<BR>");

Vamos a ejecutar nuevamente.

Recordemos que nuestro WebForm se encuentra en Carpeta B, entonces la ruta de su padre es la siguiente:

C:\Users\iscma\source\repos\DropDownList_II\DropDownList_II\CarpetaA

Ahora, como vamos a saber cual es el Path, cual es la ruta cuando tenemos que trabajar con el root o con el
directorio raíz, para eso vamos hacer uso de la tilde ~

// El Path a root o a directorio raiz

Response.Write(Server.MapPath("~") + "<BR>");

I.S.C. Martín García Martínez 123

ASP.NET / Bootstrap
Entonces va a mostrar cual es el directorio raíz de esta aplicación.

Y el directorio raíz de esta aplicación es:

C:\Users\iscma\source\repos\DropDownList_II\DropDownList_II\

Entonces con esto nosotros podemos ayudarnos y navegar adentro de la estructura de directorios para llegar
al documento que realmente nos interesa.

Ahora vamos a aprovechar esto para rellenar el DropDownList con información que se encuentra en
frutas.xml, pero hay que recordar que frutas.xml y el WebForm EnCarpetaB no están en la misma carpeta, es
decir que no están en el mismo directorio.

Entonces adicionaremos el siguiente código.

if (!IsPostBack)

{
DataSet DS = new DataSet();
DS.ReadXml(Server.MapPath("~/Frutas.xml"));

ddlFrutas.DataSource = DS;

ddlFrutas.DataValueField = "FrutaID";
ddlFrutas.DataTextField = "FrutaNombre";

I.S.C. Martín García Martínez 124

ASP.NET / Bootstrap
ddlFrutas.DataBind();
}

Ya que sabemos que frutas.xml se encuentra al nivel de nuestro root, de nuestro directorio raíz.

Nota: en EnCarpetaB no olvidar declarar using System.Data;

I.S.C. Martín García Martínez 125

ASP.NET / Bootstrap
Entonces lo que hacemos es lo siguiente ("~/Frutas.xml") de esta manera estamos dando la locación de
donde esta el archivo que nos interesa.

Esto es importante. entonces porque gracias a esto nosotros podemos especificar correctamente la locación
del recurso que se desea utilizar en nuestra aplicación de asp.

Entonces al ejecutarlo debe de funcionar correctamente.

Tenemos la parte de la impresión de las diferentes rutas y también tenemos nuestro DropDownList cargado
con la información que esta en frutas.xml y desde luego correctamente direccionado el archivo frutas.xml.

MySQL y ASP.NET VS2022

En esta lección vamos a ver cómo podemos trabajar con MySQL y ASP.NET, veremos como instalar los
conectores de MySQL, como adicionar la referencia necesaria en el proyecto, conectar a la base de datos y
rellenar un DropDownList con la información que nosotros tenemos en la base de datos.

Después procederemos a realizar una instalación más, referente a los conectores de MySQL, para esto vamos
a dirigirnos el siguiente sitio web.

https://dev.mysql.com/downloads/installer/

Posteriormente aparecerá una página como la siguiente, en esta pagina vamos a seleccionar el Release que
vamos a estar utilizando, en este caso este que dice 230 mb

I.S.C. Martín García Martínez 126

ASP.NET / Bootstrap
Una vez que damos clic en este reléase esperaremos a que se descargue.

Aparecerá una página como la que a continuación se muestra y daremos clic en la liga No thanks, just start
my download.

I.S.C. Martín García Martínez 127

ASP.NET / Bootstrap
Así se empezará a descargar el archivo

Ya que se tenga el instalador descargado, se va a dar doble clic para empezar a instalarlo.

I.S.C. Martín García Martínez 128

ASP.NET / Bootstrap
Hay que se ha iniciado el instalador daremos clic en el botón Next.

En esta ventana nos percatamos que tenemos seleccionados ya por default los checklist de Conector/ODBC y
Conector/NET, y daremos clic al botón Next.

I.S.C. Martín García Martínez 129

ASP.NET / Bootstrap
Y ya para empezar la instalación daremos clic en el botón Execute.

Posteriormente se dará el proceso de instalación.

I.S.C. Martín García Martínez 130

ASP.NET / Bootstrap
Ya que se ha instalado aparcera una palomita en color verde por lo que indicara que los conectores han sido
instalados satisfactoriamente y daremos clic en el botón Next.

En esta ventana de finalizado daremos clic en el botón Finish.

I.S.C. Martín García Martínez 131

ASP.NET / Bootstrap
Posteriormente nos aparecerá una ventana como la siguiente en la cual solo daremos clic en el botón cerrar,
pues los Conector/ODBC y Conector/NET que nos interesan, ya los hemos instalado.

Una vez que henos instalado los conectores Conector/ODBC y Conector/NET, vamos a nuestro Visual Studio,
en donde crearemos un nuevo proyecto, en este ejemplo le llamaremos DropDownList3

I.S.C. Martín García Martínez 132

ASP.NET / Bootstrap
Ya que estamos en el proyecto ahora adicionaremos una Referencia, para que podamos utilizar la biblioteca
que acabamos de instalar, la biblioteca de conectores de MySQL, para esto nos vamos a situar en las
Referencias de nuestro proyecto y dando clic derecho sobre Referencias seleccionaremos Agregar referencia…

Entonces nos aparecerá una lista de todo aquello que nosotros podemos agregar.

I.S.C. Martín García Martínez 133

ASP.NET / Bootstrap
En la parte derecha del Administrador de referencias, escribiremos MySQL para que nos filtre las extensiones
que corresponden a MySQL

Ya que se han filtrado nuestras extensiones de MySQL seleccionaremos la que dice MySQL.Data y daremos clic
en el botón Aceptar.

I.S.C. Martín García Martínez 134

ASP.NET / Bootstrap
Ahora esa referencia ya se adiciono a nuestro proyecto.

Lo que vamos hacer a continuación como siempre vamos adicionar a nuestro proyecto un WebForm para que
podamos nosotros hacer nuestra prueba ahí, a este WebForm le vamos adicionar un DropDownList para tener
con que poder trabajar.

I.S.C. Martín García Martínez 135

ASP.NET / Bootstrap
Ahora lo que haremos será modificar algo del código del WebForm, entonces, vamos a seleccionar con el
puntero del ratón el WebForm1.aspx que está en el Explorador de soluciones.

Así se verá nuestro código del WebForm1.aspx.

I.S.C. Martín García Martínez 136

ASP.NET / Bootstrap
Y en este bloque de código lo que vamos hacer es adicionar en el Namespace using MySql.Data.MySqlClient;
como lo muestra la siguiente imagen.

Ahora lo que vamos hacer es crear nuestra base de datos para este ejemplo crearemos nuestra base de datos
con el nombre de frutas y con una tabla de nombre comestibles, utilizaremos el gestor de MySQL Workbench,
nuestra tabla solamente constara de 2 campos, id y nombre, de las cuales los registros son PIÑA, MANZANA,
MANGO y PLATANO, nuestra base de datos y tabla tendrá la apariencia como la que se muestra a
continuación.

I.S.C. Martín García Martínez 137

ASP.NET / Bootstrap
Ahora vamos nuevamente a nuestro Visual Studio en donde empezaremos a colocar el código en el
WebForm1.aspx para poder acceder a nuestra base de datos y rellenar el DropDownList que tenemos,
Entonces vamos aprovechar el Handler para adicionar el siguiente código.

protected void Page_Load(object sender, EventArgs e)

{
string cCon = "Server=localhost;UserID=root;Database=frutas;Password=;";
using (var con = new MySqlConnection(cCon))
{
con.Open();
using (var cmd = new MySqlCommand("SELECT * FROM comestibles",
con))
{
using (var reader = cmd.ExecuteReader())
{
DropDownList1.DataSource = reader;
DropDownList1.DataValueField = "id";
DropDownList1.DataTextField = "nombre";
DropDownList1.DataBind();
}
}
}

I.S.C. Martín García Martínez 138

ASP.NET / Bootstrap
Explicación del código: Lo primero que tenemos es la cadena de conexión, esta cadena de conexión es
necesaria para que nosotros podamos indicar y dar las credenciales al servidor que contiene la base de datos a
la cual nosotros nos queremos conectar, ya que tenemos nuestra cadena de conexión, entonces vamos a crear
la conexión, hacemos uso del using y luego vamos hacer uso de var para referenciar con, donde con es = a
new de MySqlConnection y pasamos como parámetro nuestra cadena de conexión (cCon)), si algo mal
sucede en nuestra cadena de conexión, esta línea de código using (var con = new
MySqlConnection(cCon)) hará que recibamos una excepción, después vamos abrir nuestra conexión con
con.Open(), con esto ya tenemos nuestra conexión abierta, ahora vamos a llevar acabo el comando
SELECT con select seleccionamos todo de la tabla comestibles aprovechando la conexión con, ("SELECT *
FROM comestibles", con) esta línea de código nos va a regresar la referencia a nuestro comando que es
cmd, ya que tenemos nuestro comando correctamente creado, ahora vamos a llevar a cabo la creación del
reader, para que ya como tal se lleva a cabo la ejecución del comando a nuestra base de datos y a través del
reader nosotros podamos tener acceso a la información que nos está regresando el comando, para nuestro
DropDownList indicamos cuál es su fuente de datos, entonces su fuente de datos va a ser Source =
reader, luego el DropDownList tiene básicamente 2 campos que es el de valor y el de texto, entonces de
esa tabla que nosotros estamos leyendo, cual de esos campos va a ser el que se quiere colocar el valor y cual
va aquedar guardado en el texto, en este caso en value va a quedar el campo id y en Text va a quedar el
campo nombre, luego de esto nuestro DropDownList va a quedar relleno con la información de nuestra tabla
comestibles que se encuentra en la base de datos frutas.

Al ejecutarse este programa vemos como se visualiza en DropDownList la información de nuestra base de
datos

I.S.C. Martín García Martínez 139

ASP.NET / Bootstrap
ListBox VS2022
En esta lección vamos a ver el uso del ListBox, también vamos a ver como adicionarle elementos por código,
llevar a cabo una selección sencilla y una selección múltiple, ListBox no es más que una pequeña caja en la cual
vamos a tener una lista de diferentes elementos, estos elementos pueden ser seleccionados y desde luego,
vamos a poder seleccionar uno o varios elementos a la vez, quizás se encuentre alguna similitud con el
DropDownList.

Para este ejercicio vamos a crear un proyecto con el nombre de ListBox y su respectivo WebForm1.

I.S.C. Martín García Martínez 140

ASP.NET / Bootstrap
En este WebForm vamos a crear nuestra interfaz para esta aplicación, el cual va a quedar de la siguiente
forma, se va agregar un ListBox y también se va agregar un Button con las siguientes propiedades.

ID: BtnSeleccionar
SelectionMode: Single

ID: LBFrutas
SelectionMode: Single

Una vez que ya tenemos la interfaz de usuario ahora vamos a rellenar el ListBox, hay diferentes formas por
medio de las cuales nosotros podemos rellenar el ListBox, la forma de rellenar un ListBox es prácticamente
igual a como se llena un DropDownList, escribiremos el siguiente código para agregar elementos al ListBox.

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

I.S.C. Martín García Martínez 141

ASP.NET / Bootstrap
</div>
</form>

Hasta aquí, si nos vamos a la parte de diseño ya nos deben aparecer estos elementos (Banana, Pera, Mango).

Si corremos este programa nos aparecerá de la siguiente forma

I.S.C. Martín García Martínez 142

ASP.NET / Bootstrap
Y nos percataremos que la selecciona es sencilla es decir solo podemos seleccionar un solo elemento al mismo
tiempo porque en SelectionMode lo tenemos en la propiedad Single.

Ahora en el código del WebForm1.aspx programaremos el botón, de tal manera que cuando demos clic a
seleccionar obtengamos la información del elemento que este seleccionado, el botón lo vamos a programar
dando doble clic sobre este en la vista de diseño.

Ya que hemos dado doble clic sobre el botón Seleccionar, nos abrirá su Handler, en el cual vamos a escribir el
siguiente código.

Explicación del código: Primero veremos el código de la selecciona sencilla, que es lo primero que nosotros
tenemos que hacer, es verificar que se tenga seleccionado un elemento, ya que si nosotros le damos clic al
botón seleccionar y no hay un elemento seleccionado , al momento del cual tratamos de adquirir las
propiedades del elemento, bueno pues vamos a tener ahí una excepción, porque vamos a tratar de trabajar
con un objeto que no ha sido referenciado, entonces vamos a tener ahí una excepción, que finalizara nuestro
programa de manera abrupta, Entonces lo primero que tenemos que hacer es verificar que se tenga el
elemento seleccionado, entonces lo hacemos de la siguiente manera, hacemos un if y tenemos que decir la
propiedad SelectedItem del LBFrutas que es nuestro ListBox no es igual a null, eso significa que si tengo
cuando menos un elemento seleccionado, SelectedItem va a tener el valor de null si no hay elementos
I.S.C. Martín García Martínez 143
ASP.NET / Bootstrap
seleccionados, si tiene algún elemento ya seleccionado , bueno el valor va a ser diferente de null, después se
crean tres variables, indice para guardar el indice del elemento seleccionado, elemento para guardar el
valor que tiene en la propiedad de texto ese elemento seleccionado, y valor para guardar lo que tiene la
propiedad de Value ese elemento seleccionado, índices de tipo int pero elementos y valor son de tipo
string, ¿cómo obtenemos el índice? Bueno el indice es muy fácil simplemente en el ListBox que nosotros
tenemos punto SelectedIndex, de esta manera obtenemos el índice del elemento, recordemos que el
indice está basado en cero, luego para obtener como tal el texto que hemos colocado, pues del ListBox el
elemento seleccionado y del elemento seleccionado su propiedad de Text, para obtener el valor es algo muy
similar, el ListBox que tenemos de ahí el elemento seleccionado y del elemento seleccionado la propiedad
de Value.

Luego se hace Response.Write para mostrar estos valores que hemos obtenido, entonces tenemos
Response.Write, luego se hace una concatenación y se pone seleccionaste y luego el contenido de la
variable elemento, y luego se concatena con que tiene el valor el contenido de la variable valor, se concatena
con el indice y el contenido de la variable indice, de tal manera que se tiene los datos más importantes de ese
elemento que es como tal el texto que se tiene, el valor asociado a ese elemento y el indice que esta utilizando
o que está ocupando adentro del ListBox.

protected void btnSeleccionar_Click(object sender, EventArgs e)

{
//Selección sencilla
// Verificamos que se tenga seleccionado un elemento
if (LBFrutas.SelectedItem != null)
{
int indice = LBFrutas.SelectedIndex;
string elemento = LBFrutas.SelectedItem.Text;
string valor = LBFrutas.SelectedItem.Value;

Response.Write("Seleccionaste " + elemento + " que tiene el valor " + valor + " en el indice
" + indice);
}
}

I.S.C. Martín García Martínez 144

ASP.NET / Bootstrap
Luego ya que tenemos esto vamos a ejecutar nuestra aplicación, donde después de seleccionar cualquiera de
los elementos y al dar clic en el botón seleccionar nos aparecerá en nombre del elemento, el valor y el indice.

Ahora vamos hacer la parte del código para selecciones múltiples, lo primero que haremos será mediane vista
de Diseño, seleccionar el ListBox, y en la propiedad SelectionMode elegir la opción Multiple.

I.S.C. Martín García Martínez 145

ASP.NET / Bootstrap
Pero el código con el cual nosotros vamos a reconocer una selección y Multiple selecciones es un poco
diferente, por lo que escribiremos el siguiente código para la selección Multiple.

protected void btnSeleccionar_Click(object sender, EventArgs e)

{
//Selección Multiple
// Recorremos la lista de elementos
foreach(ListItem fruta in LBFrutas.Items)
{
//Verificamos si el elemento esta seleccionado
if (fruta.Selected)
{
int indice =LBFrutas.Items.IndexOf(fruta);
string elemento = fruta.Text;
string valor = fruta.Value;

Response.Write("Seleccionaste " + elemento + " que tiene el valor " + valor + " en el
indice " + indice);
Response.Write("<br>");
}
}

I.S.C. Martín García Martínez 146

ASP.NET / Bootstrap
Explicación del código: Lo que haremos será un recorrido de todos los elementos que se encuentran adentro
del ListBox de frutas, y luego le vamos a preguntar a cada uno de los elemento si fueron seleccionado o no
fueron seleccionados, y si ese elemento fue seleccionado, se procederá a extraer la información y a mostrarla,
hacemos nuestro foreach, el foreach es foreach ListItem fruta in, en fruta en su colección de ítems,
entonces es un foreach de ListItem que le vamos a llamar a cada uno de esos elementos que vamos
procesando en esa vuelta del foreach fruta y luego adentro de la colección ítems del ListBox de frutas, luego
le preguntamos a esa fruta en particular ese elemento que tenemos en ese momento para procesar, si fue
seleccionado o no, entonces eso lo hacemos por medio de un if, if fruta.Selected, eso nos regresaría un
True si fue seleccionado o un False si no lo fue, digamos que fue seleccionado, entonces se extrae la
información aquí el índice se extrae de manera un poco diferente a como se hizo en el ejemplo de selección
sencilla, se haría de la siguiente forma, se va a utilizar el método IndexOf, IndexOf nos va a regresar el
numero de indice de un elemento adentro de la colección, entonces se necesitara indicar cual es el elemento
que nos interesa conocer su numero de indice, y el elemento es el elemento fruta, el elemento que se esta
procesando en esa vuelta del foreach, ahora IndexOf, va a depender de la colección ítems que esta dentro
del LBFrutas, por eso el indice será igual a LBFrutas adentro de su colección ítems se busca en el indice del
elemento fruta que se tiene en ese momento, la parte de obtener como tal el texto y el valor es muy sencilla
es practicante igual que el ejemplo de arriba en donde será elemento = fruta.Text y valor =
fruta.Value, ya que se tiene entonces el indice el elemento y el valor, entonces se procede a escribirse de
una manera que es prácticamente lo mismo que se tiene en el ejemplo del ListBox sencillo, se hace un Write
en el cual se tiene lo que se seleccionó más el contenido del elemento mas el valor del índice mas el valor del
indice y como aquí se pueden tener múltiples elementos, cada una de estas impresiones aparecerán en una
línea aparte, si no nos parecería todo de corrido, por eso es importante colocar el
Response.Write("<br>");

A continuación, se ejecutará el programa en el cual se podrán seleccionar múltiples ítems mediante el puntero
del ratón y teniendo presionado la tecla ctrl, para por último dar clic en el botón de seleccionar y aparecerá
nuestra el siguiente resultado.

I.S.C. Martín García Martínez 147

ASP.NET / Bootstrap
RadioButtonList

En esta lección veremos cómo utilizar el RadioButtonList, llevaremos a cabo la edición de elemento por código,
veremos como podemos seleccionar y obtener la información del elemento seleccionado, limpiar la selección y
también diferentes formas en las cuales podremos mostrar.

Para este ejercicio vamos a crear un proyecto con el nombre de RadioButtonList y su respectivo WebForm1.
I.S.C. Martín García Martínez 148
ASP.NET / Bootstrap
Con el control RadioButtonList vamos a tener una lista y esta lista va estar compuesta por elementos de tipo
RadioButton, recordemos que cuando se tiene el RadioButton solamente podemos seleccionar uno de los
elementos que tenemos, pero a diferencia del RadioButton normal que hemos utilizado, pues el
RadioButtonList va a tener la característica de que todos sus elementos forman parte de una lista, es decir
que adentro del control realmente tenemos una colección conformada por los diferentes RadioButton y al
tener una colección conformada por los diferentes RadioButton pues se va atener la ventaja de realizar
operaciones sobre esa colección, como que? Bueno como poder adicionar o eliminar RadioButton según
nosotros lo vayamos necesitando, eso es algo bastante útil, ahora bien para que nosotros podamos rellenar un
RadioButtonList pues se podrá hacer de diferentes formas, se va a poder hacer directamente en el código, que
es como se va hacer en esta lección o también se podrá hacer leyendo un archivo xml o incluso bajando
información de una tabla en una base de datos, en ese caso el código va a ser prácticamente el mismo, va a ser
código muy similar a lo que ya se hizo en las lecciones anteriores donde se vio la parte de MYSQL con ASP y
también la parte de leer un archivo xml desde ASP, entonces la forma de rellenar un RadioButtonList es muy
similar a como ya se ha visto en paginas anteriores.

Ahora lo primero que haremos será diseñar una interfaz como la siguiente

ID: rblFrutas ID: btnSeleccionar

Text: Seleccionar

ID: rblColores

I.S.C. Martín García Martínez 149

ASP.NET / Bootstrap
ID: btnSeleccionarLimpiar
SelectionMode: Seleccionar y limpiar

Ya que se tiene definida la interfaz, ahora nos vamos a ir al código para rellenar los RadioButtonList
directamente desde código, esto lo haremos seleccionando la pestaña inferior de Código.

<asp:RadioButtonList ID="rblFrutas" runat="server"> Tab de apertura

</asp:RadioButtonList> tab de cierre

Una vez que hemos identificado nuestros Tab de apertura y de cierre de RadioButtonList escribiremos las
siguientes líneas de código, estas líneas representan la lista de opciones del RadioButtonList. (Nota aún no se
van a programar los botones)

I.S.C. Martín García Martínez 150

ASP.NET / Bootstrap
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="WebForm1.aspx.vb"
Inherits="RadioButtonList.WebForm1" %>

<!DOCTYPE html>

I.S.C. Martín García Martínez 151

ASP.NET / Bootstrap
Ya que hemos añadido el código ahora nos vamos a regresar a Diseño, y ya debe de lucir tal y como se ve en la
siguiente imagen.

Ahora vamos a empezar a colocar algo de código con relación a los botones, para esto vamos a ir al botón
Seleccionar haciendo doble click en este.

I.S.C. Martín García Martínez 152

ASP.NET / Bootstrap
Y nos va a crear el handler correspondiente, como lo que se ve a continuación.

A este handler le vamos a añadir el siguiente código.

protected void Button1_Click(object sender, EventArgs e)

{

// VERIFICAMOS QUE ESTE ALGO SELECCIONADO

if (rblFrutas.SelectedItem != null)

I.S.C. Martín García Martínez 153

ASP.NET / Bootstrap
{

//OBTENEMOS LOS DATOS

string texto = rblFrutas.SelectedItem.Text;
string valor = rblFrutas.SelectedItem.Value;
int indice = rblFrutas.SelectedIndex;

//MOSTRAMOS
Response.Write(texto + ", " + valor + ", " + indice + "<br>");
}

Cada uno de los datos que se han escrito en el handler, determinara el nombre de la opción seleccionada, el
valor de la selección y el número de índice en la selección, la línea Response, nos mostrara cada una de las
propiedades y valores de cada valor, en lugar del Reponse, y dependiendo de cada valor también podremos
poner condicionales u otro tipo de información que dependiendo al resultado realice determinada acción.

Al correr y ejecutar el botón veremos el siguiente resultado, Manzana es el Texto, el uno es el valor, es decir
que es el primer elemento de la lista, y el cero, se refiere al índice, este inicia a partir de cero.

I.S.C. Martín García Martínez 154

ASP.NET / Bootstrap
Después de esto, ahora vamos hacer el código para Seleccionar y limpiar, nos vamos a ir a nuestro diseño y al
botón que dice Seleccionar y limpiar vamos a darle doble click.

Una vez que ya entramos al handler del botón Seleccionar y limpiar, vamos el siguiente código quedando de la
siguiente forma.

protected void btnSeleccionarLimpiar_Click(object sender, EventArgs e)

{
if (rblColores.SelectedItem != null)

I.S.C. Martín García Martínez 155

ASP.NET / Bootstrap
{

string texto = rblColores.SelectedItem.Text;

string valor = rblColores.SelectedItem.Value;
int indice = rblColores.SelectedIndex;

Response.Write(texto + ", " + valor + ", " + indice + "<br>");

//Limpiamos la seleccion
rblColores.SelectedIndex = -1;
}

Este bloque de handler es muy similar al anterior, lo que cambia un poco es que esta cuenta al final con la
siguiente línea de código, rblColores.SelectedIndex = -1; esta línea de código hace que al darle click el botón
Seleccionar y limpiar, limpie el RadioButton seleccionado.

I.S.C. Martín García Martínez 156

ASP.NET / Bootstrap
BulletedList
En esta lección vemos como trabajar con BulletedList, los diferentes tipos de desplegado y como usarla para
ligas y como detectar a que elemento se le da click.

Lo primeo que haremos es crear un nuevo proyecto, con su WebForm1.

I.S.C. Martín García Martínez 157

ASP.NET / Bootstrap
Una vez que ya lo tengamos, nos vamos a Diseño de nuestro proyecto y después con el puntero del mouse
vamos a arrastrar el BulletedList hacia el área de diseño.

La forma de añadir elementos al BulletedList es muy similar a como ya lo hemos visto en los controles
anteriores, esto se puede hacer directamente a través de código, leyendo un archivo de XML, o también
leyendo una tabla de una base de datos, Podemos hacerlo directamente e código(como se hizo con el control
RadioButtonList), simplemente adicionando el ListItem, para cada uno de los elementos que nosotros
queremos que contenga ese BulletedList, sin embargo también podemos hacerlos Vía Editar elementos, como
se muestra en la siguiente imagen.

I.S.C. Martín García Martínez 158

ASP.NET / Bootstrap
En donde vamos ir Agregando y editando en las propiedades, el nombre de la fruta y el valor. Una vez que ta
tenemos nuestra lista le damos click en el botón aceptar.

I.S.C. Martín García Martínez 159

ASP.NET / Bootstrap
Y si vemos nuestro código, vemos que también ya nos los adiciono ahí, tanto editándolo directamente en el
código, o como lo acabamos de hacer, des las dos formas esta correcta.

Entre unas de las propiedades que tiene el control BulletedList, es la propiedad esta la propiedad BulletStyle,
la cual nos puede numerar, poner en orden alfabético, círculos, cuadrados e incluso imágenes, a un lado del
elemento de lista.

I.S.C. Martín García Martínez 160

ASP.NET / Bootstrap
Otra de las propiedades que sobresale es que podemos darle numeración u orden a partir de determinada
posición, es decir, que inicie a partir de determinada numeración, esto se hará con la propiedad
FirstBulletNumber, para este ejemplo le escribiremos el número 5

I.S.C. Martín García Martínez 161

ASP.NET / Bootstrap
Y vemos aquí como nos empieza a numerar a partir del número 5

Ahora tomaremos otro control BulletedList y lo arrastraremos debajo de este que ya tenemos,

I.S.C. Martín García Martínez 162

ASP.NET / Bootstrap
De igual forma vamos a agregar los elementos a este BulletedList, mediante el editor de elementos.

Aquí los elementos van a consistir en nombres de páginas web, y como valor, vamos a escribir la dirección web
de cada una de estas.

I.S.C. Martín García Martínez 163

ASP.NET / Bootstrap
Posteriormente damos click en el botón Aceptar, y en la propiedad DisplayMode vamos a seleccionar la
opción HyperLink.

Y así lo veremos como se muestra en la siguiente imagen, y ahora cada uno de los elementos van a funcionar
como si fueran ligas a la dirección web que se le indico previamente.

I.S.C. Martín García Martínez 164

ASP.NET / Bootstrap
Por último, vamos a agregar otro BulletedList, a este solo le agregaremos dos elementos con los textos Azul y
Rojo, y en sus Valores 1 y 2 respectivamente.

Una vez que hayamos agregado los miembros a la lista(Azul y Rojo), daremos click en el botón Aceptar.

I.S.C. Martín García Martínez 165

ASP.NET / Bootstrap
Y en la propiedad DisplayMode seleccionaremos la opción LinkButton.

Ahora lo que vamos hacer es irnos a nuestro BulletedList3, después a sus propiedades y a los Eventos (Icono
del rayo) y ahí daremos click en la propiedad del Evento doble Click, esto para entrar a su handler.

I.S.C. Martín García Martínez 166

ASP.NET / Bootstrap
Una vez que ya hemos entrado el handler correspondiente al BulletedList3.

Le añadiremos el siguiente código.

protected void BulletedList3_Click(object sender, BulletedListEventArgs e)

{
//OBTENEMOS LOS ELEMENTOS AL QUE SE LE DIO CLICK
ListItem elemento = BulletedList3.Items[e.Index];

string texto = elemento.Text;

I.S.C. Martín García Martínez 167
ASP.NET / Bootstrap
string valor = elemento.Value;
int indice = e.Index;

Response.Write("Texto: " + texto + ", valor: " + valor + ", indice: " + indice);
}

Esta letra e nos va a

guardar el valor del índice.

En esta línea se obtiene el

Aquí la e con su evento elemento que se le dio click
indice.

Por último vamos a correr nuestro programa, y vemos como al darle click a Rojo nos envía el texto, Rojo, el
valor 2 y el índice 1.

I.S.C. Martín García Martínez 168

ASP.NET / Bootstrap
FileUpload
En esta lección veremos cómo subir un archivo al servidor haciendo uso del control FileUpload, para este
ejercicio vamos a crear un nuevo proyecto vacío con su respectivo WebForm1.

I.S.C. Martín García Martínez 169

ASP.NET / Bootstrap
Vamos a iniciar creando una nueva carpeta dentro de nuestro dentro de nuestro Explorador de soluciones, ya
que en esa carpeta vamos a almacenar nuestros archivos que vamos a subir al servidor, para esto vamos a dar
click derecho sobre el Proyecto FileUpload, vamos irnos a la opción Agregar, y posteriormente a Nueva
carpeta.

En este ejemplo nosotros le vamos a nombrar a la carpeta ArchivosSubidos.

I.S.C. Martín García Martínez 170

ASP.NET / Bootstrap
Una de las formas de abrir esa carpeta que hemos creado va a ser seleccionándola y dando click derecho del
mouse, dando click en la opción Abrir carpeta en el Explorador de archivos.

I.S.C. Martín García Martínez 171

ASP.NET / Bootstrap
Ahora nos vamos a ir nuevamente al Diseño de nuestro proyecto y vamos a ubicar nuestra herramienta
FileUpload, con el puntero del mouse la vamos a arrastrar hacia nuestra área de diseño, como se ve en la
siguiente imagen.

Enseguida de igual forma vamos a agregar el objeto Button, este botón va a ser el que nos ayudara a subir al
servidor el archivo que previamente se haya seleccionado con el botón Examinar, a este botón en su
propiedad ID le pondremos btnSubir y en la propiedad Text llevara el nombre de Subir.

I.S.C. Martín García Martínez 172

ASP.NET / Bootstrap
Ahora vamos a colocar el código necesario dentro del handler de botón Subir, para esto daremos doble click
sobre el botón Subir, para acceder a su handler.

I.S.C. Martín García Martínez 173

ASP.NET / Bootstrap
Y escribiremos las siguientes líneas a de código.

protected void btnSubir_Click(object sender, EventArgs e)

{
//PRIMERO VERIFICAMOS QUE SE HAYA SELECCIONADO EL ARCHIVO
if (FileUpload1.HasFile)
{
//OBTENEMOS LA EXTENSION Y EL TAMAÑO PARA DELIMITAR SI ES
NECESARIO
string ext = System.IO.Path.GetExtension(FileUpload1.FileName);
ext = ext.ToLower(); //PARA QUE LA EXTENSION LA MANDE

//"OJO" EL TAMAÑO ESTA EN BYTES

int tam = FileUpload1.PostedFile.ContentLength;

Response.Write(ext + ", " + tam);

//(aqui se puede delimitar en cuanto a tamaño y extension)PODEMOS

//LLEVAR A CABO VERIFICACION DE EXTENSION Y TAMAÑO
if (ext == ".png" && tam <= 1048576)
{
FileUpload1.SaveAs(Server.MapPath("~/ArchivosSubidos/" +
FileUpload1.FileName));

//TAMBIEN PUEDE SER COMO ESTA LINEA DE CODIGO SIGUIENTE

//FileUpload1.SaveAs(Server.MapPath("~/ArchivosSubidos/" +
"NombreDelArchivo" + ".png"));

Response.Write("Se subio el archivo");

else
I.S.C. Martín García Martínez 174
ASP.NET / Bootstrap
{
Response.Write("Seleccione un archivo a subir");
}
}

Y al correr nuestro programa vemos que nos queda de la siguiente forma.

I.S.C. Martín García Martínez 175

ASP.NET / Bootstrap
Los archivos se van ir guardando en la carpeta ArchivosSubidos.

Calendar
En esta lección trabajaremos con los elementos más importantes del control Calendar, veremos cómo saber la
fecha o fechas seleccionadas, ocultarlo y mostrarlo.

I.S.C. Martín García Martínez 176

ASP.NET / Bootstrap
El control Calendar es un control ampliamente configurable por lo que se pueden hacer varias cosas con este,
se recomienda verificar toda su documentación, en relación con lo que se puede hacer con cada una de la
fecha y la forma en cómo se pueden desplegar.

Iniciaremos creando nuestro proyecto vacío, mismo que le vamos a agregar su respectivo WebForm1.

Ahora vamos arrastrar al diseño de nuestro proyecto un botón, el control calendario y una caja de texto.

En el ID de las propiedades del botón vamos a poner btnCalendario, y en su propiedad Text Calendario.

I.S.C. Martín García Martínez 177

ASP.NET / Bootstrap
Al calendario solo le daremos un cambio de aspecto, seleccionándolo y dando click al botón derecho del
mouse, después dar click en la opción Formato automático….

Después se abrirá una ventana como la siguiente de autoformato, en donde al gusto seleccionaremos
cualquier esquema.

I.S.C. Martín García Martínez 178

ASP.NET / Bootstrap
Una vez seleccionado nuestro esquema, vamos hacer click en el botón Aceptar.

I.S.C. Martín García Martínez 179

ASP.NET / Bootstrap
Y al TextBox solo le colocaremos en la propiedad ID el nombre de txtFecha, este campo nos va a servir para
mostrar ahí nuestra fecha seleccionada, Ya que tenemos el diseño de nuestra interfaz, ahora vamos a empezar
a codificar.

Empezaremos dando doble click al Botón Calendario para entrar a su handler.

I.S.C. Martín García Martínez 180

ASP.NET / Bootstrap
protected void Page_Load(object sender, EventArgs e)
{
//VERIFICAMOS SI ES LA PRIMERA VEZ QUE SE MUESTRA
if (!IsPostBack)
Calendar1.Visible = false;
}

protected void btnCalendario_Click(object sender, EventArgs e)

{
//MOSTRAMOS U OCULTAMOS EL CALENDARIO
Calendar1.Visible = !Calendar1.Visible;
}

Al ejecutar nuestro programa por primera vez, nuestro control Calendar, no aparecerá visible por estar en
estado False.

El botón calendario funcionara como switch de visible y no visible

I.S.C. Martín García Martínez 181

ASP.NET / Bootstrap
I.S.C. Martín García Martínez 182
ASP.NET / Bootstrap
Ahora lo que vamos hacer, es que cuando el usuario seleccione alguna de las fechas, nosotros podamos
obtener esa fecha, para poder hacer algo útil con esa información, lo que vamos hacer en este ejemplo es
mostrarlo en el TextBox.

Esto lo haremos mediante un Evento que existe en nuestro control Calendar, entonces seleccionaremos el
control Calendar y una vez seleccionado nos vamos a nuestra lista de eventos, en la lista seleccionaremos la
propiedad SelectionChanged y vamos a dar doble click en este campo para que nos mande a su handler.

Que es este handler Calendar1_SelectionChanged

I.S.C. Martín García Martínez 183

ASP.NET / Bootstrap
Una vez que ya estamos en el handler del Calendar, escribiremos el siguiente código.

protected void Calendar1_SelectionChanged(object sender, EventArgs e)

{
//PARA UNA FECHA
//MOSTRAMOS EN EL TEXTBOX LA FECHA, NOTAR QUE HAY DIFERENTES ESTILOS
txtFecha.Text = Calendar1.SelectedDate.ToString();
}

Una vez que ya hemos escrito el código ejecutamos el programa y al seleccionar cualquier día del calendario
este nos mostrara el día de la semana en forma de string (cadena) dentro de nuestro TextBox.

I.S.C. Martín García Martínez 184

ASP.NET / Bootstrap
Obviamente el control Calendar, cuanta con varios formatos de fecha entre sus Eventos, Fecha corta, fecha,
larga, fecha sin hora, entre otros.

Ejemplo para que muestre la pura fecha, si la hora.

txtFecha.Text = Calendar1.SelectedDate.ToShortDateString();

I.S.C. Martín García Martínez 185

ASP.NET / Bootstrap
El control Calendar, además de permitirnos seleccionar una fecha, también podremos seleccionar toda una
semana.

Para esto vamos a seleccionar nuestro control Calendar, y de ahi nos vamos a ir a su lista de propiedades y en
SelectionMode vamos a seleccionar la opción DayWeek.

Notaremos que, al momento de establecer la propiedad, DayWeek la apariencia del calendario cambiara un
poco con una especie de picos del lado izquierdo, los cuales nos van ayudar a llevar a cabo toda la selección de
una semana completa.

I.S.C. Martín García Martínez 186

ASP.NET / Bootstrap
Ahora nos vamos a ir nuevamente al handler del Calendar y vamos a escribir el siguiente código.

protected void Calendar1_SelectionChanged(object sender, EventArgs e)

{
//PARA MULTIPLES FECHAS

foreach (DateTime d in Calendar1.SelectedDates)

{
Response.Write(d.ToShortDateString() + "</br>");
}
}

Y al ejecutar nuestro programa y dar click en alguno de los bloques de la semana de las flechas de la izquierda
nos mostrara el siguiente resultado, en donde al inicio de la página nos visualizara las múltiples fechas.

I.S.C. Martín García Martínez 187

ASP.NET / Bootstrap
Ahora veremos como modificar un poco la celda, la celda se refiere a cada día del calendario, para poder
trabajar con las celdas, vamos a seleccionar nuestro control Calendar y después vamos a modificar la
propiedad DayRender dando doble click en su evento para poder acceder a su handler

I.S.C. Martín García Martínez 188

ASP.NET / Bootstrap
Posteriormente escribiremos las siguientes líneas de código al handler de DayRender

protected void Calendar1_DayRender(object sender, DayRenderEventArgs e)

{
if (e.Day.IsToday)
e.Cell.Text = "Hoy";
}

Al ejecutar nuestro programa, nos damos cuenta que el día actual lo ha personalizado con la palabra “Hoy”

I.S.C. Martín García Martínez 189

ASP.NET / Bootstrap
También con el control Calendar, podemos hacer que las fechas que se encuentran en otro mes no puedan ser
seleccionadas, o los fines de semana y otras opciones más, recordemos que este control tiene una alta gama
de configuración.

Para hacer que no se puedan seleccionar los fines de semana se añadira el siguiente codigo.

protected void Calendar1_DayRender(object sender, DayRenderEventArgs e)

{
if (e.Day.IsToday)
e.Cell.Text = "Hoy";

if (e.Day.IsWeekend)
{
e.Day.IsSelectable = false;
}
}

A continuación, vamos a correr el programa para ver el resultado.

I.S.C. Martín García Martínez 190

ASP.NET / Bootstrap
Como lo establecimos en el código los fines de semana serán inmunes a ser seleccionados.

I.S.C. Martín García Martínez 191

ASP.NET / Bootstrap
AdRotator
Ahora vemos el funcionamiento del control AdRotator, el cual nos permite colocar anuncios en nuestras
aplicaciones ASP .NET., Este control nos va a permitir mostrar imágenes publicitarias que generalmente se
conocen como banners, estas imágenes que al darles click nos llevan a algún sitio, AdRotator va a necesitar un
archivo xml en el cual se va a colocar la información acerca de estos anuncios, vamos a necesitar también las
imágenes que corresponden a los anuncios que vamos a colocar.

Lo primero que haremos será crear un nuevo proyecto vacío, al cual se le va añadir su WebForm1.

Enseguida vamos a crear un archivo xml este archivo va a contener información acerca de los Ads, para crear
el xml nos vamos a ir a situar encima del proyecto AdRotator que está dentro del Explorador de soluciones, y
con el botón derecho del mouse seleccionaremos del menú la opción Agregar y enseguida Nuevo elemento…

I.S.C. Martín García Martínez 192

ASP.NET / Bootstrap
Enseguida se nos abrirá una ventana como la siguiente, en la cual vamos a seleccionar en el esquema de árbol,
la opción Datos y enseguida en el visualizador de objetos Archivo XML, al cual le vamos a dar como nombre
Anuncios.

Después de haber creado nuestro Archivo XML vamos a dar click al botón Agregar, y se nos estará viendo de la
siguiente forma.

I.S.C. Martín García Martínez 193

ASP.NET / Bootstrap
Enseguida le añadiremos el siguiente código

<?xml version="1.0" encoding="utf-8" ?>

<Advertisements>
<Ad>
<ImageUrl>~/Imagenes/uno.png</ImageUrl>
<NavigateUrl>https://es.wikipedia.org/</NavigateUrl>
<AlternateText>Visita wikipedia</AlternateText>
<Impressions>10</Impressions>
<keyword>aprender</keyword>
</Ad>
<Ad>
<ImageUrl>~/Imagenes/dos.png</ImageUrl>
<NavigateUrl>https://www.youtube.com/</NavigateUrl>
<AlternateText>Visita wikipedia</AlternateText>
<Impressions>10</Impressions>
<keyword>aprender</keyword>
</Ad>
<Ad>
<ImageUrl>~/Imagenes/tres.png</ImageUrl>
<NavigateUrl>https://es-la.facebook.com/</NavigateUrl>
<AlternateText>Visita wikipedia</AlternateText>
<Impressions>10</Impressions>
<keyword>socializar</keyword>
</Ad>

</Advertisements>

Impressions Entre mayor

sea el valor de las
impresiones, será mayor la
posibilidad que aparezca la
imagen, en este ejemplo las
tres tienen la misma
posibilidad de aparecer 10.

Keyword Nos va a servir

para que nosotros filtremos
el anuncio que deseemos, es
decir si solo deseo que
aparezcan los anuncios de
aprender, solo se mostraran
I.S.C. Martín García Martínez esos. 194
ASP.NET / Bootstrap
Después de haber codificado, crearemos una carpeta en el Explorador de soluciones.

A la carpeta creada la vamos a llamar Imágenes, en esta carpeta será donde almacenaremos las imágenes que
deseamos visualizar mediante AdRotator.

I.S.C. Martín García Martínez 195

ASP.NET / Bootstrap
Ahora vamos a agregar nuestras imágenes a la carpeta recién creada, cada una de estas imágenes debe
coincidir con el nombre que se especificó en el código.

Ya casi para terminar ahora nos vamos a ir a nuestro Diseño de nuestro WebForm y del cuadro de
herramientas vamos arrastrar el control AdRotator.

I.S.C. Martín García Martínez 196

ASP.NET / Bootstrap
Después, con este control seleccionado, nos vamos a ir a sus propiedades, y en la propiedad
AdvertisementFile.

Y daremos click en el botón de los tres puntos, ahí nos aparecerá el archivo XML que recientemente creamos,
lo seleccionamos y damos click en el botón Aceptar.

I.S.C. Martín García Martínez 197

ASP.NET / Bootstrap
Ahora vamos a ejecutar nuestro programa, vamos a ver que cada que le demos actualizar a la página nos va ir
cambiando cada una de las imágenes.

Y como se mencionó en líneas anteriores, podemos filtrar los banners que deseamos es decir esto mediante
según la palabra que contenga el keyword. En este ejemplo dos banners tienen el keyword aprender y
uno tiene el keyword socializar.

<keyword>aprender</keyword>

El filtro lo vamos hacer mediante la propiedad KeywordFilter.

I.S.C. Martín García Martínez 198

ASP.NET / Bootstrap
Nota: Al ejecutar la página deberemos estar en la pantalla de WebForm, y todas las etiquetas siempre
empezaran con Mayúsculas.
<ImageUrl>
<NavigateUrl>
<AlternateText>
<keyword>

I.S.C. Martín García Martínez 199

ASP.NET / Bootstrap
HiddenField

Ahora veremos un control que puede guardar un valor entre llamadas al servidor.

Este control es bastante útil porque nos va a permitir colocar en su interior un valor, este
valor no va a ser desplegado adentro de del form como tal, no lo vamos a ver nosotros, sin
embargo, el valor va a poder ser guardado ahí.

Cuando nosotros tenemos el HiddenFiel, el valor que tiene en su interior se conserva entre
los diferentes PostBack que nosotros podamos tener, y eso es algo que es bastante útil para
nosotros.

Una de las aplicaciones principales de este control, es cuando estamos trabajando a una
conexión a base de datos y por ejemplo nosotros obtenemos algo importante que vamos
estar utilizando entre múltiples llamadas, digamos podría ser en la llave principal de algún
elemento que nos interesa en esa base de datos y de esa manera nosotros lo podemos
guardar ahí, conservarlo y aunque hagamos diferentes PostBack mantenerlo para poder
seguir accediendo a esa información de manera fácil y rápida.

El valor que vamos a colocar va a ser de tipo string, los valores numéricos debemos de
convertirlos a cadena.

Lo primero que haremos será crear un nuevo proyecto vacío con su respectivo WebForm.

I.S.C. Martín García Martínez 200

ASP.NET / Bootstrap
Enseguida en el Diseño de nuestro WebForm, nos vamos a ir a nuestro cuadro de herramientas y vamos
agregar el control HiddenFiel, este control nos dará el aspecto de parecer un botón, pero en
realidad no lo es, este control por el momento lo estamos viendo en nuestra vista de diseño
pero al momento de correr el programa no se va a ver.

El ID de este control lo vamos a nombrar como hfValor.

I.S.C. Martín García Martínez 201

ASP.NET / Bootstrap
Después agregaremos más controles a nuestra vista de diseño, agregaremos un Label y un TextBox.

El control Label lo dejaremos así con darle nombre a si ID, solo en su propiedad Text le escribiremos Dato, y en
la propiedad ID del TextBox le pondremos txtDato, este control de TextBox nos va a servir para que nosotros
podamos colocar un valor, ese valor guardarlo en HiddenFiel y luego poder hacer otras cosas con la
forma y en el momento el cual nosotros lo deseemos lo vamos a poder leer de HiddenFiel y
mostrarlo nuevamente en la forma.

I.S.C. Martín García Martínez 202

ASP.NET / Bootstrap
Ahora colocaremos otra etiqueta, esta etiqueta va a llevar como ID lblMostrar y la vamos a utilizar para
cuando nosotros leamos el HiddenFiel lo podamos colocar ahí, el valor nuevamente y
verifiquemos que efectivamente el valor se conservo entre las diferentes llamadas.

Posteriormente vamos a colocar dos botones, en donde declararemos las Propiedades ID’s y
Text, ID = btnLeer y Text = Leer y ID = btnMostrar y Text = Mostrar, respectivamente

I.S.C. Martín García Martínez 203

ASP.NET / Bootstrap
Ya que tenemos la estructura del diseño listo, ahora nos vamos a ir al handler de nuestro botón Leer, dando
doble click sobre este en la vista de diseño.

I.S.C. Martín García Martínez 204

ASP.NET / Bootstrap
Y que estamos dentro del handler del botón Leer, ahora añadiremos el siguiente código.

protected void btnLeer_Click(object sender, EventArgs e)

{
//COLOCAR EL VALOR QUE NOS INTERESA
hfValor.Value = txtDato.Text;

//LIMPIAMOS LA ETIQUETA Y EL TEXTBOX

lblMostrar.Text = "";
txtDato.Text = "";

I.S.C. Martín García Martínez 205

ASP.NET / Bootstrap
De igual forma nos vamos a ir al handler del botón Mostrar haciendo doble click sobre este.

I.S.C. Martín García Martínez 206

ASP.NET / Bootstrap
Y a su handler le escribiremos la siguiente línea de código.

protected void btnMostrar_Click(object sender, EventArgs e)

{
//LEEMOS EL VALOR
lblMostrar.Text = hfValor.Value;
}

Ahora vamos a correr nuestro programa, En donde lo primero que haremos será escribir un dato, en este
ejemplo escribiremos Martin.

I.S.C. Martín García Martínez 207

ASP.NET / Bootstrap
Después daremos click en el botón leer, cuando demos click en el botón leer, ¿qué va a pasar?, la información
previamente introducida, se va a ir al servidor y va a ser procesado y va a regresar, entonces se le da click en el
botón Leer, y en ese momento se va a limpiar la caja de texto.

Mientras la información se tiene almacenada y no se está viendo, se podrían hacer otras cosas dentro del
Form, todo lo que se desee y sea necesario.

Y después al darle click Al botón Mostrar, cuando le damos click Mostrar, nuevamente se va al servidor, el
servidor lleva a cabo el procesamiento, y nos va a regresar algo, y en este caso nos va a regresar el valor que
inicialmente habíamos colocado en la caja de texto, en este caso Martin, conformando que el valor dentro del
HiddenFiel se ha conservado.

Este control puede resultar muy útil, en particular cuando se trabaja con bases de datos

I.S.C. Martín García Martínez 208

ASP.NET / Bootstrap
MultiView y View
Veremos cómo usar MultiView para poder tener varios desplegados adentro de un webform.

En que consiste este control, bueno pues vamos a tener un WebForm que puede tener
diferente desplegados, es decir el mismo webform se puede mostrar de diferentes formas
dependiendo de cuál sea la vista o el view que nosotros estemos seleccionando en ese
momento.

Entonces lo primero que haremos será crear un proyecto Vacío mismo que le vamos añadir
un WebForm1 como se puede ver en el Explorador de soluciones.

I.S.C. Martín García Martínez 209

ASP.NET / Bootstrap
Posteriormente nos vamos a ir a nuestro diseño de nuestro WebForm1 y vamos a agregar nuestro
control MultiView.

Enseguida nuevamente nos vamos a ir a nuestro Cuadro de herramientas y vamos a ubicar el control View,
este control lo vamos a arrastrar dentro del control MultiView como se muestra en la siguiente
imagen.

I.S.C. Martín García Martínez 210

ASP.NET / Bootstrap
Adentro de este View que acabamos de agregar es en donde vamos a ir adicionando los diferentes elementos,
todo lo que quede en el espacio de un View en particular, es lo que se va a desplegar cuando ese View este
activo, si hay algo que no este en ese View en particular, pues no se desplegara.

Ahora nos vamos a ir al código de View, teniendo seleccionado ese control.

Y posteriormente damos click en la pestaña interior que dice Código.

I.S.C. Martín García Martínez 211

ASP.NET / Bootstrap
Y la parte seleccionada la copiaremos otras dos veces,

I.S.C. Martín García Martínez 212

ASP.NET / Bootstrap
De esta manera ya podemos codificar dentro de cada uno de los View.

Enseguida vanos a seleccionar nuestro View1 en su propiedad ID vamos a ponerme VDatos, ya que este View
se encargará de recoger los datos iniciales con los que se va a trabajar en este ejercicio.

I.S.C. Martín García Martínez 213

ASP.NET / Bootstrap
De igual manera

Al siguiente View le vamos a poner VOperaciones en su propiedad ID.

Al ultimo View le vamos a poner VResultado en su propiedad ID.

I.S.C. Martín García Martínez 214

ASP.NET / Bootstrap
Ya que le hemos dado nombres a los ID de cada unos de los VDatos, vamos a agregar dos label’s, dos TextBox
y un botón. Como se ve a continuación, dándole los siguientes valores a sus propiedades.

ID: txtA

ID: txtB

ID: btn0a1
Text: ->

Después en el segundo View vamos agregarle 4 RadioButton y dos botones.

ID: rbSuma ID: rbDiv

GroupName: operaciones GroupName: operaciones
Text: Suma Text: Div

ID: btn1a0
Text: <-
I.S.C. Martín García Martínez 215
ASP.NET / Bootstrap
ID: rbMulti
GroupName: operaciones ID: btn1a2
Text: Multi Text: ->

ID: rbResta
GroupName: operaciones
Text: Resta

Por último, vamos a agregar en el VResultado una etiqueta que dice Resultado y un TextBox al cual estaremos
llamando a su ID: txtResultado.

ID: txtResultado

Text: Resultado

Después de terminar nuestro diseño, ahora vamos empezar a colocar el código, este código que vamos hacer
nos va a permitir llevar a cabo los cambios de Views, indicar cual el View con el que estamos iniciando, y desde
luego hacer las operaciones correspondientes que nosotros necesitemos.

I.S.C. Martín García Martínez 216

ASP.NET / Bootstrap
Entonces vamos a dar click en nuestro archivo WebForm1.aspx.cs

En donde añadiremos en el evento Load las siguientes líneas de código.

protected void Page_Load(object sender, EventArgs e)

{
//AQUI PROMERO CHECAMOS QUE NO SEA UN PostBack
//Y EN CASO QUE NO SEA UN PostBack
// LE DECIMOS QUE QUEREMOS ARRANCAR CON EL
// EL VIEW CON EL INDICE 0

if (!Page.IsPostBack)

I.S.C. Martín García Martínez 217

ASP.NET / Bootstrap
MultiView1.ActiveViewIndex = 0;
}

Después de esto vamos empezar a dale funcionabilidad a los botones, para esto nos vamos nuevamente a
diseño y damos doble click sobre el botón btn0a1.

I.S.C. Martín García Martínez 218

ASP.NET / Bootstrap
En este handler vamos a escribir la siguiente línea de código.

protected void btn0a1_Click(object sender, EventArgs e)

{
MultiView1.ActiveViewIndex = 1;
}

Ahora nos vamos al Diseño y daremos doble click sobre el botón regresar de View de VOperaciones.

I.S.C. Martín García Martínez 219

ASP.NET / Bootstrap
Una vez que ya estanos en el handler del botón btn1a0 le añadiremos la siguiente línea de código.

protected void btn1a0_Click(object sender, EventArgs e)

{
//ESTE BOTON NOS VA A PERMITIR REGRESA, IRNOS AL INDEX 0
// AL VIEW DE VOPERACIONES
MultiView1.ActiveViewIndex = 0;
}

I.S.C. Martín García Martínez 220

ASP.NET / Bootstrap
Nuevamente nos vamos a nuestra vista de Diseño y dando doble click en el botón con el ID btn1a2.

Este botón no solamente va hacer la función de pasar de un índex a otro, sino que va a llevar una lógica de las
operaciones, Por lo que escribiremos las siguientes líneas de código.

protected void btn1a2_Click(object sender, EventArgs e)

{
int a = Convert.ToInt32(txtA.Text);
int b = Convert.ToInt32(txtB.Text);
int r = 0;

I.S.C. Martín García Martínez 221

ASP.NET / Bootstrap
if (rbSuma.Checked)
r = a + b;
if (rbResta.Checked)
r = a - b;
if (rbMulti.Checked)
r = a * b;
if (rbDiv.Checked)
r = a / b;

txtResultado.Text = r.ToString();

// LE RESULTADO SE VA A VISUALIZAR ABRIRENDOSE LA VISTA INDEX 2

MultiView1.ActiveViewIndex = 2;
}

Ya que se tiene todo el código necesario, ahora empezaremos a probarlo.

I.S.C. Martín García Martínez 222

ASP.NET / Bootstrap
I.S.C. Martín García Martínez 223
ASP.NET / Bootstrap
Instalar Bootstrap y JQuery en ID de Visual Studio y llamar a ventana
Modal de Bootstrap mediante un botón (VS2022 / BOOTSTRAP v5.1)

Lo primero que haremos será abrir nuestro Visual Studio 2022.

En el cual crearemos un proyecto Aplicación web ASP.NET (.NET Framework)

I.S.C. Martín García Martínez 224

ASP.NET / Bootstrap
Después de seleccionar Aplicación web ASP.NET (.NET Framework) y demos click en el botón Siguiente,

Le daremos el nombre ModalJS al proyecto, y posteriormente daremos click el botón Crear.

Después nos aparecerá una ventana como la que se muestra a continuación y finalmente seleccionaremos la
plantilla Vacio, y finalmente daremos click en el botón Crear.

I.S.C. Martín García Martínez 225

ASP.NET / Bootstrap
Así se ver nuestro entorno una vez que ya está listo.

Posteriormente lo primero que haremos será integrar Bootstrap vía externa a nuestro entorno de desarrollo
de Visual Studio 2022, para lo que nos vamos a ir a la página oficial de Booostrap, en esta página vamos hacer
click en el botón Download.

I.S.C. Martín García Martínez 226

ASP.NET / Bootstrap
Después aparecerá una página como la siguiente, en la cual nuevamente daremos click en el botón Download.

Una vez que dimos click se empezara a descargar la carpeta compilada con los archivos CCS y JS, Esta descarga
se refiere al código compilado listo para usar para Bootstrap en este caso es la versión v5.1.3 para colocarlo
fácilmente en el proyecto, que incluye:

 Paquetes de CSS compilados y minificados

 Complementos de JavaScript compilados y minificados.

I.S.C. Martín García Martínez 227

ASP.NET / Bootstrap
Ya que se ha descargado el archivo bootstrap-5.1.3-dist, con el puntero del ratón daremos click derecho y
seleccionaremos la opción Extraer aquí, ya que este archivo viene comprimido.

Posteriormente también descargaremos la biblioteca jQuery, para incluirla dentro de los archivos js que se
encuentran dentro de la carpeta de bootstrap-5.1.3-dist, lo primero que haremos será ir a la página oficial de
jQuery, una vez que ya estamos en la página, dar click en el botón Download JQuery

I.S.C. Martín García Martínez 228

ASP.NET / Bootstrap
Posteriormente en la página que se abrirá dar click en Download the compressed, production jQuery 3.6.0

Después nos abrirá une pagina como la siguiente en la cual daremos click derecho al ratón y nos saldrá un
menú contextual en el cual seleccionaremos la opción Guardar como…

I.S.C. Martín García Martínez 229

ASP.NET / Bootstrap
Este archivo que se va a Guardar, debemos de direccionarlo a la carpeta de js que se encuentra dentro de la
carpeta bootstrap-5.1.3-dist de Bootstrap, en este ejemplo seria la siguiente ruta C:\Users\iscma\
Downloads\bootstrap-5.1.3-dist\js.

Ya que se de click en el botón Guardar nos percataremos que nuestro archivo jquery-3.6.0.min ya se
encuentra dentro de la carpeta js.

I.S.C. Martín García Martínez 230

ASP.NET / Bootstrap
Ya que se ha extraído la carpeta bootstrap-5.1.3-dist, he adherido el archivo jquery-3.6.0.min a la carpeta js
que se encuentra dentro de la carpeta bootstrap-5.1.3-dist, esta carpeta la vamos a arrastrar con el puntero
del ratón hacia el Explorador de soluciones, específicamente al proyecto de nombre ModalJS.

Ya que hemos arrastrado nuestra carpeta bootstrap-5.1.3-dist al Explorador de soluciones, se visualizará

dentro de nuestro proyecto como se ve a continuación.

I.S.C. Martín García Martínez 231

ASP.NET / Bootstrap
Enseguida dando click derecho sobre el icono del proyecto ModalJS agregaremos un WebForm mediante un
Nuevo elemento.

Enseguida aparecerá una ventana en donde agregaremos un Formulario Web Form, para este ejemplo le
dejaremos el nombre que sugiere por default WebForm1.aspx y daremos click en el botón Agregar.

I.S.C. Martín García Martínez 232

ASP.NET / Bootstrap
Ya que hemos agregado nuestro Formulario Web Form se mostrará nuestro entorno de desarrollo como a
continuación se presenta, ya con nuestro Formulario Web Form dentro de nuestro Explorador de soluciones.

Ya para acabar de instalar Bootstrap adicionaremos tres líneas de código, estas líneas se refieren a la ruta para
trabajar con los archivos css y js que se encuentran dentro de la carpeta bootstrap-5.1.3-dist.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs"

Inherits="ModalJS.WebForm1" %>

<!DOCTYPE html>

I.S.C. Martín García Martínez 233

ASP.NET / Bootstrap
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>

<link rel="stylesheet" href="bootstrap-5.1.3-dist/css/bootstrap.min.css">

</head>
<body>
<form id="form1" runat="server">
<div>
</div>
</form>
</body>
</html>

Debemos tener bien en cuenta que el inicio de la ruta de para llegar a los archivos css y js, inician con el
nombre de la carpeta de bootstrap-5.1.3-dist, por lo que esta deberá estar bien escrita.

De esta manera ya tenemos listo nuestro Bootstrap instalado en nuestro ID de Visual Studio 2022 y por lo
tanto ya podemos copiar y pegar Documentación directamente de la página oficial de Bootstrap

Posteriormente nos iremos a la página oficial de Bootstrap.

https://getbootstrap.com/

I.S.C. Martín García Martínez 234

ASP.NET / Bootstrap
Después nos iremos a al menú documentación (Docs) y en el Search docs... para este ejemplo escribiremos
Modal, para que así nos filtre la documentación y ejemplos referentes a Modal, para lo que seleccionaremos
la opción Modal/Modal.

Posteriormente Bootstrap nos mostrara en la página, la sección de las ventanas Modales y para este ejemplo
ubicaremos la que dice Live Demo, ya que este ejemplo contiene un botón para mandar llamar la ventana
Modal, y daremos click en el botón de Copy para mandar al portapapeles todo el contenido de ejemplo.

I.S.C. Martín García Martínez 235

ASP.NET / Bootstrap
Posteriormente vamos a pegar este código enseguida del <body> de nuestro código de WebForm1.aspx
quedando como a continuación se presenta.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs"

Inherits="ModalJS.WebForm1" %>

<!DOCTYPE html>

<link rel="stylesheet" href="bootstrap-5.1.3-dist/css/bootstrap.min.css">

</head>
<body>

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-
target="#exampleModal">
Launch demo modal
</button>

<div class="modal fade" id="exampleModal" tabindex="-1" aria-
labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
I.S.C. Martín García Martínez 236
ASP.NET / Bootstrap
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>

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

Una vez que ya hemos pegado el código del botón y del Modal a nuestro código del WebForm1.aspx,
correremos y ejecutaremos la aplicación.

I.S.C. Martín García Martínez 237

ASP.NET / Bootstrap
Pasar información de un TextBox de una página a un TextBox de un
Modal, mediante código JavaScript

Partiendo del ejemplo anterior lo primero que vamos hacer va a ser agregar un control TextBox a nuestra vista
de diseño de nuestro WebForm1.aspx.

Después de haber agregado este control, en la vista de código nos aparecerá de la siguiente forma.

I.S.C. Martín García Martínez 238

ASP.NET / Bootstrap
Como se supone que ya tenemos Bootstrap instalado, ahora adicionaremos la clase class="form-control"
a nuestro TextBox de asp quedando de la siguiente forma, además le asignaremos la id con el nombre de
copy.

Añadiendo la clase a nuestro control TextBox de asp class="form-control" será posible que nuestra caja
de texto desprenda el efecto propio de Bootstrap.

I.S.C. Martín García Martínez 239

ASP.NET / Bootstrap
Efecto propio de Bootstrap

Ahora vamos a adicionar un TextBox dentro de nuestro Modal para esto copiaremos un TextBox de la página
de Bootstrap, ya que las ventanas Modales son propias de Bootstrap estas deben de tener sus controles
también de Bootstrap, es decir si le copiamos la línea de código propia de asp o le añadimos un control
TextBox de asp este no lo reconocerá. A esta línea, a su ID de le pondremos le pondremos el nombre de paste.

<input type="text" class="form-control" id="paste" aria-describedby="paste">

Una vez que ya hemos establecido las dos cajas de texto ahora adicionaremos el código JavaScript donde
llamara a la función de copiar lo que escribamos en la primera caja de texto a la segunda caja de texto que está
dentro del Modal.

Este será nuestro código JavaScript en la cual la función le llamaremos copiar()

I.S.C. Martín García Martínez 240
ASP.NET / Bootstrap
<script type="text/javascript">
function copiar() {
document.getElementById('paste').value = document.getElementById('copy').value
}

</script>

Como ya sabemos la función de JavaScript la posicionaremos al nivel del head, así como se muestra a
continuación.

Por ultimo y para poder mandar llamar la función copiar de Java Script, añadiremos en el botón que abre el
modal la instrucción con el evento onclick="copiar()” en donde se hace referencia al nombre de la función
copiar y quedara de la siguiente forma.

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-
target="#exampleModal" onclick="copiar()">
Launch demo modal
</button>

I.S.C. Martín García Martínez 241

ASP.NET / Bootstrap
Por último, ejecutamos la aplicación, y escribiremos en la caja de texto cualquier cosa.

Posteriormente después de escribir, daremos click en el botón y veremos como se ha copiado en el primer
TextBox y se ha pegado en el segundo TextBox texto del Modal.

I.S.C. Martín García Martínez 242

ASP.NET / Bootstrap
Hacer una suma en un Modal
Estas ventanas además de ser un complemento modal de JavaScript de Bootstrap para agregar cuadros de
diálogo a un sitio, notificaciones de usuario, también nos sirven para agregarle contenido completamente
personalizado, por lo que en el siguiente ejemplo haremos un poco más funcional un Modal realizando una
suma sobre este.

Partiendo del ejemplo anterior de como mandar llamar un Modal desde un botón y una vez que este nuestro
modal abierto podamos hacer una suma por medio de tres TextBox que adicionaremos a nuestro Modal¸ cada
uno con sus respectivos nombres de ID, num1, num2 y res

Ahora al correr nuestra aplicación deberá lucir de la siguiente forma.

I.S.C. Martín García Martínez 243

ASP.NET / Bootstrap
También será necesario reeditar el botón por medio del cual ejecutará el Script de JavaScript, adicionándole el
evento onclick para que desde el click del botón mande llamar la función sumar.

onclick="sumar()"

<button type="button" class="btn btn-primary" value="Calcular"

onclick="sumar()">SUMAR</button>

El cual lucirá como se ve a continuación

I.S.C. Martín García Martínez 244

ASP.NET / Bootstrap
Por último, adicionaremos el código de JavaScript, enseguida del que ya se tenía del ejercicio anterior.

function sumar() {
var num1 = Number(document.getElementById('num1').value);
var num2 = Number(document.getElementById('num2').value);

var res = num1 + num2;

document.getElementById('res').value = res;

}
</script>

Ya que se ha ejecutado la aplicación la vamos a correr y enseguida estaremos haciendo la suma de dos TexBox,
y un resultado.

I.S.C. Martín García Martínez 245

ASP.NET / Bootstrap
Limpiar cajas de texto
Basados en el ejemplo anterior agregaremos un botón LIMPIAR a nuestra ventana Modal dándonos una
apariencia como la que se ve a continuación.

Dicho botón se agregará mediante el siguiente código, en este código ya se estará referenciando la llamada a
la función JavaScript Limpiar onclick="Limpiar('num1', 'num2', 'res');" también se enuncian los nombres de
los id de las cajas de texto num1, num2 y res.

I.S.C. Martín García Martínez 246

ASP.NET / Bootstrap
<button type="button" class="btn btn-info" value="Limpiar" onclick="Limpiar('num1' , 'num2',
'res');">LIMPIAR</button>

Ya que se tiene el diseño y código de llamada en el botón LIMPIAR, ahora solo agregaremos nuestro código
JavaScript, Limpiar

document.getElementById(num1).value = '';
document.getElementById(num2).value = '';
document.getElementById(res).value = '';
}
</script>

Una vez que se han introducido números a las cajas de texto dándole click al botón LIMPIAR estos borraran las
cajas de Texto.

I.S.C. Martín García Martínez 247

ASP.NET / Bootstrap
Otra manera de ejecutar funciones de JavaScript

I.S.C. Martín García Martínez 248

ASP.NET / Bootstrap
Login con inicio y cierre de sesión (VS2022)

Un login se encarga de la autenticación del usuario (comprobando que el nombre de usuario y contraseña sean
correctos), y establece un entorno inicial para el usuario, a los login se les puede retroalimentar con funciones
como la activando permisos por privilegios.

Lo primero que haremos será diseñar nuestro esquema de base de datos, para este ejemplo a nuestra base de
datos le daremos el nombre de testing_mysql y a nuestros campos le pondremos los nombres de:

username y password, también usaremos una clave principal id

A continuación, para este ejemplo se vara un login sencillo, para esto lo primero que haremos será crear un
nuevo proyecto.

I.S.C. Martín García Martínez 249

ASP.NET / Bootstrap
A este proyecto le pondremos el nombre de Login.

I.S.C. Martín García Martínez 250

ASP.NET / Bootstrap
I.S.C. Martín García Martínez 251
ASP.NET / Bootstrap
Una vez que ya tenemos nuestro proyecto creado, vamos crear un Nuevo elemento WebForm.

A este elemento WebForm le vamos a poner el nombre de login.aspx

I.S.C. Martín García Martínez 252

ASP.NET / Bootstrap
Ya que le hemos dado click en el botón Agregar, aparecerá este archivo que nos muestra la estructura del
archivo login.aspx

En la parte inferior izquierda daremos click en el botón Diseño para que nos aparezca en modo de diseño el
archivo login.aspx

I.S.C. Martín García Martínez 253

ASP.NET / Bootstrap
En esta interfaz continuación agregaremos los siguientes controles dándonos el siguiente aspecto.

Con sus siguientes propiedades

ID: txtUser

I.S.C. Martín García Martínez 254

ASP.NET / Bootstrap
ID: txtPass
ID: lblMen TextMode: Password
Text: Mensaje

ID: txtPass
TextMode: Password

Posteriormente agregaremos la referencia MySql.Data.DLL para poder acceder a los procesos relacionados
con conexión y navegación de base de datos MySQL, esta referencia la vamos agregar como archivo de la
siguiente forma, en el Explorador de soluciones vamos a dar click derecho sobre las Referencias, dicha
referencia la vamos a poder descargar de la siguiente liga.

https://drive.google.com/drive/folders/1SWsaXHl8VwQbqQ1v81teydZZEaWmubTf?usp=sharing

I.S.C. Martín García Martínez 255

ASP.NET / Bootstrap
Después de haber dado click en la opción Agregar referencia… del menú contextual nos abrirá una ventana
como la siguiente, en esta ventana daremos click en el botón Examinar…

Y ahí seleccionaremos nuestra referencia de conexión MySql.Data.DLL

I.S.C. Martín García Martínez 256

ASP.NET / Bootstrap
Después de haber seleccionado nuestro archivo MySql.Data.DLL damos click en el botón agregar y nos saldrá
la siguiente ventana.

Y al dar click en el botón Aceptar nos estaría agregando la referencia a nuestro proyecto.

I.S.C. Martín García Martínez 257

ASP.NET / Bootstrap
Posteriormente vamos a dar doble click sobre el botón Aceptar.

Para entrar a su handler es decir al evento click del botón Aceptar. En el cual vamos a escribir las siguientes
líneas de código.

protected void Button1_Click(object sender, EventArgs e)

{

var conexion = new MySqlConnection(); // VARIABLE GLOBAL DE CONEXION

try
{

//ESTA ES PARTE DE CONEXION

I.S.C. Martín García Martínez 258

ASP.NET / Bootstrap
conexion.ConnectionString = "Server=localhost; SslMode = none;Database=testing_mysql;
Uid=root; Pwd=123456";
conexion.Open();

//ESTA ES PARTE DE LA CONSULTA

MySqlDataAdapter adaptador;
DataTable tabla;
string buscar;
buscar = "select * from login where username='" + txtUser.Text + "' and password='" +
txtPass.Text + "'";

//ESTA ES PARTE DE VISUALIZACION

adaptador = new MySqlDataAdapter(buscar, conexion);
tabla = new DataTable();
adaptador.Fill(tabla);

//ESTA ES PARTE DE VALIDACION

foreach (DataRow dr in tabla.Rows)
{
Session["username"] = dr["username"].ToString();
Response.Redirect("principal.aspx");
}

catch (Exception ex)

{
// MessageBox.Show("Error de conexion", "ERROR");
Console.WriteLine("Standard Numeric Format Specifiers");
}

conexion.Close();
lblMen.Text = "Contraseña incorrecta";
}

I.S.C. Martín García Martínez 259

ASP.NET / Bootstrap
No olvidemos agregar el using
MySql.Data.MySqlClient;

I.S.C. Martín García Martínez 260

ASP.NET / Bootstrap
Ahora agregaremos un menú WebForm con el nombre de Principal.aspx, este WebForm será la ventana que
se va abrir después de haber ingresado con los datos correctos a nuestro Login.

I.S.C. Martín García Martínez 261

ASP.NET / Bootstrap
Ya que henos creado nuestro WebForm con el nombre de Principal.aspx, en el evento load de esta
escribiremos las siguientes líneas de código, estas líneas nos redireccionaran al WebForm login.aspx siempre y
cuando la Session sea nula.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace inicio
{
public partial class general : System.Web.UI.Page

I.S.C. Martín García Martínez 262

ASP.NET / Bootstrap
{
protected void Page_Load(object sender, EventArgs e)
{
if (Session["username"]== null)
{
Response.Redirect("login.aspx");
}

}
}
}

De igual forma crearemos otro WebForm, este con el nombre de logout.aspx

I.S.C. Martín García Martínez 263

ASP.NET / Bootstrap
Posteriormente ya que hemos le damos el nombre de logout.aspx

Una vez que ya hemos creado nuestro archivo logout.aspx nos vamos a ir a su handler de este dando clic a
botón derecho del ratón y en el menú contextual seleccionaremos la opción Ver código.

I.S.C. Martín García Martínez 264

ASP.NET / Bootstrap
Y en el evento Load escribiremos el siguiente código, en estas líneas de código se limpia la sessión iniciada
redireccionándonos al WebForm login.aspx.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace login
{
public partial class logout : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
Session.Clear();
Response.Redirect("login.aspx");
}
}
}

I.S.C. Martín García Martínez 265

ASP.NET / Bootstrap
Ya por último ejecutaremos nuestro programa.

I.S.C. Martín García Martínez 266

ASP.NET / Bootstrap
LINEAS DE CODIGO PRESTABLECIDAS

Añadir Ítem a DropDownList vía código.

protected void Page_Load(object sender, EventArgs e)

{
if (!IsPostBack)
{
ListItem fresa = new ListItem("Fresa", "4");
ListItem naranja = new ListItem("Naranja", "5");

ddlFrutas.Items.Add(fresa);
ddlFrutas.Items.Add(naranja);
}
}

I.S.C. Martín García Martínez 267

ASP.NET / Bootstrap
LIGAS BIBLIOGRAFICAS BASADOS EN REFERENCIAS

https://www.youtube.com/watch?v=mYlJxJRafCo&list=PLM-p96nOrGcb3aQ2zh8jGzRugtuKUNJdo

https://developer.mozilla.org/es/docs/Web/JavaScript

https://juanalbertogt.wordpress.com/tag/ejecutar-javascript-desde-el-code-behind-visual-basic-asp-net/

https://www.kyocode.com/2019/01/ejecutar-funciones-javascript-con-onclick/

https://www.tutorialesprogramacionya.com/

https://www.youtube.com/watch?v=Xwb0m0X6ehY Paginación en GridView

https://www.youtube.com/watch?v=gj_x-t8n1M8 Paginación en GridView

I.S.C. Martín García Martínez 268

ASP.NET / Bootstrap
I.S.C. Martín García Martínez 269
ASP.NET / Bootstrap

También podría gustarte

LIGHTBURN Manual de Instrucciones
100% (1)
LIGHTBURN Manual de Instrucciones
239 páginas
Mototrbo DEP550-570 Basico 68009579001-A
Aún no hay calificaciones
Mototrbo DEP550-570 Basico 68009579001-A
94 páginas
Secuencia Didactica Mantenimiento Preventivo 3er Semestre A-D 2019
Aún no hay calificaciones
Secuencia Didactica Mantenimiento Preventivo 3er Semestre A-D 2019
14 páginas
Capacitacion de Uso Escaner LAUNCH X431
89% (18)
Capacitacion de Uso Escaner LAUNCH X431
76 páginas
Guia ACA Illustrator ESP
Aún no hay calificaciones
Guia ACA Illustrator ESP
77 páginas
Libro ASP - Net-Parte 1
Aún no hay calificaciones
Libro ASP - Net-Parte 1
68 páginas
Ajax
Aún no hay calificaciones
Ajax
24 páginas
Controles Avanzados para Formularios
0% (1)
Controles Avanzados para Formularios
2 páginas
Manual de Instalación de Sistema Operativo Propietario "Windows 7"
Aún no hay calificaciones
Manual de Instalación de Sistema Operativo Propietario "Windows 7"
24 páginas
Arquitectura de Aplicaciones Web
Aún no hay calificaciones
Arquitectura de Aplicaciones Web
30 páginas
Tutorial:crear Un Formulario Web Con ASP NET en Visual Studio 2008
100% (13)
Tutorial:crear Un Formulario Web Con ASP NET en Visual Studio 2008
10 páginas
Camaras Ip Hikvisión 2
Aún no hay calificaciones
Camaras Ip Hikvisión 2
32 páginas
Documento Requerimientos Funcionales y No Funcionales
Aún no hay calificaciones
Documento Requerimientos Funcionales y No Funcionales
10 páginas
Habitaciones
Aún no hay calificaciones
Habitaciones
17 páginas
Curso de C# - Formularios Web
Aún no hay calificaciones
Curso de C# - Formularios Web
10 páginas
ISI BSI 03 Programacion I
Aún no hay calificaciones
ISI BSI 03 Programacion I
9 páginas
Pasos para Crear Un Sitio Web ASP-Fácil
Aún no hay calificaciones
Pasos para Crear Un Sitio Web ASP-Fácil
141 páginas
Manual de ASP - UCV
Aún no hay calificaciones
Manual de ASP - UCV
98 páginas
I Look 111 Manual Spanish
Aún no hay calificaciones
I Look 111 Manual Spanish
73 páginas
Tutorial Curso ASP Net Ajax
Aún no hay calificaciones
Tutorial Curso ASP Net Ajax
41 páginas
Controles ASP Net
Aún no hay calificaciones
Controles ASP Net
30 páginas
Ut 1. Somo
Aún no hay calificaciones
Ut 1. Somo
42 páginas
Fundamentos Sistemas Informacion - Controles ASP
Aún no hay calificaciones
Fundamentos Sistemas Informacion - Controles ASP
46 páginas
Unidad 1 - Introduccion ASPNet 1
Aún no hay calificaciones
Unidad 1 - Introduccion ASPNet 1
31 páginas
Aplicaciones Web Con Visual C Sharp Net
Aún no hay calificaciones
Aplicaciones Web Con Visual C Sharp Net
37 páginas
3 - PR2 - Introducción Al Desarrollo Con
Aún no hay calificaciones
3 - PR2 - Introducción Al Desarrollo Con
25 páginas
Presentación Equipo3-ASPX
Aún no hay calificaciones
Presentación Equipo3-ASPX
25 páginas
Frame TRABAJO EXPO
Aún no hay calificaciones
Frame TRABAJO EXPO
30 páginas
ASP Net Parte 01
Aún no hay calificaciones
ASP Net Parte 01
18 páginas
ASP
Aún no hay calificaciones
ASP
54 páginas
Controles ASP Net
Aún no hay calificaciones
Controles ASP Net
30 páginas
104 Fundamentos de Programación
Aún no hay calificaciones
104 Fundamentos de Programación
16 páginas
SQL Server
Aún no hay calificaciones
SQL Server
30 páginas
AUTOCAD 2D Sesion23
Aún no hay calificaciones
AUTOCAD 2D Sesion23
24 páginas
Creacion de Controles de Usuario
Aún no hay calificaciones
Creacion de Controles de Usuario
20 páginas
Elaboración de Un Formulario Web Utilizando ASP
Aún no hay calificaciones
Elaboración de Un Formulario Web Utilizando ASP
33 páginas
Controles de Servidor HTML
Aún no hay calificaciones
Controles de Servidor HTML
19 páginas
Controles de Visual 2012
Aún no hay calificaciones
Controles de Visual 2012
13 páginas
1.3. Controles Web - Parte 1
Aún no hay calificaciones
1.3. Controles Web - Parte 1
22 páginas
ASP.NET
Aún no hay calificaciones
ASP.NET
30 páginas
Guia 3
Aún no hay calificaciones
Guia 3
22 páginas
Controles de Validacion
Aún no hay calificaciones
Controles de Validacion
19 páginas
Estructura Del Computador
Aún no hay calificaciones
Estructura Del Computador
3 páginas
Zoho Projects
Aún no hay calificaciones
Zoho Projects
8 páginas
Tinker Cad
Aún no hay calificaciones
Tinker Cad
17 páginas
Clase No. 3 Programación II
Aún no hay calificaciones
Clase No. 3 Programación II
19 páginas
ASP Webforms
Aún no hay calificaciones
ASP Webforms
10 páginas
Crear Formularios Web Forms
Aún no hay calificaciones
Crear Formularios Web Forms
31 páginas
Tema 2 - Inserción de Controles de Servidor
Aún no hay calificaciones
Tema 2 - Inserción de Controles de Servidor
15 páginas
UT3.3 Instalacion y Configurar Owncloud Bitnami.
Aún no hay calificaciones
UT3.3 Instalacion y Configurar Owncloud Bitnami.
16 páginas
Guia 1 - ASP Udb
Aún no hay calificaciones
Guia 1 - ASP Udb
20 páginas
ProgIII Introd ASP - Net Original
Aún no hay calificaciones
ProgIII Introd ASP - Net Original
16 páginas
Manual GNURADIO
Aún no hay calificaciones
Manual GNURADIO
14 páginas
AP2 AA2 Ev1 Wiki
Aún no hay calificaciones
AP2 AA2 Ev1 Wiki
10 páginas
Controles Web ASP PDF
Aún no hay calificaciones
Controles Web ASP PDF
10 páginas
Guia
Aún no hay calificaciones
Guia
18 páginas
Guía de Prácticas de Desarrollo de Aplicaciones #02 - 2021
Aún no hay calificaciones
Guía de Prácticas de Desarrollo de Aplicaciones #02 - 2021
11 páginas
Laboratorio Web SERVER Controls
Aún no hay calificaciones
Laboratorio Web SERVER Controls
9 páginas
Manual Reloj GPS Q50
Aún no hay calificaciones
Manual Reloj GPS Q50
16 páginas
Manejo Pseint
Aún no hay calificaciones
Manejo Pseint
9 páginas
Semana05-Elaboracion Del Edt Gestion de Proyectos
Aún no hay calificaciones
Semana05-Elaboracion Del Edt Gestion de Proyectos
9 páginas
Máster en Data Science y Big Data (BBVA) - C.201916 - 04 - 2019 - 00 - Apr
Aún no hay calificaciones
Máster en Data Science y Big Data (BBVA) - C.201916 - 04 - 2019 - 00 - Apr
7 páginas
Creación de Sitios Web y Elementos de Una Aplicación Web ASP
Aún no hay calificaciones
Creación de Sitios Web y Elementos de Una Aplicación Web ASP
14 páginas
Formularios Web ASP
Aún no hay calificaciones
Formularios Web ASP
6 páginas
ASPNET Establecer Focus en Una Master Page
Aún no hay calificaciones
ASPNET Establecer Focus en Una Master Page
4 páginas
Instalacion Ajax
Aún no hay calificaciones
Instalacion Ajax
3 páginas
Compendio de Programacion Android by Cherry
Aún no hay calificaciones
Compendio de Programacion Android by Cherry
3 páginas
Web Forms
Aún no hay calificaciones
Web Forms
5 páginas
Abdías CV
Aún no hay calificaciones
Abdías CV
2 páginas
Cuadro Comparativo Entre Windows XP y Ubuntu
Aún no hay calificaciones
Cuadro Comparativo Entre Windows XP y Ubuntu
2 páginas
TP Integrador
Aún no hay calificaciones
TP Integrador
2 páginas
Ajax Net 2005
Aún no hay calificaciones
Ajax Net 2005
2 páginas
Hoja de Trabajo Quimica Inorganica
Aún no hay calificaciones
Hoja de Trabajo Quimica Inorganica
2 páginas
SP y Laravel
Aún no hay calificaciones
SP y Laravel
2 páginas
Controles de Servidor
Aún no hay calificaciones
Controles de Servidor
2 páginas
Leeme MVP Caribe 2013
Aún no hay calificaciones
Leeme MVP Caribe 2013
2 páginas
Los Controles Web en ASP
Aún no hay calificaciones
Los Controles Web en ASP
2 páginas