miércoles, 30 de abril de 2014

APLICACIONES CON ASP.NET

 ASP.NET

Es un modelo de desarrollo Web unificado creado por Microsoft para el desarrollo de sitios y aplicaciones web dinámicas con un mínimo de código. ASP.NET forma parte de .NET Framework que contiene las librerías necesarias para la codificación. Se pueden usar distintos lenguajes de programación para realizar aplicaciones web en ASP.NET, pero nosotros nos vamos a enfocar en el lenguaje C# (C Sharp) que es el más utilizado para este tipo de desarrollos.

Requisitos de desarrollo ASP.NET

Para desarrollar aplicaciones ASP.NET, es necesario tener:
  • 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 en muchos casos contar con algún soporte para el almacenamiento de datos. Lo ideal es contar con un motor de base de datos (SQL Server, Oracle, etc.) pero para esta guía vamos a persistir la información en soportes que estén al alcance de todos.

Editor de código

Para programar páginas en ASP.NET alcanza con tener un editor de texto estándar (Notepad, Notepad++) pero existen herramientas con un entorno de desarrollo integrado (IDE) que nos facilita el acceso a las librerías del Framework y nos brinda un entorno amigable para la creación de aplicaciones web en ASP.NET como el Visual Studio. En esta guía utilizaremos este IDE para abordar los ejemplos.
Podemos descargar la versión Express en: http://www.microsoft.com/express/Downloads/.

.NET Framework

Es un conjunto de clases que actuarán de soporte de las aplicaciones ASP.NET que tengamos instaladas en nuestro equipo. Es de distribución gratuita y se puede descargar desde la página de Microsoft. (Incluido al Visual Studio .NET).

Servidores Web

Una aplicación ASP.NET además de contar con el .NET Framework instalado necesita de un Servidor Web. Vamos a utilizar el IIS (Internet Information Server). El IIS viene como complemento de instalación de Windows; si dentro de nuestros servicios en ejecución no contamos con Internet Information Server debemos agregarlo al equipo donde instalaremos nuestras aplicaciones.
?
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<%--Directiva--%>
<%@ Page Language="C#" %>
<%--Codigo en linea--%>
<script runat="server">
protected void btnAceptar_Click(object sender, EventArgs e)
{
    lblResultado.Text = txtNombre.Text;
    txtNombre.Text = string.Empty;
}
</script>
<%--HTML para dibujar los controles en pantalla--%>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Mi primera aplicacion - Maestros del Web</title>
</head>
<body>
<form id="form1" runat="server">
    <div>
        <asp:TextBox ID="txtNombre" runat="server"></asp:TextBox>
        <asp:Button ID="btnAceptar" runat="server" Text="Aceptar"
        onclick="btnAceptar_Click"/>
        <br/>
        <asp:Label ID="lblResultado" runat="server" Text="[Resultado]"></asp:Label>
    </div>
</form>
</body>
</html>

¿Cómo probamos nuestra primera aplicación?

1.- Abrimos el Bloc de Notas, copiamos el código.
2.- Guardamos el archivo con el nombre Default.aspx
3.- Creamos nuestro espacio virtual en el IIS
a.- Abrimos el IIS y creamos un nuevo directorio virtual.
b.- Ingresamos el nombre que tendrá nuestra aplicación web.
c.- Indicamos el directorio donde guardamos nuestra pagina web Default.aspx.
Seguimos hasta el final para que quede creada nuestro directorio virtual. Listo, ya tenemos nuestra primera aplicación ASP.NET instalada para probar. Ahora abrimos nuestro browser y escribimos en la barra de dirección: http://localhost/MiPrimeraAplicacionWeb/Default.aspx

Estructura de nuestra aplicación web.

La estructura de nuestra primera aplicación es la más simple.
1.- Contiene una directiva:

<%@ Page Language="C#" %>
Le estamos indicando que la pagina usará lenguaje C# (C Sharp)
2.- Código en línea:
?
1
2
3
4
5
6
7
<script runat="server">
protected void btnAceptar_Click(object sender, EventArgs e)
{
    lblResultado.Text = txtNombre.Text;
    txtNombre.Text = string.Empty;
}
</script>
El tag script está indicando que el código se ejecutará del lado del servidor. En esta porción del código van las acciones que ejecutaremos en nuestra aplicación; en este caso sólo tenemos una única acción asociada al botón Aceptar.
3.- Código HTML para la creación de objetos en pantalla.
?
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Mi primera aplicacion - Maestros del Web</title>
</head>
<body>
<form id="form1" runat="server">
    <div>
        <asp:TextBox ID="txtNombre" runat="server"></asp:TextBox>
        <asp:Button ID="btnAceptar" runat="server" Text="Aceptar" onclick="btnAceptar_Click"/>
        <br/>
        <asp:Label ID="lblResultado" runat="server" Text="[Resultado]"></asp:Label>
    </div>
</form>
</body>
</html>

En pantalla vemos tres objetos

  1. Un TextBox llamado txtNombre (Para ingresar un nombre).
  2. Un Botón llamado btnAceptar y con el evento OnClick definido (Ejecutamos la acción de pegar contenido).
  3. Un label de resultados llamado lblResultado. (Mostramos los resultados luego de ejecutar el evento del botón).

Creación de un proyecto ASP.NET con Visual Studio

1.- Abrimos Visual Studio .NET y creamos un nuevo proyecto web.
2.- Seleccionamos el tipo de proyecto que deseamos realizar.
a.- Seleccionamos ASP.NET Web Site,
b.- Indicamos la ruta donde vamos a guardar el proyecto: c:\MaestrosDelWeb\GuiaASPNET
c.- Determinamos el lenguaje que vamos a utilizar. Visual C#.

Por último presionamos el botón OK para crear la solución.
3.- Una vez creada la solución el IDE genera el primer template.
En la pantalla de edición de código copiamos y pegamos el código anterior y ya tenemos nuestra primera página web dentro del entorno de desarrollo integrado.
Para ejecutar la aplicación dentro del entorno de desarrollo presionamos la tecla F5 y nos pregunta si deseamos habilitar el modo de debug. Presionamos OK.
A continuación se abre nuestro Browser predeterminado ejecutando la aplicación en modo debug. Al trabajar con un entorno de desarrollo no es necesario crear un espacio virtual en el IIS ya que la misma aplicación se encarga de preparar el ambiente.
JAVASCRIPT
Agregaremos funcionalidad JavaScript a la ya codificada en C#. Una forma sencilla de implementar JavaScript en ASP.NET es agregando un atributo al control del servidor que queremos que ejecute una función JavaScript.
Dentro del TAG HEAD escribimos lo siguiente.
?
1
2
3
4
5
6
7
<%--Codigo JavaScript--%>
<script language="javascript" type="text/javascript">
function fnAceptar() {
    alert('El Contenido del TextBox es: ' + document.getElementById("txtNombre").value);
    document.getElementById("txtNombre").value = '';
}
</script>
Ahora necesitamos indicarle a ASP.NET que necesitamos ejecutar esa función desde el botón.
?
1
2
3
4
5
6
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
    this.btnAceptar.Attributes.Add("OnClick", "javascript:return fnAceptar();");
}
</script>
Aquí asignamos la función fnAceptar al evento OnClick del botón. El código completo quedaría de esta forma.
?
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<%--Directiva--%>
<%@ Page Language="C#" %>
<%--Codigo en linea--%>
  
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
    this.btnAceptar.Attributes.Add("OnClick", "javascript:return fnAceptar();");
}
</script>
 
<%--HTML para dibujar los controles en pantalla--%>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Mi primera aplicacion - Maestros del Web</title>
    <%--Codigo JavaScript--%>
    <script language="javascript" type="text/javascript">
    function fnAceptar() {
        alert('El Contenido del TextBox es: ' + document.getElementById("txtNombre").value);
        document.getElementById("txtNombre").value = '';
    }
    </script>
</head>
<body>
<form id="form1" runat="server">
    <div>
        <asp:TextBox ID="txtNombre" runat="server"></asp:TextBox>
        <asp:Button ID="btnAceptar" runat="server" Text="Aceptar"/>
        <br/>
        <asp:Label ID="lblResultado" runat="server" ></asp:Label>
    </div>
</form>
</body>
</html>
Hasta el momento vimos como conviven código C# y JavaScript en un mismo archivo ASPX. Ya es hora de separar el código en distintos archivos para mejorar el mantenimiento y lectura. Vamos a agregar un archivo JavaScript a nuestro proyecto ASPNET, mover el código JavaScript a ese archivo y referenciarlo desde nuestra página aspx.
Llamaremos a nuestro archivo JSCode.js. Abrimos el archivo y copiamos el código JavaScript que inicialmente escribimos en nuestra página aspx.
Ahora eliminamos el código JavaScript de la página aspx y hacemos referencia al archivo .jsdentro del tag HEAD. De esta forma evitamos llenar nuestro aspx con código que hace difícil la lectura. También se puede separar el código C# de una forma similar al que acabamos de ver con JavaScript, pero lo veremos en unos capítulos más adelante.

ClientScript.RegisterStartupScript

Una forma de usar código JavaScript desde una página ASP.NET es utilizando el métodoRegisterStartupScript de la clase ClientScript, que nos permite registrar un script en tiempo de ejecución para su posterior utilización.
Ejemplo: Creamos la función en C#
?
01
02
03
04
05
06
07
08
09
10
11
12
13
14
private void RegistrarScript()
{
    const string ScriptKey = "ScriptKey";
    if (!ClientScript.IsStartupScriptRegistered(this.GetType(), ScriptKey))
    {
        StringBuilder fn = new StringBuilder();
        fn.Append("function fnAceptar() { ");
        fn.Append("alert('El Contenido del TextBox es: ' + document.getElementById(\"txtNombre\").value); ");
        fn.Append("document.getElementById(\"txtNombre\").value = '';");
        fn.Append("}");
        ClientScript.RegisterStartupScript(this.GetType(),
ScriptKey, fn.ToString(), true);
    }
}
Es la misma función usada anteriormente fnAceptar() ahora registrándola desde ASP.NET. Luego hacemos la llamada a la función desde el Page_Load().
RegistrarScript();
Sin necesidad de un archivo .js ni escribir el código JavaScript en la sección de HTML. Código completo:
?
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<%--Directiva--%>
<%@ Page Language="C#" %>
<%--Codigo en linea--%>
  
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        this.btnAceptar.Attributes.Add("OnClick", "javascript:return fnAceptar();");
        RegistrarScript();
    }
}
private void RegistrarScript()
{
    const string ScriptKey = "ScriptKey";
    if (!ClientScript.IsStartupScriptRegistered(this.GetType(), ScriptKey))
    {
        StringBuilder fn = new StringBuilder();
        fn.Append("function fnAceptar() { ");
        fn.Append("alert('El Contenido del TextBox es: ' + document.getElementById(\"txtNombre\").value); ");
        fn.Append("document.getElementById(\"txtNombre\").value = '';");
        fn.Append("}");
        ClientScript.RegisterStartupScript(this.GetType(),
        ScriptKey, fn.ToString(), true);
    }
}
</script>
<%--HTML para dibujar los controles en pantalla--%>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Mi primera aplicacion - Maestros del Web</title>
</head>
<body>
<form id="form1" runat="server">
    <div>
        <asp:TextBox ID="txtNombre" runat="server"></asp:TextBox>
        <asp:Button ID="btnAceptar" runat="server" Text="Aceptar"/>
        <br/>
        <asp:Label ID="lblResultado" runat="server" ></asp:Label>
    </div>
</form>
</body>
 
</html>

Publicado por en No hay comentarios:
Suscribirse a: Comentarios (Atom)