Guia 1
Guia 1
Guia 1
I. OBJETIVOS
¿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.
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
Adicionalmente a la programación web es necesario tener algún tipo de soporte para el almacenamiento de
datos (SQL Server, Oracle, etc.).
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
</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:
Lenguaje de Programación II 3
Guía #1: Introducción al desarrollo de aplicaciones Web con ASP.NET
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.
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:
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
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
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.
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.
Lenguaje de Programación II 10
Guía #1: Introducción al desarrollo de aplicaciones Web con ASP.NET
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.
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>
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>
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
<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