Upload
others
View
0
Download
0
Embed Size (px)
Citation preview
UNIVERSIDAD DON BOSCO
FACULTAD DE ESTUDIOS TECNOLÓGICOS
COORDINACION DE COMPUTACIÓN
CICLO I
2020
GUIA DE LABORATORIO #1
Nombre de la Práctica: Introducción al desarrollo de aplicaciones Web con ASP.NET MVC
Lugar de Ejecución: Centro de cómputo
Tiempo Estimado: 2 horas con 30 minutos
Materia: Lenguaje de Programación II
En esta guía de práctica se pretende:
1. Conseguir que los estudiantes tengan un primer contacto con la programación de aplicaciones web del lado
del servidor haciendo uso del marco de trabajo de ASP.NET y la forma de trabajo del mismo.
2. Desarrollar las habilidades mínimas necesarias para crear aplicaciones web haciendo uso de ASP.NET y el
lenguaje de programación C#
3. Identificar las partes, tipos de archivos, extensiones y componentes de un proyecto basado en ASP.NET.
4. Lograr la capacidad de consolidar los conocimientos de materias anteriores orientadas al desarrollo web con
C#.
¿Qué es ASP.NET?
ASP.NET es un framework para aplicaciones web desarrollado y comercializado por Microsoft. Es usado por
programadores y diseñadores para construir sitios web dinámicos, aplicaciones web y servicios web XML.
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.
ASP.NET es un modelo de
desarrollo Web unificado que
incluye los servicios necesarios
para crear aplicaciones Web
empresariales con el código
mínimo.
ASP.NET forma parte de .NET
Framework y al codificar las
aplicaciones ASP.NET tiene
acceso a las clases en .NET
Framework.
Desarrollo de aplicaciones con software propietario
I. OBJETIVOS
II. INTRODUCCIÓN TEÓRICA
Guía #1: Introducción al desarrollo de aplicaciones Web con ASP.NET
Lenguaje de Programación II 2
El código de las aplicaciones puede escribirse en cualquier lenguaje compatible con el Common Language
Runtime (CLR), entre ellos Microsoft Visual Basic, C#, JScript .NET y J#.
Estos lenguajes permiten desarrollar aplicaciones ASP.NET que se benefician del Common Language Runtime,
seguridad de tipos, herencia, etc. ASP.NET incluye:
Marco de trabajo de página y controles
Compilador de ASP.NET
Infraestructura de seguridad
Funciones de administración de estado
Configuración de la aplicación
Supervisión de estado y características de rendimiento
Capacidad de depuración
Marco de trabajo de servicios Web XML
Entorno de host extensible y administración del ciclo de vida de las aplicaciones
Entorno de diseñador extensible
Requisitos para el desarrollo en ASP.NET
Un editor de código.
NET Framework.
Un servidor Web como IIS (Servicios de Internet Information Server).
Adicionalmente a la programación web es necesario tener algún tipo de soporte para el almacenamiento de
datos (SQL Server, Oracle, etc.).
Arquitectura de ejecución de aplicaciones del lado del servidor con ASP.NET
La forma tradicional de trabajar con las aplicaciones basadas en ASP es a través del modelo cliente-servidor. En
el modelo cliente-servidor:
Un servidor es un equipo que produce datos
Un cliente es un equipo que utiliza los datos
Las aplicaciones Web utilizan el modelo cliente-servidor
Navegadores Web se ejecutan en los clientes y los datos de solicitud de servidores web
Sitios web se hospedan en servidores web que producen los datos conforme a lo solicitado por
los navegadores web
El archivo especial Web.config
Toda la información de configuración de ASP.NET reside en el elemento configuration de los archivos
Web.config. La información de configuración incluida en este elemento se agrupa en dos áreas principales: el área
de declaración del controlador de sección de configuración (sectionGroup) y el área de valores de la sección de
configuración (pages).
En el siguiente ejemplo de código se muestra el lugar que ocupan las secciones mencionadas anteriormente en un
archivo Web.config. Observe que el elemento namespaces del elemento pages carece de una declaración de
controlador de sección de configuración. El motivo es que el controlador de sección
Guía #1: Introducción al desarrollo de aplicaciones Web con ASP.NET
Lenguaje de Programación II 3
System.Web.Configuration.PagesSection controla todos los elementos secundarios de la sección de
configuración pages.
Páginas de código embebido (in-line) y páginas con código de clase subyacente (Code-Behind)
Un bloque de código incrustado o in-line es código del servidor que se ejecuta durante la fase de representación
de la página. El código incluido en el bloque puede ejecutar instrucciones de programación y llamar a funciones
de la clase de página actual. En el siguiente ejemplo se muestra una representación de código en línea:
<?xml version="1.0" encoding="us-ascii"?>
<configuration>
<!-- Configuration section-handler declaration area. -->
<configSections>
<sectionGroup name="system.web"
type="System.Web.Configuration.SystemWebSectionGroup,
Version=2.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a">
<section
name="pages"
type="System.Web.Configuration.PagesSection,
Version=2.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a"
/>
<!-- Other <section /> elements. -->
</sectionGroup>
<!-- Other <sectionGroup /> and <section /> elements. -->
</configSections>
System.Web,
System.Web,
<!-- Configuration section settings area. -->
<pages
buffer="true"
enableSessionState="true"
asyncTimeout="45"
<!-- Other attributes. -->
>
<namespaces>
<add namespace="System" />
<add namespace="System.Collections" />
</namespaces>
</pages>
<!-- Other section settings elements. -->
</configuration>
<%@ page language="C#" %>
<script runat="server">
Guía #1: Introducción al desarrollo de aplicaciones Web con ASP.NET
Lenguaje de Programación II 4
Como puede observar, tanto el código de programación como el marcado HTML de la estructura de la página se
encuentran en un mismo archivo. Esto se indica mediante la primera línea de código (directiva page), en la que
únicamente se le indica que el lenguaje de programación a utilizar es C#. La principal utilidad de este modelo es
poder conservar la compatibilidad con versiones antiguas de ASP. No obstante, hoy en día no es muy recomendable
seguir esta práctica.
Por otra parte, manejar código detrás del modelo o code-behind nos permite organizar los eventos en forma
separada, todo lo relacionado con interfaz de usuario lo manejamos en el archivo .aspx y el control de los eventos
en un archivo separado .cs (para C Sharp).
De forma similar a la
que manejamos los
archivos de JavaScript
(.js) donde incluimos
todas las funciones y
luego las
referenciamos en el
aspx hacemos con el
Code Behind.
La forma de
compilación y de
ejecución de este tipo
de modelo se presenta
en la siguiente figura.
A continuación se muestra un bloque de código bajo el modelo code-behind.
void Button1_Click(object sender, EventArgs e)
{
Label1.Text = "Hello " + TextBox1.Text;
}
</script>
<html>
<head>
<title>ASP.NET Inline Pages</title>
</head>
<body>
<form id="Form1" runat="server">
<h1>Welcome to ASP.NET 2.0!</h1>
<b>Enter Your Name:</b>
<asp:TextBox ID="TextBox1" Runat="server"/>
<asp:Button ID="Button1" Text="Click Me" OnClick="Button1_Click" Runat="server"/>
<br />
<br />
<asp:Label ID="Label1" Text="Hello" Runat="server" />
</form>
</body>
</html>
Guía #1: Introducción al desarrollo de aplicaciones Web con ASP.NET
Lenguaje de Programación II 5
CodeBehind_cs.aspx
<%@ page language="C#" CodeFile="CodeBehind_cs.aspx.cs" Inherits="CodeBehind_cs_aspx" %>
<html>
<head>
<title>ASP.NET CodeBehind Pages</title>
</head>
<body>
<form runat="server">
<h1>Welcome to ASP.NET 2.0!</h1>
<b>Enter Your Name:</b>
<asp:TextBox ID="TextBox1" Runat="server"/>
<asp:Button ID="Button1" Text="Click Me" OnClick="Button1_Click" Runat="server"/>
<br />
<br />
<asp:Label ID="Label1" Text="Hello" Runat="server" />
</form>
</body>
</html>
CodeBehind_cs.aspx.cs
using System;
public partial class CodeBehind_cs_aspx : System.Web.UI.Page {
protected void Button1_Click(object sender, EventArgs e) {
Label1.Text = "Hello " + TextBox1.Text;
}
}
Como puede observar, ahora existen dos tipos de archivos, uno en el que se maneja el aspecto visual de la página
y el otro donde se implementa la lógica de programación por separado. Esto es muy útil en aquellos equipos de
desarrollo multidisciplinario en el que es necesario trabajar junto a diseñadores web y otros programadores.
Además, se sabe que es code-behind ya que a diferencia del modelo de código en línea, la directiva page de la línea
uno del archivo CodeBehind_cs.aspx muestra los siguientes componentes:
<%@ page language="C#" CodeFile="CodeBehind_cs.aspx.cs" Inherits="CodeBehind_cs_aspx" %>
Language=”C#”: este atributo le está indicando al compilador que el código estará escrito en lenguaje C
Sharp.
AutoEventWireup=”true”: indica si el código será inline o Behind. Al “setearlo” en “true” le estamos indicando que el código será detrás del modelo (CodeBehind) y se especifica el nombre del archivo donde
buscará el código de eventos.
CodeFile=”CodeBehind_cs.aspx.cs”: indica el nombre del archivo donde incluiremos el código de
eventos.
Inherits=” CodeBehind_cs_aspx”: se especifica la clase a heredar, esta clase la busca dentro del archivo
que indicamos en CodeFile.
Guía #1: Introducción al desarrollo de aplicaciones Web con ASP.NET
Lenguaje de Programación II 6
Entorno de desarrollo para ASP.NET de Visual Studio
Al crear un nuevo desarrollo de sitio web haciendo uso de Visual Studio, la parte visual tiende a cambiar un poco
con relación a la mostrada en los desarrollos de programas desktop. En lo que respecta a la visualización de la
pantalla para formularios, podemos distinguir las siguientes secciones:
1. Barra estándar: contiene las funciones de ejecución del proyecto así como también la posibilidad de
seleccionar sobre que versión de HTML se procederá a realizar la compatibilidad
2. Cuadro de controles: contiene los diferentes tipos de controles que se pueden agregar a un WebForm
3. Vista de código de WebForm: contiene el marcado combinando elementos HTML junto con su
correspondiente control ASP. No es el código de programación como tal, sino que es la traducción de lo
que se presenta en la forma gráfica.
4. Vista de diseño: corresponde al área visual donde se permite arrastrar y colocar código de forma mucho
más fácil.
5. Pestañas de selección con la cual se puede cambiar de modalidad con respecto a las diferentes vistas de
presentación.
6. Explorador de soluciones
7. Cuadro de propiedades de cada control
Guía #1: Introducción al desarrollo de aplicaciones Web con ASP.NET
Lenguaje de Programación II 7
Para la realización de la guía de práctica se requerirá lo siguiente:
No. Requerimiento Cantidad
1 Guía de práctica #2: Introducción al desarrollo de aplicaciones Web con
ASP.NET
1
2 Computadora con Visual Studio 2012 instalado 1
3 Memoria USB o disco flexible 1
Ejercicio #1 – Ejercicio único que muestra una introducción a sitios web basados en ASP.NET.
Se muestra una simulación de un cajero ATM on-line, donde el usuario realiza transacciones con el saldo de
su cuenta posterior a una autenticación básica que se realiza en el sitio.
1. Proceda a ejecutar Visual Studio en su computadora. Una vez cargado el IDE, proceda a crear un nuevo
sitio web. Para eso, seleccione del menú Archivo la opción “Nuevo Proyecto”. Refiérase a la siguiente
imagen.
III. MATERIALES Y EQUIPO
IV. PROCEDIMIENTO
Guía #1: Introducción al desarrollo de aplicaciones Web con ASP.NET
Lenguaje de Programación II 8
2. Una vez realizado lo anterior, se abrira una ventana como la siguiente, donde deberá seleccionar el tipo de
sitio web a desarrollar. En esta ocasión, seleccione el nodo de Visual C# a la izquierda de la pantalla, del
listado central, seleccione Aplicación Web ASP.NET, en nombre coloque Cajero y haga de clic en botón
Aceptar.
3. En la ventana de plantillas de ASP.NET, seleccione aplicación Vacia y en Agregar carpetas y referencias
principales para, marque opcion MVC. Haga clic en Aceptar.
4. Con lo anterior habremos creado un nuevo sitio web ASP.NET MVC vacío, el cual tendrá el siguiente
aspecto:
Guía #1: Introducción al desarrollo de aplicaciones Web con ASP.NET
Lenguaje de Programación II 9
5. El diseñador de página nos permite arrastrar y colocar elementos, sin embargo, a diferencia de una ventana,
no podemos arrastrar libremente los controles (a menos que tenga posición absoluta). Esto lo debemos
realizar con hojas de estilo CSS, por lo que procederemos a crear una nueva carpeta en la raíz del sitio.
Para ello de clic derecho sobre el nombre del proyecto en el cuadro del explorador de soluciones. Se le mostrará un menú contextual, del cual deberá seleccionar la opción “Agregar” y luego “Nueva carpeta”.
A la nueva carpeta a crear en la raíz, asígnele nombre Content.
6. Una vez creada la carpeta “Content”, agregue los archivos proporcionados como recursos de la guía.
Para ello, arrastre la carpeta llamada css, hasta la carpeta “Content”; luego arrastre la carpeta
“imágenes”. La carpeta Content almacena las 2 subcarpetas, como se observa a continuación:
Guía #1: Introducción al desarrollo de aplicaciones Web con ASP.NET
Lenguaje de Programación II 10
7. Agregue un nuevo modelo a nuestro proyecto de nombre transaccion. Para ello, desde la ventana del
Explorador de soluciones, ubique y haga clic secundario sobre la carpeta Models. Se le mostrará un menú
contextual, del cual deberá seleccionar la opción Agregar y luego Clase. Redacte nombre de clase
transaccion y de clic en botón Agregar.
8. Dentro de la nueva clase transaccion, proceda a digitar el siguiente código:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace Cajero.Models{
/// Clase que se utiliza para gestionar las transacciones a realizar por el cajero ATM
public class transaccion
{
//Variables miembro de la clase de visibilidad privada
private String sNumeroTarjeta;
private double fSaldo;
//Constructor de clase que solo acepta un parametro de tipo String
public transaccion(String tarjeta)
{
sNumeroTarjeta = tarjeta;
fSaldo = 500;
}
Guía #1: Introducción al desarrollo de aplicaciones Web con ASP.NET
Lenguaje de Programación II 11
//Constructor de clase que acepta dos parametros: String y double.
//Pueden haber tantos constructores como se necesiten, pero c/definición debe tener
// una firma (lista y orden de tipos de datos en parametros) diferente.
public transaccion(String tarjeta, double saldo)
{
sNumeroTarjeta = tarjeta;
fSaldo = saldo;
}
//Implementa métodos (get y set) para acceder a campos de clase
public double getSaldo()
{
return fSaldo;
}
public void setSaldo(double saldo)
{
fSaldo = saldo;
}
public String getNumTarjeta()
{
return sNumeroTarjeta;
}
public void setNumTarjeta(String tarjeta)
{
sNumeroTarjeta = tarjeta;
}
public void transferenciaNacional(double monto)
{
fSaldo = fSaldo - monto;
}
public void transferenciaInternacional(double monto)
{
fSaldo = fSaldo - monto;
}
}
}
Guía #1: Introducción al desarrollo de aplicaciones Web con ASP.NET
Lenguaje de Programación II 12
9. Proceda a crear un nuevo controlador para nuestra pagina principal. Para ello, ubique en Explorador de
soluciones a la carpeta Controller y de clic secundario sobre la misma. Del menú contextual, seleccione
la opción Agregar y luego Controlador.
10. Cree un controlador vacío, seleccionando opción Controlador de MVC 5: en blanco. Llame a su controlador
HomeController. Refierase a la siguiente imagen.
11. Automáticamente, se agregará una clase de C# dentro de nuestra carpeta Controller. Dentro de la nueva
clase HomeController proceda a digitar el siguiente código:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Cajero.Models;
using System.Runtime.Remoting.Contexts;
Guía #1: Introducción al desarrollo de aplicaciones Web con ASP.NET
Lenguaje de Programación II 13
namespace Cajero.Controllers
{
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
return View();
}
[HttpPost]
public ActionResult Index(string sNumeroTarjeta,string sNumeroPIN)
{
double sSaldo;
string numero;
transaccion nuevaTransaccion = new transaccion(sNumeroTarjeta);
if (sNumeroTarjeta == "123456" && sNumeroPIN == "654321")
{
numero = nuevaTransaccion. getNumTarjeta();
sSaldo = nuevaTransaccion.getSaldo();
return Redirect("../Menu/Menu?sNumeroTarjeta=" + sNumeroTarjeta + "&sSaldo="+sSaldo);
}
else
{
// Si el numero de pin o de tarjeta no corresponde, entonces se
// procede a mostrar un mensaje de error
ViewBag.Error = "Error en número de tarjeta o número de PIN. Verifique";
return View();
}
}
}
}
Guía #1: Introducción al desarrollo de aplicaciones Web con ASP.NET
Lenguaje de Programación II 14
12. Ahora procederemos a crear una vista para nuestra página principal. Dentro de la clase HomeController,
localice y de clic secundario sobre su método View. Del menú contextual, seleccione la opción Agregar
vista…
13. En la ventana Agregar vista, deje el nombre por defecto (Index) para la Vista y el tipo de Plantilla
predeterminado Vacio (sin modelo), para hacer clic en Agregar.
Dentro de la ruta de carpetas View/Home, se agregará automáticamente a un archivo de C# con
extensión cshtml llamado Index.cshtml.
14.
Guía #1: Introducción al desarrollo de aplicaciones Web con ASP.NET
Lenguaje de Programación II 15
15. Abra el archivo index.cshtml y reemplace el código predeterminado por el siguiente código:
16. Ahora, procederemos a modificar la plantilla principal de nuestro proyecto.
Abra la carpeta View->Shared y ubique el archivo Layout.cshtml.
@{
ViewBag.Title = "Index";
}
<article class="middle">
<h2>Bienvenido</h2>
Innovando las transacciones en línea, ponemos a su disposición el cajero ATM online
donde podrá realizar sus pagos y transferencias en línea de una forma rápida y fácil
siempre con la calidad y la confianza que nos caracterizan. Realice sus transacciones
desde la comodidad de su hogar las 24 horas del día los 7 días de la semana.
<div class="credenciales">
<div class="bloque">
@Html.Label("Tarjeta #:", new { @class = "etiqueta" });
@Html.Editor("sNumeroTarjeta", "", new { @class = "control" });
</div>
<div class="clear"></div>
<div class="bloque">
@Html.Label("PIN:", new { @class = "etiqueta" });
@Html.Editor("sNumeroPIN", "", new { @class = "control" });
</div>
<div class="bloque">
<button type="submit" ID="btnEntrar" CssClass="submit" runat="server" onclick="location.href('@Url.Action("Index", "Home")')">Ingresar</button>
</div>
<div class="clear"></div>
</div>
@using (Html.BeginForm())
{
<div class="bloque">
<label class="error">@ViewBag.Error</label>
</div>
}
</article>
<article class="right">
<img src="~/Content/images/200253863-001.jpg" class="bannerRight" />
</article>
Guía #1: Introducción al desarrollo de aplicaciones Web con ASP.NET
Lenguaje de Programación II 16
17. Dentro de este archivo Layout.cshtml, reemplace el cod. predeterminado por el siguiente código:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - Transacciones Cajero ATM</title>
<link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
<link href="~/Content/css/style.css" rel="stylesheet" type="text/css" />
<link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="~/Scripts/modernizr-2.6.2.js"></script>
</head>
<body>
<form id="form1" method="post">
<section id="wrap">
<section id="top"></section>
<section id="content">
<header class="header">
<h1><a href="#">Cajero ATM</a></h1>
<h2>Transacciones online</h2>
</header>
<article class="breadcrumbs">@Html.ActionLink("INICIO","/")</article>
@RenderBody()
<article id="clear"></article>
</section>
<section id="bottom"></section>
</section>
</form>
Guía #1: Introducción al desarrollo de aplicaciones Web con ASP.NET
Lenguaje de Programación II 17
18. Ejecute la aplicación web y deberá mostrar lo siguiente en su navegador:
19. Tomando como base los pasos 9, 10 y 11 de este procedimiento, cree un nuevo controlador de nombre
MenuController.
Luego, digite el siguiente código (en la correspondiente clase MenuController):
<footer id="footer">
<a href="http://www.udb.edu.sv">Universidad Don Bosco</a>
</footer>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
</body>
</html>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace Cajero.Controllers
{
public class MenuController : Controller
{
// GET: Menu
public ActionResult Menu(string sNumeroTarjeta, double sSaldo)
{
ViewBag.sNumeroTarjeta = sNumeroTarjeta;
Guía #1: Introducción al desarrollo de aplicaciones Web con ASP.NET
Lenguaje de Programación II 18
20. Tome como base los pasos 12 al 14, para crear una nueva Vista llamada Menu, basada en el Controlador
MenuController creado en paso anterior.
Luego, digite el siguiente código en la correspondiente archivo Menu.cshtml de la nueva Vista.
21. De nuevo, repita los pasos 9 al 11 para agregar un nuevo controlador de nombre NacionalesController.
Luego, digite el siguiente código en la clase correspondiente (en archivo NacionalesController.cs).
ViewBag.sSaldo = sSaldo;
return View();
}
}
}
@{
ViewBag.Title = "Menu";
}
<article class="middle">
<h2>Bienvenido</h2>
Innovando las transacciones en línea, ponemos a su disposición el cajero ATM online
donde podrá realizar sus pagos y transferencias en línea de una forma rápida y fácil
siempre con la calidad y la confianza que nos caracterizan. Realice sus transacciones
desde la comodidad de su hogar las 24 horas del día los 7 días de la semana.
</article>
<nav class="right">
<ul>
<li>
@Html.ActionLink("Transferencias nacionales", "Nacionales", "Nacionales", new { sNumeroTarjeta = ViewBag.sNumeroTarjeta, sSaldo = ViewBag.sSaldo }, null)
</li>
<li>
@Html.ActionLink("Transferencias internacionales", "Menuopcion", "Home", new { opcion = 2 }, null)
</li>
<li>
@Html.ActionLink("Pagos de Servicios", "Menuopcion", "Home", new { opcion = 3 }, null)
</li>
<li>
@Html.ActionLink("Verificar saldos", "Menuopcion", "Home", new { opcion = 4 }, null)
</li>
</ul>
</nav>
using System;
using System.Collections.Generic;
Guía #1: Introducción al desarrollo de aplicaciones Web con ASP.NET
Lenguaje de Programación II 19
22. Tome como base los pasos 12 al 14 de este procedimiento, para crear una nueva vista para el controlador
anterior (NacionalesController), luego, digite el siguiente código en el archivo correspondiente
Nacionales.cshtml.
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Cajero.Models;
namespace Cajero.Controllers
{
public class NacionalesController : Controller
{
// GET: Nacionales
public ActionResult Nacionales(string sNumeroTarjeta, double sSaldo)
{
ViewBag.sNumeroTarjeta = sNumeroTarjeta;
ViewBag.sSaldo = sSaldo;
return View();
}
[HttpPost]
public ActionResult Nacionales(string sNumeroTarjeta, double sSaldo,double cantidad)
{
double Saldo;
//Se crea una instancia de la clase transacción y se le envían dos parámetros
transaccion nuevaTransaccion = new transaccion(sNumeroTarjeta, sSaldo);
if (cantidad > 0)
{
nuevaTransaccion.transferenciaNacional(cantidad);
}
sSaldo = nuevaTransaccion.getSaldo();
ViewBag.sNumeroTarjeta = nuevaTransaccion.getNumTarjeta();
ViewBag.sSaldo = nuevaTransaccion.getSaldo();
return Redirect("../Menu/Menu?sNumeroTarjeta=" + sNumeroTarjeta + "&sSaldo=" + sSaldo);
}
}
}
@{
ViewBag.Title = "Nacionales";
}
@{
var bancos = new List<SelectListItem>(){
Guía #1: Introducción al desarrollo de aplicaciones Web con ASP.NET
Lenguaje de Programación II 20
new SelectListItem { Text = "Banco Agrícola", Value = "0" },
new SelectListItem { Text = "Banco de América Central", Value = "1" },
new SelectListItem { Text = "Banco Davivienda", Value = "2", Selected = true },
new SelectListItem { Text = "Banco Cuscatlan", Value = "3" }
};
}
<article class="middle">
<h2>Bienvenido</h2>
Innovando las transacciones en línea, ponemos a su disposición el cajero ATM online
donde podrá realizar sus pagos y transferencias en línea de una forma rápida y fácil
siempre con la calidad y la confianza que nos caracterizan. Realice sus transacciones
desde la comodidad de su hogar las 24 horas del día los 7 días de la semana.
<div class="credenciales">
<div class="bloque">
<label class = "etiqueta">Tarjeta #:</label>
<label class="control">@ViewBag.sNumeroTarjeta</label>
</div>
<div class="clear"></div>
<div class="bloque">
<label class="etiqueta">Saldo:</label>
<label class="control">@ViewBag.sSaldo</label>
</div>
<div class="clear"></div>
<div class="bloque">
@Html.DropDownList("misbancos",bancos);
</div>
<div class="bloque">
@Html.Label("Cantidad:", new { @class = "etiqueta" });
@Html.Editor("cantidad", "", new { @class = "control" });
</div>
<div class="bloque">
<button type="submit" ID="btnEntrar" CssClass="submit" runat="server" onclick="location.href('@Url.Action("Nacionales", "Nacionales")')">Ingresar</button>
</div>
<div class="clear"></div>
</div>
@using (Html.BeginForm())
{
<div class="bloque">
<label class="error">@ViewBag.Error</label>
</div>
}
</article>
Guía #1: Introducción al desarrollo de aplicaciones Web con ASP.NET
Lenguaje de Programación II 21
23. Para probar los cambios realizados al sitio web, vaya al Explorador de soluciones y abra la carpeta Views -
>Home. Seleccione y abra al archivo de la Vista de inicio (Index.cshtml).
Luego, seleccione el navegador de su preferencia y ejecute el sitio web.
24. Para identificar el usuario y contraseña para acceder a la siguiente Vista del sit io, abra al archivo de la
clase HomeController y analice su cod. fuente.
Cuando acceda con las credenciales esperadas, la próxima Vista a cargar será la de Menu, asi:
Guía #1: Introducción al desarrollo de aplicaciones Web con ASP.NET
Lenguaje de Programación II 22
25. Del menú de enlaces, seleccione la opción Transferencias nacionales, para comprobar cómo funcionan las
Vistas de esta opción.
26. Tomando como base nuestra página de “Nacionales”, crear un nuevo Controlador y Vista para las
transferencias internacionales. Debe funcionar tal como se muestran en las imágenes a continuación:
Guía #1: Introducción al desarrollo de aplicaciones Web con ASP.NET
Lenguaje de Programación II 23
27. Realizar una página y un controlador para mostrar el saldo de nuestra cuenta, tal como se muestra en la
imagen siguiente (la opción Verificar saldos):
28. Ahora, proceda a ejecutar la aplicación y realice las respectivas transacciones verificando la integridad de
la información.
1. Cree los archivos y el código necesario para que la aplicación tenga habilitada la opción de Pago de
Servicios, creando una página que contenga un control de lista desplegable con las opciones: Energía
Eléctrica, Colegiaturas, Servicios de Alcantarillado, Servicios de Telefonía. Además, una caja de texto
para el ingreso del monto.
2. Una vez el usuario realiza el pago del servicio, descontar dicho monto del saldo total y mostrarle al usuario
el nombre del servicio cancelado, el monto cancelado y el nuevo saldo.
1. Thierry GROUSSARD. (2013). C# 5: Los fundamentos del lenguaje – Desarrollar con Visual Studio 2012 .
Barcelona: ENI.
V. DISCUSIÓN DE RESULTADOS
VI. BIBLIOGRAFÍA