Convertir pagina HTML a ASP.NET Archivado en: Aplicaciones Web JorgePedraza @ 7:18 pm Tags: ASP.

NET, Convertir, HTML

Uno de los escenarios web que se puede encontrar cualquier desarrollador de pgina Web dinmica como es el caso ASP.NET; es tratar de crear, mantener y entregar sitio ASP.NET atractivos y funcionales acorde con requerimientos especficos. Y todo esto basado en organizaciones (Compaa de Software) Heterognea, donde existe equipos de desarrollo (ASP.NET), equipos de diseadores grafico (Plataforma y Herramientas de diseo de Tercero) as como coordinadores de proyecto separado geogrficamente. Dado a esta situacin el desarrollador ASP.NET va depender primeramente de la aprobacin de la estructura del sitio web; posteriormente la elaboracin y entrega del arte (Plantilla web HTML) por parte del equipo de diseo grafico y finalmente es donde dicho desarrollador web dinmico (ASP.NET) genera todo la ingeniera de cdigo web dinmico relacionado con el sitio. Entonces el presente artculo tiene como finalidad bsica de exponer una forma sencilla y directa de convertir cualquier sitio web esttico (Pginas Web HTML) a proyecto ASP.NET (Pagina Dinmica).

Para fines de este articulo, se va utilizar un proyecto web ASP.NET 2.0 con lenguaje Visual Basic 2005, ademas de un plantilla web de prueba que se puede encontrar en sitios web gratis o pago; una vez claro con estas pautas se comenta los siguientes:

1- Establecemos la plantilla web para el supuesto cliente. Un ejemplo de esto puede ser:plantillas-gratis-014.

2- Creamos un proyecto del tipo Aplicacin Web ASP.NET, el cual llamaremos ASPNETCasinoOnline. 3- Por defecto en el proyecto ASP.NET encontramos basicamente dos archivos (default.aspx y Web.Config), del cual podemos prescindir de default.aspx, pulsando boton derecho sobre l desde el explorador de soluciones y luego click en delete o eliminar. 4- Ahora explico una forma rapida y sencilla para que la plantilla web con todo su contenido forma parte del proyecto ASP.NET en Cuestion: y es simplemente copia todo el contenido relacionado con la plantilla incluyendo la pagina html en la caperta del proyecto ASP.NET creado previamente; notando que la ubicacin exacta sea donde esta el archivo Web.Config. 5- Volvemos a Visual Studio y buscamos en el explorador de soluciones, y nos situamos en la opcin mostrar todos los Archivos o Show All files, en algunos casos solo se actualiza:SESAF, luego debe aparecer las informacin relacionado con la plantilla y es ahi donde por cada elemento debemos incluir en proyecto o Include in Project: ESIP y finalmente se completa como:ListoSE.

6- Se procede a cambiar la extensin de index.html a index.aspx. 7- Se agrega un elemento nuevo del tipo Class.vb con el siguiente nombre index.aspx.vb; posteriormente en su contenido se reemplaza con: Public Class index Inherits System.Web.UI.Page End Class.

8- Se agrega un elemento nuevo del tipo Class.vb con el siguiente nombre index.aspx.designer.vb; posteriormente en su contenido se reemplaza con: Partial Public Class index Protected WithEvents form1 As Global.System.Web.UI.HtmlControls.HtmlForm End Class 9- Se pulsa boton derecho sobre index.aspx y se da click vista de marcado o view Markup 10- Se anexa en la primera linea del documento HTML: <%@ Page Language=vb AutoEventWireup=false CodeBehind=index.aspx.vb Inherits=ASPNETCasinoOnline.index %> 11- Se busca y modifica lo siguiente: <form id=form1 name=form1 method=post action="> a <form id=form1 runat=server> 12- Ahora se pone en juego hacer que cada elemento HTML de inters se convierta en un objeto de lado del servidor insertando dentro de la etiqueta html la palabra clave runat=server y adems un nombre especifico para el Id de la etiqueta. Ejemplo: <a href=" id=linkDownload runat=server >Download</a>. Luego ya tenemos visibilidad de los objetos html de lado de servidor con relacin al codigo de programacin .net.

Una vez entendido estas series de pasos sencillos; se puede utilizar de forma analoga para cualquier objeto del tipo html y plantilla relacionada. incluso se puede aprovechar esta plantilla para crear un MasterPage.

En conclusin encontramos una forma ideal para trabajar alineado con algunos escenarios de desarrollo web aplicado en Organizacin heterognea, el cual permitirn sacar mayor partido de la solucin Planteada, junto con las herramientas de desarrollo web de Microsoft.

Recuerda que el nombre de t plantilla convertida en Front End (*.ASPX), lo debe establecer tambin en el Code behind (*.VB or *.CS), y finalmente realiza respectivo enlace entre ellos para que funcione. Ahora en el caso de un Master Page es un poco Artificioso de forma manual. Para esto simplemente debe crear un master page a raiz del proyecto; luego debe trasladar y sustituir parcialmente todo el cdigo HTML de t plantilla dentro de dicho master Pager creado, siempre y cuando mantenga las instrucciones reservada base adems de su contenido web relacionado (carpeta de imgenes) en el mismo proyecto. Eencontre la solucion cambiandole solamente de codebehind por codefile y listo!!!