universidad don bosco facultad de estudios … · 2020. 1. 13. · coordinacion de computaciÓn...

23
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

Upload: others

Post on 01-Sep-2020

0 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS … · 2020. 1. 13. · COORDINACION DE COMPUTACIÓN UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS TECNOLÓGICOS CICLO I Lugar 2020 GUIA DE

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

Page 2: UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS … · 2020. 1. 13. · COORDINACION DE COMPUTACIÓN UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS TECNOLÓGICOS CICLO I Lugar 2020 GUIA DE

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

Page 3: UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS … · 2020. 1. 13. · COORDINACION DE COMPUTACIÓN UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS TECNOLÓGICOS CICLO I Lugar 2020 GUIA DE

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

Page 4: UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS … · 2020. 1. 13. · COORDINACION DE COMPUTACIÓN UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS TECNOLÓGICOS CICLO I Lugar 2020 GUIA DE

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>

Page 5: UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS … · 2020. 1. 13. · COORDINACION DE COMPUTACIÓN UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS TECNOLÓGICOS CICLO I Lugar 2020 GUIA DE

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.

Page 6: UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS … · 2020. 1. 13. · COORDINACION DE COMPUTACIÓN UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS TECNOLÓGICOS CICLO I Lugar 2020 GUIA DE

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

Page 7: UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS … · 2020. 1. 13. · COORDINACION DE COMPUTACIÓN UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS TECNOLÓGICOS CICLO I Lugar 2020 GUIA DE

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

Page 8: UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS … · 2020. 1. 13. · COORDINACION DE COMPUTACIÓN UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS TECNOLÓGICOS CICLO I Lugar 2020 GUIA DE

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:

Page 9: UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS … · 2020. 1. 13. · COORDINACION DE COMPUTACIÓN UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS TECNOLÓGICOS CICLO I Lugar 2020 GUIA DE

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:

Page 10: UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS … · 2020. 1. 13. · COORDINACION DE COMPUTACIÓN UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS TECNOLÓGICOS CICLO I Lugar 2020 GUIA DE

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;

}

Page 11: UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS … · 2020. 1. 13. · COORDINACION DE COMPUTACIÓN UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS TECNOLÓGICOS CICLO I Lugar 2020 GUIA DE

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;

}

}

}

Page 12: UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS … · 2020. 1. 13. · COORDINACION DE COMPUTACIÓN UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS TECNOLÓGICOS CICLO I Lugar 2020 GUIA DE

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;

Page 13: UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS … · 2020. 1. 13. · COORDINACION DE COMPUTACIÓN UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS TECNOLÓGICOS CICLO I Lugar 2020 GUIA DE

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

}

}

}

}

Page 14: UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS … · 2020. 1. 13. · COORDINACION DE COMPUTACIÓN UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS TECNOLÓGICOS CICLO I Lugar 2020 GUIA DE

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.

Page 15: UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS … · 2020. 1. 13. · COORDINACION DE COMPUTACIÓN UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS TECNOLÓGICOS CICLO I Lugar 2020 GUIA DE

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>

Page 16: UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS … · 2020. 1. 13. · COORDINACION DE COMPUTACIÓN UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS TECNOLÓGICOS CICLO I Lugar 2020 GUIA DE

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>

Page 17: UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS … · 2020. 1. 13. · COORDINACION DE COMPUTACIÓN UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS TECNOLÓGICOS CICLO I Lugar 2020 GUIA DE

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;

Page 18: UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS … · 2020. 1. 13. · COORDINACION DE COMPUTACIÓN UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS TECNOLÓGICOS CICLO I Lugar 2020 GUIA DE

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;

Page 19: UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS … · 2020. 1. 13. · COORDINACION DE COMPUTACIÓN UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS TECNOLÓGICOS CICLO I Lugar 2020 GUIA DE

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>(){

Page 20: UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS … · 2020. 1. 13. · COORDINACION DE COMPUTACIÓN UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS TECNOLÓGICOS CICLO I Lugar 2020 GUIA DE

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>

Page 21: UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS … · 2020. 1. 13. · COORDINACION DE COMPUTACIÓN UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS TECNOLÓGICOS CICLO I Lugar 2020 GUIA DE

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:

Page 22: UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS … · 2020. 1. 13. · COORDINACION DE COMPUTACIÓN UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS TECNOLÓGICOS CICLO I Lugar 2020 GUIA DE

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:

Page 23: UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS … · 2020. 1. 13. · COORDINACION DE COMPUTACIÓN UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS TECNOLÓGICOS CICLO I Lugar 2020 GUIA DE

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