Autor Tema: Trabajando en WebForms  (Leído 922 veces)

0 Usuarios y 1 Visitante están viendo este tema.

Desconectado Jackass

  • Moderator
  • *
  • Mensajes: 49
  • Agradecimientos: 25
  • Developer.-
  • Cronica: : C4 a H5
  • Revision: -
  • S.O: Windows Server 2008
  • Serverpack : aCis;L2Off
Trabajando en WebForms
« on: Junio 28, 2014, 08:43:54 pm »
Lo primero que haremos el dia de hoy, de una forma muy basica, sin un patron de diseño ni explicando que es un webservice es trabajar un poco con las webforms.

¿ Que corno son las webforms ?
Es un framework que usa .net para trabajar paginas webs, como formularios, en el cual la pagina se asemeja mas a una aplicacion de escritorio. Tiene muchas criticas, pero es lo mas basico para empezar hoy en dia todo el mundo quiere trabajar en MVC, pero no es mi rama aun.


Primero creamos un nuevo proyecto de tipo website (file -> new -> web site). Elijan las web forms (ASP .NET Web Forms Site o en español ASP .NET Sitio de WebForms). Es importante que no elijan el Empty, por que lo primero que quiero que vean es como funciona mas o menos el sitio ustedes mismos. Lo que haremos en esta primera introduccion sera un contador y el pasaje de datos entre sitios webs (cosas basicas).

Antes de empezar apreten f5 y vean que el sitio que trae por default el visual esta completo. trae soporte para login y cuentas ademas de otras cosas. Una vez vean como trabaja el codigo .cs (extension de codigo C#) y el .aspx (extension que contiene el HTML del sitio web) podran continuar. No los ayudo en esto porque sino no van a aprender absolutamente nada.

Contador Web:

En los sitios webs, la informacion no se puede lograr como en una aplicacion de windows. Los sitios web en si, no ocupan memoria temporal, seria algo mas como "parcial". Ya que ellos la pierden salvo que uses ciertas herramientas.

Al que sepa, lo invito a hacer un contador comun, como si fuera una aplicacion de escritorio y intente comprender el por que no funciona. Al que no, lo invito a trabajar conmigo directamente y hacerlo funcionar  ;D.

Lo primero que vamos a hacer es ir a Default.aspx.cs y en el metodo Page_Load escribimos lo siguiente:

Código: [Seleccionar]
Response.Redirect("~/SitioAdminsPro.aspx");
Lo que lograremos con eso es que al cargar la pagina web se redirija a ese sitio. Logicamente, aun no lo creamos, pero es el paso siguiente. Click derecho sobre el proyecto agregar -> Web Form (o apreten nuevo Item y luego seleccionen la webForm). Ponganla en la carpeta root del proyecto, si quieren colocarla en otra carpeta solo cambienle la ruta al metodo que hicimos anteriormente. Por ejemplo, yo quiero que este en la carpeta "AdminsPro" y al redirect lo escribimos como:

Código: [Seleccionar]
Response.Redirect("~/AdminsPro/SitioAdminsPro.aspx");
Una vez creado el nuevo WebForm veran que crea una plantilla aspx asi:

Código: [Seleccionar]
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="AdminsPro.aspx.cs" Inherits="AdminsPro" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
   
    </div>
    </form>
</body>
</html>

es basicamente un html basico. Exceptuando el runat="server". Lo que esta haciendo eso, es decirle que al control Form lo maneja directamente el servidor (en donde se encuentra la pagina web) y que este puede editarlo a gusto. Algo que no mencione anteriormente de forma explicita fue que no pueden trabajar en WebForms si no tienen 1 form que corra desde servidor, debido a que el framework esta hecho de esta manera.
Como paso siguiente agregaremos 1 Label (en html seria span) y un Button (en html seria un type submit). Para agregarlos ponganse en el espacio que les dejo el visual al crear la pagina y empiezen a escribir "<asp:Label" veran que visual les dira como terminar la frase. Si apretan enter alli les escribira casi todo. Digo casi porque hay cosas que obligatoriamente deben escribir ustedes.
El Label y el textbox deben quedar de la siguiente manera:

Código: [Seleccionar]
<asp:Label runat="server" ID="label_contador" Text="No has hecho un conteo"></asp:Label>
        <br />
        <asp:Button runat="server" ID="botonContador" Text="Cuenta 1" />
El br fue cosa de ordenamiento mia, hace un salto de linea (como un enter en word) si no quieren ponerlo, no lo escriban.

Que es el ID ? es el nombre que le asignamos a este control, es unico e irrepetible.
Text ? Es el texto que le ponemos por defecto, puede no estar especificado. En mi caso lo especifique.

Si les interesa saber que otras cosas tienen estos dos controles (se llaman controles a todo tipo de operativo que se pueda manejar) hagan click sobre alguno y a la derecha la pantalla propiedades tienen todo lo que buscan.

Si apretan F5 veran que los lleva a una pagina vacia con estas dos cosas. Si apretan en el boton no hara nada. Claro, no tiene ninguna accion asociada ni programada. Lo que haremos es volver al aspx y escribir onclick= y cuando salten las sugerencias de visual studio apretar donde dice "crear nuevo evento". Dejo una imagen por si no entienden lo que estoy diciendo:



en mi caso quedo asi: OnClick="botonContador_Click" este nombre puede variar dependiendo de la id que le pongan.

Una vez hecho esto, iremos al aspx.cs (el codigo C#) el cual lo pueden encontrar debajo del nombre de su aspx (hagan click en la flecha)



alli veran la pantalla con el codigo C#. Como minimo deben tener el metodo Page_Load con sus llaves y dentro vacio, y por otro lado el evento del click que acabamos de crear hace un rato. Lo primero que haremos es crear una propiedad la cual nos permitiria contar. Por lo tanto, por arriba del Page_Load colocamos esto:

Código: [Seleccionar]
private long YoCuento
    {
        get
        {
            if (ViewState["Contador"] == null)
                return 0;

            return long.Parse(ViewState["Contador"].ToString());
        }
        set
        {
            ViewState["Contador"] = value;
        }
    }

Private ? Indica que la propiedad o lo que estemos escribiendo va a ser privado. Por ende solo la misma clase en la que se esta escribiendo puede acceder a el (clase lease como la pagina web en este caso)

long ? Es una unidad de medida que usa 64 bits y es numerica. No es de gran importancia, solo deben saber que acepta numeros.

ViewState["NombreView"] ? Es un mecanismo que almacena datos de la pagina web dentro de un mismo sitio. Al momento en que hagan un redirect o un link a otra pagina, este pierde todos los datos. Unicamente sirve como almacenamiento de la pagina actual.

value ? Es el valor que se le asigne (lease set como igualar x = 1. En este caso YoCuento = 1 por ende el viewstate vale 1)

Una vez hecho esto, vamos al evento que creamos del boton. Una vez alli escribimos esto:

Código: [Seleccionar]
YoCuento++;
        label_contador.Text = "Me has apretado " + YoCuento + " veces.";

YoCuento++ ? Suma 1 al valor de YoCuento. No importa cuando, cada vez que se ejecute suma 1. En otras palabras es un contador.

label_contador.Text ? Toma el label que creamos hace un rato, y le modifica el texto por lo que escribimos a la derecha del =.

Aviso: Estos IDS pueden variar, segun que nombre le hayan puesto ustedes.

Lo que haremos ahora es hacer F5. (Data: Si van a ponerle que ejecute con chrome, para que termine de debugear apreten Cntrl + Shift + F5 o busquen el boton stop).

Y walah! funciona perfectamente. Se dieron cuenta de que cada vez que apretan el boton, la pagina recarga ? Eso es porque se hace PostBack. Que es el postback ? Tiene que llamar al servidor cada vez que vos hagas click para tomar el valor y leer la accion del boton y a la vez vuelve a llamar al metodo Page_Load, por ende cada vez que uses un boton o algo del tipo runat="server" el servidor hara postback. Es esto malo ? No, por ahora usenlo asi. La unica solucion a esto es usar javascript o el framework de MVC.

Por hoy termine, en la semana hare como pasar este contador a otra pagina o simplemente pueden intentarlo ustedes y comentarme como les fue.

Saludos!

Si necesitas un developer, contacta a mi skype.