Download
cliente ligero en net tema 4 asp net http paginaspersonales deusto es dipina masterisw n.
Skip this Video
Loading SlideShow in 5 Seconds..
Cliente Ligero en .NET Tema 4 – ASP.NET paginaspersonales.deusto.es/dipina/MasterISW/ PowerPoint Presentation
Download Presentation
Cliente Ligero en .NET Tema 4 – ASP.NET paginaspersonales.deusto.es/dipina/MasterISW/

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

361 Vues Download Presentation
Télécharger la présentation

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

- - - - - - - - - - - - - - - - - - - - - - - - - - - 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>