David Freire

Alumno:

David Freire

Profesor:

Ing. Francisco Naranjo

Nivel:

Noveno Semestre

Fecha:

20 de mayo de 2014

Centro de Apoyo:

Puyo

Periodo:

2014

Ingeniería

Sistemas

Universidad Tecnológica Indoamérica

TEMAS ACTUALES II

TEMAS ACTUALES II

Ingeniería Sistemas Página 2 David Freire Noveno Semestre

Estos formularios es una de las características más relevantes que podemos encontrar EN

ASP.NET, ya que la misma nos ofrece un nuevo modelo al momento de programar debido a

se puede generar contenidos mucho más dinámicos mediante una forma más sencilla.

Sustituyen y vienen integrado los HTML en el entorno de programación ASP.NET.

Como ventaja podemos mencionar que estos Web Forms tiene una programación la cual es

muy similar a la que estamos acostumbrados a utilizar en Visual Basic, donde se puede

realizar el tratamiento de eventos del cliente desde código del servidor.

Ventajas de los Web Forms:

Podemos reutilizar controles de interfaz de usuario que encapsulan su funcionalidad.

Nos ofrece un código más limpio y claro en la página.

Se puede construir todo el interfaz del Web Form a través de herramientas o entornos

de desarrollo.

Podemos integrar el tratamiento de eventos del cliente con el código que

correspondiente del servidor.

Se realiza el mantenimiento del estado del formulario, el cual se lo realiza de forma

automática.

Nos ofrece una mayor separación entre la lógica de la aplicación y al representación de

la misma.

Podemos usar un gran conjunto de controles de servidor.

Usando la etiqueta <FORM> como las que se usa en el lenguaje HTML, podemos crear un

formulario, pero debe poseer la propiedad “Runat”, con el valor del server.

<form id=”webform” method=”post” runat=”server”>

</form>

Integrado en los web forms, podemos contar con un sin número de controles de servido

ASP.Net, los cuales nos permiten recoger la respectiva información del usuario de una

forma similar a los controles de HTML.

Estos controles suponen una nueva y revolucionaria forma de funcionalidad que nos ofrece

ASP.Net.

Todo esto nos ofrece en la actualidad tener un nuevo modelo de programación incluido

en ASP.Net.

TEMAS ACTUALES II


Se trata de una serie de objetos de servidor, donde los mismos se los crea con el fin de que el

usuario los pueda utilizar en la página cargada. Los mismos nos permiten manejar eventos

por el cliente, que puede ser pulsación de un botón, con código de servidor.

Con estos controles ya no se necesita usar los típicos capos de formulario de HTML, ya que

en ASP.Net al momento que una página se ejecuta, los controles del servidor generan todo el

código.

En ASP.Net, los controles están separados del código del servidor, teniendo un código más

sencillo, estructurado y por lo tanto legible.

Para cada uno de los controles les corresponde una clase determinada perteneciente a un

espacio con un nombre determinado.

Como existe un gran número de controles de servidor en ASP.Net, los agrupamos en cuatro

categorías:

Controles intrínsecos, se sub dividen en dos grupos que se denominan: Controles

HTML y Controles Web.

Controles de Lista.(Distribuyen y muestran datos en una página)

Controles Ricos.(Ofrece funcionalidad avanzada de usuario)

Controles de Validación.(Validación de entrada de datos)

En el listado anterior, en las tres últimas categorías podemos encontrar reunidos los

controles Web.

Complementando los controles HTML estándar los cuales representan campos de un

formulario, en ASP.Net nos permite el uso de controles mucho más ricos y sobre todo

complejos, ejemplo: Control de rotación de anuncios (AdRotator).

Con ASP.Net, los controles tienen la capacidad de ofrecer complejo modelo de objetos donde

los cuales podemos encontrar propiedades, métodos y eventos, cabe recordar que los

controles en ASP.Net son instancias de objetos que se los puede encontrar distribuidos en

dos espacios con nombre NET.Framework, y se trata de los espacios con nombre:

System.Web.UI.HtmlControls y System.Web.IU.WebControls.

Pero existen caso que se puede usar controles Web y en otros HTML, donde los Web se los

deberá usar en las siguientes situaciones:

Preferimos un modelo de programación similar a Visual Basic

Estamos desarrollando Web Forms que deben ser mostrados por varios tipos de

navegadores.

Se necesita una funcionalidad específica, como puede ser un calendario o un rotador

de anuncios.

TEMAS ACTUALES II


Y los controles HTML preferible se los utilizara en las situaciones:

Preferimos un modelo de objetos similar al lenguaje HTML.

Estamos Trabajando con páginas Web existentes y las queremos migrar a Web

Forms.

El control debe interactuar con script de cliente y de servidor.

Como ya se mencionó anteriormente estos controles son iguales a los HTML, con una

excepción de que estos presentan un atributo runat con el valor server, también es que este

posee un atributo especial para el tratamiento de eventos del cliente con código del servidor.

Cuando sea necesario usar el tratamiento de eventos con código de servidor, se debe usar el

atributo onserverevento, indicándole como valor el nombre del método que se desea

ejecutar.

Cuando se quiera permitir hacer referencia a los controles dentro del código fuente de la

página, debemos usar el atributo id, de esta forma el objeto se puede utilizar en código del

servidor, ya sea para usar sus métodos o manipular sus propiedades.

Sintaxis general para presentar los controles HTML.

<input type="elementoHTML" id="identificador" runat="server" >

Web Forms con varios controles HTML de ASP.Net:

<%@ Page language="c#"%>

<HTML>

<script language="C#" runat="server">

void Pulsado(Object sender, EventArgs args){

etiqueta.InnerText=

lista.Value;

}

</script>

<body>

<form id="WebForm" method="post" runat="server">

<select id="lista" runat="server">

<option selected>La Naranja Mecánica</option>

<option>El Resplador</option>

<option>Lolita</option>

TEMAS ACTUALES II


<option>2001</option>

</select>

<input

type="button" id="boton" runat="server" value="seleccionar"

onserverclick="Pulsado">

<div id="etiqueta" runat="server"></div>

</form>

</body>

</HTML>

Código en ejecución:

En este ejemplo solo se ha accedido a las propiedades de los controles a través del nombre

con el que los hemos declarado, como se lo hace en Visual Basic.

Se lo puede lograr a una instancia de una clase determinada, y por lo tanto cada uno de ellos

poseerá sus propiedades y métodos.

En las distintas llamadas al formulario se mantiene el estado del mismo, sin necesidad de

escribir algún código adicional.

Todo esto se hace posible al campo oculto que lo genera el Web Form denominado

_VIEWSTATE.

Lo que se logra con estos controles es nos permiten mantener la compatibilidad con

versiones anteriores ASP.

Dentro de un espacio con nombre (NameSpace) donde se los encuentra los controles HTML

se denomina System.Web.UI.HtmlControls y cabe recordar que los controles HTML, como

todos los controles ASP.Net, tienen sus clases correspondientes dentro del .Net Framework.

TEMAS ACTUALES II


El atributo que nos permite trabajar con los controles es runat=”server”.

Con este atributo nos permiten activar cada uno de los eventos para su tratamiento en el

servidor y su mantenimiento automático dentro del Web Form.

Cada una de las distintas clases que representan a los controles HTML las empezamos a

describir:

TEMAS ACTUALES II


Este control es aquel que nos permite manejar enlaces y a los cuales le corresponde la

etiqueta <a>. Cuando se pulsa un botón esta propiedad cambia a HRef, para que el enlace

apunte a otro destino.

<%@ Page Language=”C#” %> <Script Language=”C#” runat=”server”> Void BotonPulsado (Object fuente, EventArgs args) { Enlace.HRef=”HolaMundo.aspx”; } </Script> <HTML> <Body> <Form id=”Formulario” Method=”post” runat=”Server”> <a HRef=”Fecha.aspx” id=”Enlace” runat=”server”> Pulsar enlace</a><br> <Button runat=”Server” id=”Boton” onserverclick=”BotonPulsado”> <b>Pulsa</b></Button> </Form> </Body> </HTML>

En el evento BotonPulsado(), este evento se lo designo cuando se pulse el botón y recibe

como parámetros un objeto que sea de la clase genérica Object, la cual representa al objeto

que genera el evento y también un objeto de la clase EventsArgs la cual representa al evento

que se ha producido.

Para indicar este método de la clase HTML que se ejecute cuando se pulse sobre el objeto de

la clase HTMLButton se usa la propiedad onserverclick de la etiqueta <Button>.

Usando este control podemos generar la etiqueta <Button> de HTNL y pertenece a la

especificación 4.0 de HTML, y solo es soportada por Web Internet explorer 4.0 o superior, se

lo usa cuando se quiere personalizar al máximo el aspecto de un botón.

Es la que representa la etiqueta <Form> en el servidor y es con la cual podemos definir un

Web Form, que es el encargado de contener una serie de controles de servidor en la pagina

ASP.Net.

TEMAS ACTUALES II


Es una clase que se usa para representar las etiquetas HTML, los cuales no poseen una

correspondencia directa con las clases del .Net Framework, tal y como sucede con las

etiquetas <span>, <div> o <body>, etc.

Cuando usamos un control HTML de una clase HTMLGenericControl, en el mismo se

pueden incluir otros objetos de las clases como por ejemplo HTMLInput, HTMLSelect.

Al usar esta clase podemos utilizar la etiqueta <img> de HTML en el servidor (<img

runat=”server”>), es el cual nos permite manipular imágenes.

Este control es aquel que representa en el servidor las etiquetas <input type=”Button”>,

<input type=”Submit”> y <input type=”Reset”>, ósea todos y cada uno de los controles los

cuales podemos encontrar dentro de un formulario, y el tipo de botón que se genera viene

dado por el valor de la propiedad type.

Este control es el que corresponde con la etiqueta <input type=”checkbox”>, y mediante el

mismo tenemos acceso en el servidor a este tipo de elemento.

Con esta clase podemos tener el acceso a la etiqueta <input type=”file”>, pero hay que

tomar en cuenta que para poder usar este control el atributo de type de la etiqueta <Form>,

que contenga este elemento debe tener el valor “Multipart/form-data”.

Esta clase es la que corresponde con la etiqueta <input type=”Hidden”>, y es un control de

servidor el cual nos permite usar campos ocultos de un Web Form.

Es una clase la cual representa a la etiqueta <input type=”image”>, nos permite un acceso a

los campos de imagen de un formulario.

TEMAS ACTUALES II


El control HTML es una instancia de esta clase, el cual generara una etiqueta <input

type=”Radio”>, y permite al código del servidor que interactúe con este elemento.

Corresponde con las etiquetas <input type=”Text”> y <input type=”Password”>, se trata de

un tipo de caja de texto o captura de texto que se genera y viene dado por el valor de la

propiedad type.

Este control es el que corresponde con una lista desplegable HTML, con una etiqueta

<select>.

El uso de este control es el que corresponde al usa de una tabla del Lenguaje HTML, que

permite el acceso desde el código del servidor a una etiqueta <Table>, y posee una colección

llamada Rows, que contiene objetos de la clase HTMLTableRow.

Con el uso de los objetos de la clase HTMLTableRow y HTMLTableCell nos permite crear

filas y columnas de la tabla.

Esta clase esta telacionada con la clase que mencionamos anteriormente la cual nos permite

la manipulación de una fila de una tabla y posee una colección llamada Cells.

Esta clase nos permite el acceso a las celdas de una tabla, que corresponde con las etiquetas

<td> y <th>.

Con este control podemos utilizar y manipular en el servidor la etiqueta <TextArea>.

CORRESPONDENCIA ENTRE CONTROLES HTML Y ETIQUETAS HTML.

Aquí nos ofrece una tabla la cual pretende ser un resumen de las equivalencias entre los

controles y las etiquetas HTML con las que se corresponden.

TEMAS ACTUALES II


CORRESPONDENCIA ENTRE CONTROLES WEB INTRÍNSECOS Y

ETIQUETAS HTML.

La correspondencia que existe entre estos controles y las etiquetas HTML que son generadas

en el navegador el cual solicita la ejecución de las paginas ASP.Net veremos a continuación.

Si hacemos una comparación de etiquetas y controles con la correspondencia que enviamos

anteriormente con los controles HTML, se puede ver que con los controles Web la

correspondencia de algunos casos no es tan evidente como sucedía con los controles HTML.

Control Web intrínseco Etiqueta HTML correspondiente:

Button <Input type=”Submit”>

CheckBox <Input type=”CheckBox”>

DropDownList <Select>

HyperLink <a>

Image <Img>

ImageButton <Input Type=”Image”>

Label <Span>

LinkButton <a>

ListBox <Select>

Panel <Div>

PlaceHolder No genera código HTML

RadioButton <Input Type=”Radio”>

Table <Table>

TableCell <Td>,<Th>

TableRow <Tr>

TextBox <Input Type=”Text”>

TEMAS ACTUALES II


Aquí mostraremos un pequeño ejemplo que utiliza un Web Form con varios controles de

ASP.Net, el cual es el típico “Hola Mundo”, pero usando los Web Form que hemos ya

mencionado.

Este ejemplo crearemos un Web Form el cual va a contener un botón, que el mismo al ser

pulsado, nos mostrara por pantalla el mensaje “Hola Mundo”.

Codigo:

<html> <body> <script language="C#" runat="server"> void Pulsado(Object sender, EventArgs args){ etiqueta.InnerText ="Hola Mundo"; } </script> <form id="controlesHTML" method="post" runat="server"> <input type="button" id="boton" runat="server" value="Pulsar" onserverclick="Pulsado" NAME="boton"> <div id="etiqueta" runat="server"></div> </form> </body> </html>

Codigo en ejecución:

Este Web Form consta de dos controles ASP.Net, un botón el cual es un objeto de la clase

HTMLInputButton y se completa con una etiqueta que forma parte del objeto de la clase

HTMLGenericControl, y ambas clases se encuentran en el espacio de nombre

System.Web.UI.HtmlControls.

Como se puede apreciar en el código, la sintaxis que nos ofrecen los controles HTML de

servidor es muy similar a la sintaxis de los clásicos controles usados en el lenguaje HTML.

Con la propiedad Id se lo identifica de forma única al control ASP.Net. OnserverClick, nos

permite indicar la pulsación del botón.

TEMAS ACTUALES II


<%@ Page Language="C#" %> <html> <body> <script language="C#" runat="server"> void Pulsado(Object fuente, EventArgs args) { etiqueta.Text = "Hola Mundo"; } </script> <form id="formulario" method="post" runat="server"> <asp:Button ID="boton" OnClick="Pulsado" runat="server" Text="Pulsar" ForeColor="Yellow" BackColor="CadetBlue"></asp:Button> <p> <asp:Label ID="etiqueta" runat="server" ForeColor="Red"></asp:Label> </p> </form> </body> </html>

David Freire

Documents

Transcript of David Freire