Está en la página 1de 23

UNIVERSIDAD DON BOSCO

FACULTAD DE ESTUDIOS TECNOLÓGICOS


COORDINACION DE COMPUTACIÓN
GUIA DE LABORATORIO #1
Nombre de la Práctica: Introducción al desarrollo de aplicaciones Web con ASP.NET MVC
CICLO I Lugar de Ejecución: Centro de cómputo
2020 Tiempo Estimado: 2 horas con 30 minutos
Materia: Lenguaje de Programación II

I. OBJETIVOS

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#.

II. INTRODUCCIÓN TEÓRICA

¿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


Guía #1: Introducción al desarrollo de aplicaciones Web con ASP.NET

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
losnavegadores 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

Lenguaje de Programación II 2
Guía #1: Introducción al desarrollo de aplicaciones Web con ASP.NET

System.Web.Configuration.PagesSection controla todos los elementos secundarios de la sección de


configuración pages.

<?xml version="1.0" encoding="us-ascii"?>


<configuration>

<!-- Configuration section-handler declaration area. -->


<configSections>
<sectionGroup name="system.web"
type="System.Web.Configuration.SystemWebSectionGroup, System.Web,
Version=2.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a">
<section
name="pages"
type="System.Web.Configuration.PagesSection, System.Web,
Version=2.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a"
/>
<!-- Other <section /> elements. -->
</sectionGroup>
<!-- Other <sectionGroup /> and <section /> elements. -->
</configSections>

<!-- 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>

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:

<%@ page language="C#" %>


<script runat="server">

Lenguaje de Programación II 3
Guía #1: Introducción al desarrollo de aplicaciones Web con ASP.NET

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>

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.

Lenguaje de Programación II 4
Guía #1: Introducción al desarrollo de aplicaciones Web con ASP.NET

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.

Lenguaje de Programación II 5
Guía #1: Introducción al desarrollo de aplicaciones Web con ASP.NET

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

Lenguaje de Programación II 6
Guía #1: Introducción al desarrollo de aplicaciones Web con ASP.NET

III. MATERIALES Y EQUIPO

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 1
ASP.NET
2 Computadora con Visual Studio 2012 instalado 1
3 Memoria USB o disco flexible 1

IV. PROCEDIMIENTO

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.

Lenguaje de Programación II 7
Guía #1: Introducción al desarrollo de aplicaciones Web con ASP.NET

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:
Lenguaje de Programación II 8
Guía #1: Introducción al desarrollo de aplicaciones Web con ASP.NET

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:

Lenguaje de Programación II 9
Guía #1: Introducción al desarrollo de aplicaciones Web con ASP.NET

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;
}

Lenguaje de Programación II 10
Guía #1: Introducción al desarrollo de aplicaciones Web con ASP.NET

//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;
}
}
}

Lenguaje de Programación II 11
Guía #1: Introducción al desarrollo de aplicaciones Web con ASP.NET

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;

Lenguaje de Programación II 12
Guía #1: Introducción al desarrollo de aplicaciones Web con ASP.NET

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();
}
}
}
}

Lenguaje de Programación II 13
Guía #1: Introducción al desarrollo de aplicaciones Web con ASP.NET

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.

14. Dentro de la ruta de carpetas View/Home, se agregará automáticamente a un archivo de C# con


extensión cshtml llamado Index.cshtml.

Lenguaje de Programación II 14
Guía #1: Introducción al desarrollo de aplicaciones Web con ASP.NET

15. Abra el archivo index.cshtml y reemplace el código predeterminado por el siguiente código:
@{
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>

16. Ahora, procederemos a modificar la plantilla principal de nuestro proyecto.


Abra la carpeta View->Shared y ubique el archivo Layout.cshtml.

Lenguaje de Programación II 15
Guía #1: Introducción al desarrollo de aplicaciones Web con ASP.NET

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>

Lenguaje de Programación II 16
Guía #1: Introducción al desarrollo de aplicaciones Web con ASP.NET

<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>

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):
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;

Lenguaje de Programación II 17
Guía #1: Introducción al desarrollo de aplicaciones Web con ASP.NET

ViewBag.sSaldo = sSaldo;
return View();
}
}
}

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.
@{
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>

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).
using System;
using System.Collections.Generic;

Lenguaje de Programación II 18
Guía #1: Introducción al desarrollo de aplicaciones Web con ASP.NET

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);

}
}
}

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.
@{
ViewBag.Title = "Nacionales";
}

@{
var bancos = new List<SelectListItem>(){

Lenguaje de Programación II 19
Guía #1: Introducción al desarrollo de aplicaciones Web con ASP.NET

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>

Lenguaje de Programación II 20
Guía #1: Introducción al desarrollo de aplicaciones Web con ASP.NET

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:

Lenguaje de Programación II 21
Guía #1: Introducción al desarrollo de aplicaciones Web con ASP.NET

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:

Lenguaje de Programación II 22
Guía #1: Introducción al desarrollo de aplicaciones Web con ASP.NET

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.

V. DISCUSIÓN DE RESULTADOS

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.

VI. BIBLIOGRAFÍA

1. Thierry GROUSSARD. (2013). C# 5: Los fundamentos del lenguaje – Desarrollar con Visual Studio 2012 .
Barcelona: ENI.

Lenguaje de Programación II 23

También podría gustarte