Tarea 6 Ambientes de Desarrollo y Frameworks

Nombre de la materia
Ambientes de desarrollo y
Frameworks.
Nombre de la Licenciatura
Ingeniería en Sistemas
Computacionales
Nombre del alumno

Luis Manuel Mora López
Matrícula
010577912
Nombre de la Tarea
Programando la Web con ASP.Net
Nombre del Profesor

Francisco Daniel Hernández Pérez
Fecha
04/08/2020
Unidad 6: Uso de AJAX en aplicaciones ASP.NET
Ambientes de Desarrollo y Frameworks
Introducción:
Para empezar este trabajo primero hay que definir que es AJAX. Es un conjunto
de técnicas de desarrollo web que permiten que las aplicaciones web funcionen de
forma asíncrona, procesando cualquier solicitud al servidor en segundo plano. En
pocas palabras estas técnicas nos ayudan a no tener que estar recargando
constantemente la página web que estemos creando y hacer más rápidos los
procesos que se manejan dentro de la codificación de la misma página y en su
carga más rápida.
Un ejemplo de esto podemos considerar a las salas de chat, por ejemplo

WhatsApp web, que claro que se puede abrir en el navegador de nuestra
preferencia y en el celular al mismo tiempo. En este caso Ajax evita que se
recargue la página cada vez que se envíe o recibe un mensaje nuevo.
Desarrollo:
Instrucciones:
1. Realiza una aplicación en Visual Studio C# en modo ASP.Net.

2. Desarrolla una aplicación que contenga dos controles AJAX, por ejemplo: El
combo1 que muestre algunas opciones por ejemplo la marca de un carro y que
cuando se seleccione llene un combo2 que contenga los modelos de esa marca.
3. Cuando ejecutes el programa y sea correcta dicha ejecución, envíale a tu profesor
en un archivo Zip la carpeta del proyecto.
Código base:
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb"
Inherits="_Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
p.MsoNormal
{margin-top:0cm;
margin-right:0cm;
margin-bottom:10.0pt;
2
margin-left:0cm;
line-height:115%;
font-size:11.0pt;
font-family:"Calibri","sans-serif";
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Label ID="Label3" runat="server" Font-Names="Arial Black" Font-
Size="XX-Large" ForeColor="#CC0000" Text="Cálculo del área de un
Pentágono"></asp:Label>
<br />
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<br />
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Label ID="Label1" runat="server" Text="Valor del Perímetro:
//Aquí se define la Etiqueta del valor del perímetro
"></asp:Label>
<asp:DropDownList ID="perimetro" runat="server">
<asp:ListItem>Selecciona</asp:ListItem>
<asp:ListItem>45.9</asp:ListItem>
</asp:DropDownList> //Todas estas son las opciones de las listes
desplegables
cm.<br />
<br />
<asp:Label ID="Label2" runat="server" Text="Valor de la Apotema:
"></asp:Label>
<asp:DropDownList ID="apotema" runat="server">
<asp:ListItem>Selecciona</asp:ListItem>
</asp:DropDownList> // Opciones de la segunda lista desplegable.
cm.<br />
<br />
Recordemos que la fórmula para calcular el área de un Pentágono
es:<br />
<br />
A= Perímero * Apotema / 2<br />//Estas dos líneas son texto
libre.
<br />
<asp:Button ID="Button1" runat="server" Text="Calcular" />
<br />
<br />// Declaración del botón Calcular.
El cálculo del área de tu pentágono es :
<asp:Label ID="resultado" runat="server" ></asp:Label>
cm. // Declaración de la etiqueta resultado.
3
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
Código del botón de acción:

Partial Class _Default
Inherits System.Web.UI.Page
Protected Sub Button1_Click(sender As Object, e As EventArgs) Handles

Button1.Click
resultado.Text = Convert.ToDouble(perimetro.Text) *
Convert.ToDouble(apotema.Text) / 2 //Se definen las ids de las listas perímetro y
apotema para que con las cantidades seleccionadas se pueda realizar el cálculo de el
área del pentágono y aquí se define cuál es la fórmula que se llevará a cabo al
darle click encima del botón.
End Sub
End Class
Inserción de elementos:
1.-En primer lugar se colocará una etiqueta (Label) la cual será la que actuará
como título del programa. También se modificará el aspecto así como la fuente y
color del texto para darle más presentación.
4
2.-Recordemos que para poder utilizar las funciones de Ajax es necesario colocar
el componente ScriptManager, el cual se encontrará en el Cuadro de
herramientas, en la pestaña de Extensiones Ajax.
5
3.-Vamos a proceder a clocar nuevamente etiquetas ahora para pedir el valor del
Perímetro y Apotema y para el resultado de la operación a realizar.
6
Cabe mencionar que en la etiqueta resultado es donde se realizará la impresión

de los resultados obtenidos de la operación.
4.-Ahora colocaremos el botón que realizará la operación directamente de las

cantidades colocadas en las dropdownlists.
7
5.- Colocamos los elementos DropDownLists ubicados en el cuadro de

herramientas estándar, donde elegiremos Tareas de DropDownList y editar los
elementos. Cabe mencionar que se debe nombrar el ID de ambas listas para que
los resultados sean correctos y que al compilar no nos marque error.
6.- Al darle en la opción de editar elementos, podremos seleccionar las opciones

de la lista. Este proceso se realizará en ambas listas.
8
Representación de la aplicación Web.
1.- Al abrir la aplicación en el navegador web de nuestra preferencia, aparecerá la

interfaz de nuestra aplicación.
9
2.- Las listas desplegables nos mostrarán las cantidades con las que podremos
realizar el cálculo del área del pentágono.
1
0
3.- Por último presionaremos el botón calcular para poder observar los resultados
en donde se encuentra la etiqueta resultado.
1
1
Concusiones:
En este trabajo se trabajó en base a la tecnología AJAX aplicada en el entorno de

programación Visual Studio 2017. Esta tecnología resulta bastante útil a mi punto
de vista para poder realizar aplicaciones o páginas web mucho más dinámicas y
también poder ver el funcionamiento de la misma por medio de la plataforma y
también en navegador.
Este módulo ha resultado interesante ya que hemos reforzado conocimientos que

hemos llevado a lo largo de la carrera.
Nota: El archivo ZIP de mi trabajo no lo pude enviar por la

plataforma ya que el archivo pesa más de lo permitido en la
misma, sin embargo le muestro que lo tengo mi computadora por
si requiere que lo envíe de otra forma.
Fuentes de información:
-Tutoriales de C# (Microsoft, 2013)
-AJAX (Microsoft, 2013)
1
2

Tarea 6 Ambientes de Desarrollo y Frameworks

Caricato da

Informazioni sul documento

Descrizione originale:

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Tarea 6 Ambientes de Desarrollo y Frameworks

Caricato da

Copyright:

Formati disponibili

Nombre de la materia

Nombre del alumno

Nombre del Profesor

Un ejemplo de esto podemos considerar a las salas de chat, por ejemplo

1. Realiza una aplicación en Visual Studio C# en modo ASP.Net.

Código del botón de acción:

Protected Sub Button1_Click(sender As Object, e As EventArgs) Handles

Cabe mencionar que en la etiqueta resultado es donde se realizará la impresión

4.-Ahora colocaremos el botón que realizará la operación directamente de las

5.- Colocamos los elementos DropDownLists ubicados en el cuadro de

6.- Al darle en la opción de editar elementos, podremos seleccionar las opciones

Representación de la aplicación Web.

1.- Al abrir la aplicación en el navegador web de nuestra preferencia, aparecerá la

En este trabajo se trabajó en base a la tecnología AJAX aplicada en el entorno de

Este módulo ha resultado interesante ya que hemos reforzado conocimientos que

Nota: El archivo ZIP de mi trabajo no lo pude enviar por la

-Tutoriales de C# (Microsoft, 2013)

Potrebbero piacerti anche