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
Ingeniería Sistemas Página 3 David Freire Noveno Semestre
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
Ingeniería Sistemas Página 4 David Freire Noveno Semestre
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
Ingeniería Sistemas Página 5 David Freire Noveno Semestre
<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
Ingeniería Sistemas Página 6 David Freire Noveno Semestre
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
Ingeniería Sistemas Página 7 David Freire Noveno Semestre
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
Ingeniería Sistemas Página 8 David Freire Noveno Semestre
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
Ingeniería Sistemas Página 9 David Freire Noveno Semestre
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
Ingeniería Sistemas Página 10 David Freire Noveno Semestre
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
Ingeniería Sistemas Página 11 David Freire Noveno Semestre
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
Ingeniería Sistemas Página 12 David Freire Noveno Semestre
<%@ 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>
Top Related