1 / 126

Cliente Ligero en .NET Tema 4 – ASP.NET paginaspersonales.deusto.es/dipina/MasterISW/

Cliente Ligero en .NET Tema 4 – ASP.NET http://paginaspersonales.deusto.es/dipina/MasterISW/. Dr. Diego Lz. de Ipiña Gz. de Artaza http://paginaspersonales.deusto.es/dipina (Personal) http://www.morelab.deusto.es (Research Group) http://www.smartlab.deusto.es (Research Lab)

benjamin
Download Presentation

Cliente Ligero en .NET Tema 4 – ASP.NET paginaspersonales.deusto.es/dipina/MasterISW/

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Cliente Ligero en .NETTema 4 – ASP.NEThttp://paginaspersonales.deusto.es/dipina/MasterISW/ Dr. Diego Lz. de Ipiña Gz. de Artaza http://paginaspersonales.deusto.es/dipina (Personal) http://www.morelab.deusto.es (Research Group) http://www.smartlab.deusto.es (Research Lab) http://www.ctme.deusto.es (Cátedra de Telefónica Móviles) http://www.tecnologico.deusto.es (Tecnológico-Fundación Deusto)

  2. ASP.NET • Sucesor de Microsoft a la popular plataforma ASP para el desarrollo de aplicaciones web • Configuración: • Atención: Si no funciona, re-registrar ASP.NET bajo IIS: • aspnet_regiis.exe -i

  3. Ejemplo HTML: simple.html <html> <body> Hola mundo </body> </html>

  4. Ejemplo Petición HTTP GET /simple.html HTTP/1.1 Accept: */* Accept-Language: en-us Accept-Encoding: gzip, deflate If-Modified-Since: Wed, 24 Oct 2001 14:12:36 GMT If-None-Match: "50b0d3ee955cc11:a78" User-Agent: Mozilla/4.0.(compatible; MSIE.6.0; Windows NT 5.1) Host: www.wintellect.com Connection: Keep-Alive [blank line]

  5. Ejemplo Respuesta HTTP HTTP/1.1 200 OK Server: Microsoft-IIS/5.0 Date: Wed, 24 Oct 2001 14:12:37 GMT Content-Type: text/html Accept-Ranges: bytes Last-Modified: Wed, 24 Oct 2001 14:00:53 GMT ETag: "d02acf81975cc11:a78" Content-Length: 46 [blank line] <html> <body> Hola mundo </body> </html>

  6. ASP.NET vs. ASP • Active Server Pages (ASP) ofrecen un simple modelo de programación en el que se puede combinar código fuente y de marcado • Provee una serie de objetos prefabricados como Request y Response • El código fuente se suele realizar normalmente con VBScript, popular con programadores Visual Basic. • Este código se coloca entre los delimitadores ‘<%’ y ‘%>’

  7. Ejemplo ASP <!-- hello.asp --> <script language="VBScript" runat="server"> function buildForm() firstName = Trim(Request.Form("firstName")) s = "" if firstName = "" then ' need a name... s = s & "What's Your First Name? " s = s & "<input type='text' name='firstName' />" s = s & "<input type='submit' />" else ' we know the user's name... s = s & "Hello, " & firstName & "!" end if buildForm = s end function </script> <html><head><title>Hello ASP App</title></head> <body> <h1>Hello ASP Application</h1> <form action='hello.asp' method='POST'> <%=buildForm()%> </form> </body> </html>

  8. ASP.NET • Los ficheros ASP.NET tienen extensión aspx. • El código en un ASP.NET es muy similar al de ASP con las siguientes diferencias: • La lógica de la página está codificada en C# o VB.NET. El código es compilado cuando la petición de la página es recibida y se cachea para ser reutilizada • La directiva <%@Import Namespace=“...”%> permite importar espacios de nombres y utilizar el poder de la framework .NET

  9. Ejemplo ASP.NET <!-- hello.aspx --> <%@ Page Language="C#"%> <%@ Import Namespace="System.Web.UI"%> <script runat="server"> private string buildForm() { string firstName = this.Request.Form["firstName"]; if (firstName == null) firstName = ""; string s = ""; if (firstName.Trim() == "") { // need a name... s += "What's Your First Name? "; s += "<input type='text' name='firstName' />"; s += "<input type='submit' />"; } else { // we know the user's name... s += "Hello, " + this.Request.Form["firstName"] + "!"; } return s; } </script> <html><head><title>Hello ASP.NET App</title></head> <body> <h1>Hello ASP.NET Application</h1> <form action='hello.aspx' method='POST'> <%=buildForm()%> </form> </body> </html>

  10. La clase System.Web.UI.Page • En el anterior listado encontramos la línea: string firstName = this.Request.Form[“firstName”]; • El this en esta sentencia es una referencia a una instancia de System.Web.UI.Page, objeto que representa a una página ASP.NET • Los objetos Request y Response de ASP son ahora propiedades de la clase Page • El siguiente ejemplo muestra algunas de las propiedades de Request

  11. Usando Page.Request y Page.Response I <!-- dumpprops.aspx --> <%@ Page Language="C#" Debug="true"%> <script runat="server"> private void dumpProps() { // get Request and Response objects... HttpRequest req = this.Request; HttpResponse resp = this.Response; // and use them... resp.Write("Request.FilePath: " + req.FilePath + "<br/>"); resp.Write("Request.PhysicalApplicationPath: " + req.PhysicalApplicationPath + "<br/>"); resp.Write("Request.HttpMethod: " + req.HttpMethod + "<br/>"); resp.Write("Request.UserAgent: " + req.UserAgent + "<br/>"); resp.Write("Request.UserHostAddress: " + req.UserHostAddress + "<br/>"); } </script> <html><head><title>Dump Page Properties</title></head> <body> <h1>Page Properties</h1> <% dumpProps(); %> </body> </html>

  12. Usando Page.Request y Page.Response II

  13. Recuperando Datos de Formularios con Request • Propiedades: • RequestType: • Usando GET recuperaríamos los datos de QueryString • Control=Valor&Control=Valor • Usando POST de la propiedad Form • Request.Form["Direccion"] • La propiedad Params incluye además de los datos de un formulario, las cookies y las variables del servidor

  14. Formulario ASP.NET • Un elemento FORM en el que no aparece ni action ni method • Estos atributos son substituidos por runat="server" • Indica que el motor ASP.NET debe procesar el contenido del formulario • Controles asp:TextBox, asp:Button y similares • Los formularios ASP.NET facilitan el desarrollo de páginas dinámicas • Podemos acceder a los elementos del formulario directamente (Nombre.Text), en vez de a través de QueryString o Params.

  15. Ciclo de Vida del Objeto Page • Cuando una petición HTTP es recibida ASP.NET responde creando y devolviendo una página • Este proceso genera varios eventos • La clase Page contiene varios métodos heredados de System.Web.UI.Control que se pueden utilizar para manejar estos eventos: • OnInit inicialización requerida por la página • OnLoad ejecuta acciones comunes a cada petición HTTP de un página • OnPreRender para hacer cualquier cosa antes que la página se visualice • OnUnload sirve para realizar tareas como desconectarse de una base de datos cuando la página se descarga

  16. Manejando Eventos de Página <!-- pageevents.aspx --> <%@ Page Language="C#" Debug="true" %> <script runat="server"> protected override void OnInit(EventArgs e) { base.OnInit(e); p("Init"); } protected override void OnLoad(EventArgs e) { base.OnLoad(e); p("Load"); } protected override void OnPreRender(EventArgs e) {base.OnPreRender(e); p("PreRender");} private void p(string s) { Message.InnerHtml += s + "<br>"; } </script> <html><head><title>Hello Web Page</title></head> <body> <h1>Page Events...</h1> <form action='pageevents.aspx' method='POST'> <span id="Message" runat="server" /> <p> <input type="submit" /> </p> </form> </body> </html>

  17. Creando un Directorio Virtual I • Creamos el directorio virtual ejemplosASP.NET: • Hacemos doble click en Herramientas Administrativas • Doble click en Internet Information Services

  18. Creando un Directorio Virtual II • Creamos el directorio virtual ejemplosASP.NET: • Hacemos clic con el botón derecho del ratón en Default Web Site y luego seleccionamos NewVirtual Directory • Seleccionamos el directorio donde vamos a dejar los fichero accesibles por el contexto ‘ejemplosASP.NET’

  19. Web Forms y Server Controls • Un Web Form es un formulario con el atributo runat="server" que hace que se procese en la parte servidora • Un Server Control es un control que también tiene el atributo runat="server" • Tanto los web forms como los server controls son procesados en el servidor y generan HTML y JavaScript que son enviados al navegador

  20. Ejemplo Web Form I <!-- helloform.aspx --> <%@ Page Language="C#" Debug="true" %> <script runat="server"> // greet the user... private void greetHandler(object sender, EventArgs e) { firstNameTextBox.Text = firstNameTextBox.Text.Trim(); if (firstNameTextBox.Text == "") { // no name, so no greeting... greetingLabel.Text = ""; } else { // greet the user... greetingLabel.Text = "Hello, " + firstNameTextBox.Text + "!"; } } </script>

  21. Ejemplo Web Form II <html><head><title>Hello Web Form</title></head> <body> <h1>Hello Web Form</h1> <form action='helloform.aspx' method='POST' runat='server'> <asp:label text="What's Your First Name?" runat="server"/> <asp:textbox id="firstNameTextBox" runat="server"/> <asp:button id="greetButton" text="Greet" OnClick="greetHandler" runat="server"/> <p><asp:label id="greetingLabel" runat="server"/></p> </form> </body> </html>

  22. Ejemplo Web Form III • Puntos de interés: • Declaración del formulario mediante <form … runat="server"/> • En vez de usar HTML usamos etiquetas asp como: <asp:control-type … runat="server"/> • Estas etiquetas corresponden a los controles de la parte servidora • Se transforman en HTML por ASP.NET

  23. Ejemplo Web Form IV

  24. Ejemplo Web Form V • Los controles del servidor preservan su valor a través de peticiones HTTP • Lo hacen guardando las propiedades en un variable de nombre __VIEWSTATE • El valor de __VIEWSTATE es una cadena de caracteres codificada en base-64. • Los controles generan eventos que pueden ser tratados por handlers. Por ejemplo: <asp:button id=“greetButton” text=“Greet” OnClick=“greetHandler” runat=“server”/> • El manejador de eventos tiene una firma similar al equivalente en Windows Forms: private void greetHandler(object sender, EventArgs e) { … } • Podemos sobrescribir el método OnLoad y también usar el enfoque delegate: protected override void OnLoad(EventArgs e) { base.OnLoad(e); // uso del delegate … greetButton.Click += new EventHandler(greetHandler); }

  25. Codificación Base 64 • Subconjunto de 64 caracteres ASCII que permiten a grupos de 6 bits ser representados por un carácter • El proceso de codificación representa grupos de 24 bits de entrada (3 bytes de entrada) como un string de salida con 4 bytes de salida (2^6) • Referencia: http://en.wikipedia.org/wiki/Base64

  26. System.Web.UI.WebControls y System.Web.UI.HtmlControls • El espacio de nombres System.Web.UI.WebControls define un montón de controles, entre ellos: • Button • Calendar • CheckBoxList • DataGrid • DataList • DropDownList • Label • Panel • Etc. • En System.UI.HtmlControls se definen una serie de controles como HtmlAnchor y HtmlTable que definen una correspondencia uno-a-uno con la etiqueta HTML equivalente, p.e., HtmlAnchor y HtmlTable

  27. System.Web.UI.WebControls y System.Web.UI.HtmlControls • Al insertar usando el Toolbox de Visual Studio.NET controles HTML obtenemos: • <input type=“text”/> • <input type=“checkbox”/> • <input type=“button” value=“Button”/> • Al insertar web controls obtenemos: • <asp:TextBox id=“TextBox1” runat=“server”> • </asp:TextBox> • <asp:CheckBox id=“CheckBox1” runat=“server”> • </asp:CheckBox> • <asp:Button id=“Button1” runat=“server”> • </asp:Button>

  28. Propiedades Interesantes de los WebControls • Estilo Visual • Height y Width • Backcolor y ForeColor • BorderColor, BorderStyle y BorderWidth • Propiedades de comportamiento • Enabled • Visible • AccessKey • TabIndex • ReadOnly • Generación de Eventos • AutoPostBack • Indica si el control ha de producir automáticamente una nueva solicitud al servidor

  29. Mantenimiento de Estado en Controles • La propiedad EnableViewState determina si un control ASP.NET debe mantener su estado entre solicitudes • Su valor por defecto es True • El campo oculto __VIEWSTATE es el mecanismo utilizado por ASP.NET para conservar estado

  30. Usando el Control Calendar <!-- calendarform.aspx.aspx --> <%@ Page Language="C#" Debug="true" %> <script runat=server> private void dateHandler(object sender, EventArgs e) { myMessage.Text = "You selected " + myCalendar.SelectedDate.ToShortDateString(); } </script> <html><head><title>Calendar ASP.NET App</title></head> <body> <h1>Calendar ASP.NET Application</h1> <form runat="server"> <asp:calendar id="myCalendar" onSelectionChanged="dateHandler" Font-Name="Verdana" Font-Size="8pt" Font-Bold="true" BorderColor="black" BackColor="Gainsboro" runat="server" /> <p> <asp:Label id="myMessage" Font-Name="Verdana" Font-Size="8pt" Font-Bold="true" runat="server" /> </p> </form> </body> </html>

  31. Usando el Control Calendar

  32. Usando el Control DataGrid I <!-- dataformexample.aspx --> <%@ Page Language="C#" %> <%@ Import Namespace="System.Data" %> <%@ Import Namespace="System.Data.SqlClient" %> <script runat="server"> protected override void OnLoad(EventArgs e) { base.OnLoad(e); SqlConnection con = new SqlConnection("server=<server-name>;database=pubs;uid=sa;pwd=<password>"); SqlDataAdapter com = new SqlDataAdapter("select * from titles", con); DataSet ds = new DataSet(); com.Fill(ds, "titles"); titlesGrid.DataSource=ds.Tables["titles"].DefaultView; titlesGrid.DataBind(); } </script>

  33. Usando el Control DataGrid II <html><head><title>DataGrid ASP.NET App</title></head> <body> <h1>DataGrid ASP.NET Application</h1> <form runat="server"> <asp:dataGrid id="titlesGrid" BackColor="Gainsboro" BorderColor="black" CellPadding="10" CellSpacing="0" Font-Name="Verdana" Font-Size="8pt" Font-Bold="true" HeaderStyle-BackColor="lightGreen" EnableViewState="false" runat="server" /> </form> </body> </html>

  34. Usando el Control DataGrid III • <asp:dataGrid …/> visualiza el DataGrid en el formulario • Para cargar datos en el grid, usamos su propiedad DataSource y le asociamos datos invocando a DataBind() • DataGrid soporta paginamiento: • PageSize indica el número de filas a visualizar por página • AllowPaging sirve para visualizar botones Previous and Next en la página

  35. Usando el Control DataGrid III

  36. Usando DataGrid IV • Una pregunta frecuente suele ser cómo añadir un hiperlink a una de las celdas de un DataGrid: • http://msdn.microsoft.com/library/default.asp?url=/library/en-us/vbcon/html/vbtskaddinghyperlinkcolumnstodatagridwebcontrol.asp

  37. Usando DataGrid V <%@ Page language="c#" Codebehind="WebForm1.aspx.cs" AutoEventWireup="false" Inherits="DataGridWithHyperlink.WebForm1" %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" > <HTML> <HEAD> <title >WebForm1</title> <meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR"> <meta content="C#" name="CODE_LANGUAGE"> <meta content="JavaScript" name="vs_defaultClientScript"> <meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema"> </HEAD> <body MS_POSITIONING="GridLayout"> <form id="Form1" method="post" runat="server"> <asp:DataGrid id="DataGrid1" style="Z-INDEX: 101; LEFT: 192px; POSITION: absolute; TOP: 104px“ runat="server" DataSource="<%# TitlesDataSet %>" AutoGenerateColumns="False"> <Columns> <asp:HyperLinkColumn DataTextField="title_id" HeaderText="title_id" NavigateUrl="http://paginaspersonales.deusto.es/dipina"></asp:HyperLinkColumn> <asp:BoundColumn DataField="title" SortExpression="title" HeaderText="title"></asp:BoundColumn> <asp:BoundColumn DataField="type" SortExpression="type" HeaderText="type"></asp:BoundColumn> <asp:BoundColumn DataField="pub_id" SortExpression="pub_id" HeaderText="pub_id"></asp:BoundColumn> </Columns> </asp:DataGrid> </form> </body> </HTML>

  38. Usando el control HtmlTable I <!-- tableform.aspx --> <%@ Page Language="C#" Debug="true" %> <%@ Import Namespace="System"%> <%@ Import Namespace="System.Web.UI"%> <script runat="server"> protected override void OnLoad(EventArgs e) { base.OnLoad(e); int cellNum = 0; if (IsPostBack) { // falso cuando el formulario se crea por primera vez try { cellNum = Int32.Parse(cellTextBox.Text); } catch (Exception) { cellNum = 0; // don't highlight any cell } } int rows = 3, cols = 3, num = 0; for (int i = 0; i < rows; i++) { HtmlTableRow htmlRow = new HtmlTableRow(); for (int j = 0; j < cols; j++) { num++; HtmlTableCell htmlCell = new HtmlTableCell(); htmlCell.Controls.Add(new LiteralControl(num.ToString())); if (num == cellNum) htmlCell.BgColor="Yellow"; htmlRow.Cells.Add(htmlCell); } myTable.Rows.Add(htmlRow); } } </script>

  39. Usando el control HtmlTable II <html><head><title>HtmlTable Example</title></head> <body> <h1>HtmlTable Example</h1> <form runat="server"> <table id="myTable" border="1" cellPadding="10" cellSpacing="1" runat="server" /> <p> Cell# <asp:textbox id="cellTextBox" columns="1" maxLength="1" runat="server"/> <br> <input type="submit" value="Highlight Cell" runat="server"> </p> </form> </body> </html>

  40. Usando el control HtmlTable I • La propiedad de una página IsPostBack es falsa cuando un formulario se carga por primera vez • Obsérvese cómo programáticamente podemos ir creando la tabla: • HtmlTable • HtmlRow • HtmlCell

  41. Controles de Usuario • Podemos crear tres tipos de controles: • Pagelets • Fragmentos de código HTML que pueden reutilizarse como si de componentes se tratara • Controles simples • Derivados de System.Web.UI.Control • Controles compuestos • Reutilizan uno o más controles ya existentes • Los especializan

  42. Creación de Pagelets • Es un conjunto de marcas HTML alojadas en un archivo independiente y que se pueden reutilizar • Podemos personalizar ese contenido a través de propiedades • Se alojan en ficheros con extensión .ascx • Contienen marcado: <br/> <p>Distributed.NET</p> • Tendremos que registrar este fragmento, le damos un nombre y le asociamos un prefijo, en todos los .aspx donde queramos utilizar este control <%@ Register TagPrefix="DN" TagName=“Firma“ Src=“Firma.ascx" %>

  43. Creación de Pagelets <%@ Register TagPrefix="DN" TagName= "Firma" Src= "Firma.ascx“ %> • Si en lugar de tener un archivo .ascx, tuviéramos un control alojado en un ensamblado, substituiríamos src por Assembly • Después podríamos incluir el pagelet en cualquier otra página utilizando: <DN:Firma id="Firma1" runat="server" ></DN:Firma> • runat="server" lo identifica como control del servidor, ASP.NET lo substituirá por el código asociado

  44. Pagelets con propiedades • ¿Cómo personalizar un pagelet? • Tan sencillo como declarar variables públicas • Ejemplo: <script language="C#" runat="server"> public string BackgroundColor="white"; public int BorderWidth = 1; public string Text="Distributed.NET"; </script> <div style="clear; left; background-color: <%=BackgroundColor%>; border: solid <%=BorderWidth%>px"> <p style="text-align: center"><%=Text%></p> </div>

  45. Pagelets con propiedades • A continuación incluiríamos el siguiente fragmento en el .aspx donde incluir esta cabecera <%@ Register TagPrefix="DN" TagName= "Cabecera" Src= "Cabecera.ascx" %> • Y en el código del .aspx podríamos crear entradas como: <DN:Cabecera id="Pie" runat="server" BorderWidth="3" Text="Pie de página"></DN:Cabecera> • Revisar ejemplo en examples\asp.net\SecurityExample

  46. Creando Controles Web de Usuario con Pagelets • Permite encapsular dos o más elementos de interfaz en un control reusable • Podemos incluso reutilizar formularios web en controles de usuario • Podemos ensamblar formularios agrupando componentes personalizados reutilizables • Pasos conversión web form -> user control: • Guardar el formulario con extensión .ascx • Eliminar todas las sentencias <html>, <head>, <title>, <body> o <form>

  47. Usercolor.ascx I <!-- usercolor.ascx --> <script language="C#" runat="server"> public string Color { get { if (colorTextBox.Text == "") return "white"; return colorTextBox.Text; } } public bool Visible { get { return colorPanel.Visible; } set { colorPanel.Visible = value; } } </script>

  48. Usercolor.ascx II <asp:panel id="colorPanel" visible="false" runat="server"> <asp:label Font-Name="Verdana" Font-Size="7pt" text="Color : " runat="server"/> <asp:textbox Font-Name="Verdana" Font-Size="7pt" columns="10" id="colorTextBox" runat="server"/> </asp:panel>

  49. Usercolor.ascx III • Este control está compuesto de una label y una textbox, contenidas dentro de un Panel. • Definimos dos propiedades públicas para el control: Color y Visible. • Para localizar el control en un formulario debemos incluir: <%@ Page Language="C#" Debug="true" %> <%@ Register TagPrefix="userColors" TagName="userColor" Src="usercolor.ascx" %> • Para usar el control hacemos: <userColors:userColor id="userColorControl" runat="server"/>

  50. Colorform.aspx I <%@ Page Language="C#" Debug="true" %> <%@ Register TagPrefix="userColors" TagName="userColor" Src="usercolor.ascx" %> <script runat="server"> protected override void OnLoad(EventArgs e) { base.OnLoad(e); body.Attributes["bgcolor"] = userColorControl.Color; userColorControl.Visible = !userColorControl.Visible; } </script> <html><head><title>The UserColor Control</title></head> <body id="body" runat="server"> <h1>The UserColor Control</h1> <form runat='server'> <userColors:userColor id="userColorControl" runat="server"/> <p> This form uses the UserColor user control. When you submit the form the selected color will be used to set the page's background color. </p> <asp:button text="Submit" Font-Name="Verdana" Font-Size="7pt" BorderColor="black" type="submit" runat="server"/> </form> </body> </html>

More Related