[ASPNET] Enrutamiento en Webform. Tener url mas amigables utilizando restricciones, creando enlaces (Codebehind y expresiones en modo diseño)

Como en el anterior post de esta temática sobre utilizar el modulo de IIS Url Rewrite… Aquí dejo las alternativas pero ya utilizando el enrutamiento mediante los Routes, que los que trabajamos con ASP.NET MVC ya estamos acostumbrados  y que tenemos desde la versión de ASP.NET 4.0 para Webforms (pero que venia ya en el SP1 de NET 3.5). Aquí dejo la introducción de utilizarlos con nuestros queridos Webforms.

Nos ayudaremos de esta configuración de enrutamiento para darle forma a los Request “enrutadas” que aceptaremos (las url) y como obtener los parámetros que vienen en dichas url (ya sea por codebehind, expresion en modo diseño o en un dataBinding) como asi también como escribir las url enrutadas vía código.

 

¿Que necesitamos mapear?

Lo que se requiere es poder mapear por ejemplo esta URL (un poco extensa)

http://localhost/PruebaLandingVuelo.aspx?promocion=santiago-scl-buenosaires-bue-01_10_2013-05_12_2013

A algo mucho mas amigable

http://localhost/vuelo/santiago-scl/buenosaires-bue/01_10_2013/05_12_2013

O sea lo que queremos hacer es direccionar la petición (request) a un archivo que no existe físicamente! o sea no se tiene el archivo físico que controla el request…. es decir nuestro querido webform (ni handler)!

 

Tenemos algunas alternativas (para incluso para Webforms…)

  1. El modulo del IIS Url Rewrite
    Muy fácil y transparente para la app web… cualquiera sea no necesariamente ASP.NET
    http://www.iis.net/downloads/microsoft/url-rewrite
    Que ya escribí el anterior post:
  2. También existen la posibilidad de redireccionar mediante HttpContext.RewritePath
    (lo bueno que lo tenemos desde la versión de ASP.NET 2.0)
    http://msdn.microsoft.com/es-es/library/system.web.httpcontext.rewritepath.aspx
  3. Pero desde la versión de ASP.NET 4.0 tenemos el Enrutamiento/Routes (idem a los que utilizamos en MVC)
    Que es el tema del presente post..

 

 

¿Como lo hacemos en Webforms el Enrutamiento… las rutas?

Para eso tenemos que realizar estos pasos

  1. Agregando Rutas con RouteCollection.MapPageRoute
    • NOTA 1.1: Valores predeterminados en los parámetros de las rutas
    • NOTA 1.2: Números variables de segmentos en la url o enviar parámetros con el carácter / con el comodín *
    • NOTA 1.3: Restricciones a las rutas
  2. Recuperando valores de la pagina enrutada
    • Por Codebehind: Utilizando la propiedad Page.RouteData
    • En Modo diseño: Utilizando en las propiedades de los controles con la expresión RouteValue (Text="<%$RouteValue:nombre%>" )
    • En los controles que soportan el DataBinding, utilizando RouteParameter
  3. A tener en cuenta al momento de crear enlaces de url enrutadas! Crear hipervinculos
    • Creando el hipervínculo manualmente (lo que siempre nos tentamos a hacer)
    • Creando automáticamente en modo diseño: Dejando que ASP.NET genere la ruta que se ajustas a los paremetros pasados en la expresion RouteUrl
    • Creando desde codebehind: Utilizando RouteValueDictionary y el método RouteCollection.GetVirtualPath

 

PASO 1: Agregando Rutas con RouteCollection.MapPageRoute

Para agregar las rutas nos valemos del metodo RouteCollection.MapPageRoute que tiene esta forma

public Route MapPageRoute(
string routeName,
string routeUrl,
string physicalFile
)
Esto es conveniente hacerlo al inicio de la aplicación, o sea en el Global.asax en el método especial Application_Start . ¿Por qué allí? Para tenerlo disponible para cuando se inicia la aplicación, pero en cualquier momento podremos manipular esta colección, además de tenerlo disponible para las pruebas unitarias. Como veras tiene un key para acceder a una ruta en particular.
Se registran las rutas en RouteTables que contiene todas las rutas de nuestra app.
 
Ejemplo con la url que queremos reescribir, los parámetros para la ruta van entre {}
SNAGHTML108da4bd

(NOTA: Agrego el namespaces completo de RouteTables)

 

NOTA 1.1: Valores predeterminados en los parámetros de las rutas

Aquí ya tendremos que utilizar la sobrecarga del método MapPageRoute

public Route MapPageRoute(
string routeName,
string routeUrl,
string physicalFile,
bool checkPhysicalUrlAccess,
RouteValueDictionary defaults
)

Donde vemos que el ultimo parámetro RouteValueDictionary es un diccionario (par/valor) donde indicamos dichos valores por default.

En el ejemplo si queremos agregar un valor por default seria algo así:

SNAGHTML108f76db

En este ejemplo no es necesario los valores por default, solo a modo de ejemplificar.

 

NOTA 1.2: Números variables de segmentos en la url o enviar parámetros con el carácter / con el comodín *

A veces es conveniente tener varios parámetros adicionales (y no podremos escribir una ruta “dependiente de dichos parámetros”

Algo así

/vuelos/{promocion}/{param1}/…/{paramN}

Entonces la ruta la podrías escribir algo así

~/vuelos/{promocion}/{*param1}

Y allí cuando lo recuperamos vamos a tener los valores de esta manera

valor1/valor2/valor3

Por eso es útil para necesitamos que el parámetro reciba un path, url, o valor que contenga el carácter / (por lo menos es en el único lugar que lo utilice por ahora)

 

NOTA 1.3: Restricciones a las rutas

Podremos  a las rutas además definir restricciones para definir mucho mejor el mapeo, así no se mapeara si no satisface dicha restricción… y no tendremos que hacer validaciones en nuestro código. Así que es muy útil por ejemplo cuando esperamos solo números, un formato o valores especiales, etc.

Para eso hay una sobrecarga mas de este único método MapPageRoute que soporta dicho valor de restricción, que también es un diccionario RouteValueDictionary pero en cuyo valor va una expresión regular (esa cosa que solo entienden los vulcanos, pero que es simple y potente)

Vemos que tenemos una sobrecarga:

SNAGHTML14c0668c

Para el ejemplo que tenemos la url debe tener esta forma:

/vuelo/santiago-scl/buenosaires-bue/01_10_2013/05_12_2013

La expresión regular que soporta cada grupo de parámetros puede ser algo así:

  • origen y destino: [a-z]*-[a-z]{3}
  • fechas de salida y regreso: [0-9]{2}_[0-9]{2}_[0-9]{4}

NOTA: En el anterior post hay una expresión regular mas “exacta”. Dale una mirada…

Entonces nos quedaría la ruta con la restricción

SNAGHTML10941d85

 

A tener en cuenta

Este mapeo de ruta no funcionara…

  • Si el archivo físico se encuentra físicamente, no se mapeara la ruta.

    Salvo que se habilite la propiedad RouteExistingFiles
  • Si se deshabilita algunas rutas mediante la collecion  RouteCollection.Ignore

 

Paso 2: Recuperando valores de la pagina enrutada

Para obtener los valores de los parámetros

  • En el Codebehind…

    Dentro de nuestro codebehind tendremos que acceder a la propiedad Page.RouteData que tiene una colección de Values

    Ejemplo:

var promocion = Page.RouteData.Values["promocion"].ToString();

 
  • En modo diseño podemos enlazar directamente una propiedad al valor  mediante la expresión $RouteValue
<asp:Literal ID="litPromocionConExpresion" 
runat="server"
Text="<%$RouteValue:promocion%>" />

  • Y tenemos en los controles que soportan binding/enlace la posibilidad de enlazar directamente al valor RouteParameter

    Algo así

    ...
    <SelectParameters>
    <asp:RouteParameter DefaultValue="ValorPorDefault" Name="promocion" RouteKey="promocion" />
    </SelectParameters>
    ...

    Ejemplo mas completo aquí…

 

Paso 3: A tener en cuenta al momento de crear enlaces de url enrutadas! Crear hipervínculos

Aquí tienes dos opciones… o generamos la url manualmente (la que creamos en la ruta) o dejamos que ASP.NET genere por nosotros la ruta que se ajusta a los parámetros que pasamos. Veamos

  1. Generar un Hipervínculo manualmente (conociendo la ruta)

    <asp:HyperLink ID="HyperLink1" runat="server" 
    NavigateUrl="~/vuelo/santiago-scl-buenosaires-bue-01_10_2013-05_12_2013">
    Vuelo de Santiago a Bs As para el dia 01/10/2013 al 05/12/2013
    </asp:HyperLink>

    Aqui es obvio que tambien podremos utilizarlo sin el webcontrol Hyperlink… pero no es recomendable porque no podremos mantener este tipo de enlaces en todo nuestra aplicación web.

  2. Creando automáticamente en modo diseño: Dejar que ASP.NET genere el enlace.. pasando los valores de los parametros

    Aqui nos aydamos de la expresion RouteUrl…

    <asp:HyperLink ID="HyperLink2" runat="server" 
    NavigateUrl="<%$RouteUrl:origen=santiago-scl,destino=buenosaires-bue,fechaSalida=01_10_2013,fechaRegreso=05_12_2013%>">
    Vuelo de Santiago a Bs As para el dia 01/10/2013 al 05/12/2013
    </asp:HyperLink>

    Aquí es mucho mas fácil mantener los enlaces a nuestras rutas.

  3. Creando desde codebehind:

    Aquí nos valemos de RouteValueDictionary y el método RouteCollection.GetVirtualPath

    SNAGHTML10a70dfb

 

 

 

Espero que sirva de ayuda o guía

 

Enlaces que te pueden ayudar

[ASPNET/IIS] Tener url mas amigables utilizando URL Rewrite (transparente a nuestra app)

Si queremos tener url mas amigables, ya es algo que debemos forzarnos en toda app web, para el buscador que nos visita e indexa y para entender mejor nuestra app por parte del usuario.

Por una pregunta que me hicieron aquí detallo la forma que tenemos de realizar esta tarea utilizando el modulo de IIS (y además dejo para otros post de como sería con lo que tenemos desde la ASP.NET MVC y en Webforms desde la versión 4.0 que es el Enrutamiento/Routes)

Tenemos algunas alternativas (para incluso para Webforms…)

  1. El modulo del IIS Url Rewrite (el de este post)
    Muy fácil y transparente para la app web… cualquiera sea no necesariamente ASP.NET
    http://www.iis.net/downloads/microsoft/url-rewrite
  2. También existen la posibilidad de redireccionar mediante HttpContext.RewritePath
    (lo bueno que lo tenemos desde la versión de ASP.NET 2.0)
    http://msdn.microsoft.com/es-es/library/system.web.httpcontext.rewritepath.aspx
  3. Pero desde la versión de ASP.NET 4.0 tenemos el Enrutamiento/Routes (idem a los que utilizamos en MVC)

Veamos entonces el punto 1… el módulo IIS URL Rewrite

¿Qué necesitamos mapear?

Lo que se requiere es poder mapear por ejemplo esta URL (un poco extensa)

http://localhost/PruebaLandingVueloConParametros.aspx?Origen=santiago-SCL&Destino=buenosaires-BUE&FechaSalida=01_10_2013&FechaRegreso=05_12_2013&Adultos=3&Child=3

A algo mucho mas amigable

http://localhost/PruebaLandingVueloConParametros/santiago-SCL/buenosaires-BUE/01_10_2013/05_12_2013/3/4

 

Url Rewrite

SNAGHTML1a09a0f8El modulo de IIS URL Rewrite utiliza reglas para evaluar y mapear la URL del request a la url que definimos, antes de ser procesado por un servidor web IIS.
Pero es mucho mas potente, incluso para utilizar en las reglas el encabezado HTTP y variables del servidor o para modificar  url del response (sobre escribir la respuesta)

Aquí veremos la pregunta concreta, como reescribimos

Entonces:

  1. Descargar el modulo del IIS image
  2. Definir una regla de reescritura para la url planteada
  3. Listo! (no hace falta hacer nada en la app web, ya que es transparente)
  4. ¿Dónde guarda el modulo las reglas? Web.config (podríamos escribir las reglas directamente allí)

 

 

 

 

 

1) Descargar el modulo del IIS

Tienes varios lugares donde obtenerlo…  y todos lo hacen a través de Web Plataform Installer

Que apuntan a la pagina de instalación de Web Plataform Installer

http://www.microsoft.com/web/gallery/install.aspx?appid=urlrewrite2

O directamente en nuestro IIS

SNAGHTML197cc6dc

SNAGHTML197e27c1

SNAGHTML197f8f0b

SNAGHTML19814407

SNAGHTML1983b012

Y dependiendo del idioma que hayamos descargo o tengamos configurado nuestro sistema operativo

SNAGHTML198b7b2d

Y allí realizas los pasos para agregar, e instalar directamente en el IIS. Esto deja listo para utilizarlo.

 

 

2) Definir una regla de reescritura para la url planteada

Las reglas de entrada básicamente tiene tres componentes

  1. Coincidencia de la cadena/Patrón: Hacer coincidir la cadena de dirección url.
    Se pueden utilizar expresiones regulares o wildard (que es comodín que se utiliza en el modulo de Redirección HTTP del IIS). En ejemplo utilizamos expresiones regulares
  2. Condiciones: Si se machea el patrón entonces se verifican las condiciones (pero pueden no tener condiciones) por ejemplo verificar si existe o no el archivo físico o directorio o alguna variable de servidor o encabezado HTTP
  3. Acción a tomar: Lo que se debe realizar si la cadena machea con el patrón de entrada y cumple las condiciones (podremos reescribir la url, definir una redirección – Response 3xx, abortar le petición o una respuesta personalizada)

SNAGHTML19c002a5

Importante/A tener en cuenta

  • Todas las reglas que agregamos se alojan en el web.config de la app que estamos manipulando
  • Las url originales quedan guardadas en una variable de servidor (HTTP_X_ORIGINAL_URL y UNENCODED_URL)
  • Las reglas se evalúan como se ingresan por esa razón se debe tener cuidado en las definición de las mismas (mirar en el web.config el orden se puede manipular allí o desde la interfaz de administración podremos ordenar de otra manera)
    SNAGHTML19c46be3

Entonces comencemos a armar nuestra Reescritura de la url

Agregamos mediante la interfaz que nos proporciona desde el administrador del IIS una regla en blanco…

SNAGHTML19b8570b

La url que queremos mapear era

http://localhost/PruebaLandingVueloConParametros.aspx?Origen=santiago-SCL&Destino=buenosaires-BUE&FechaSalida=01_10_2013&FechaRegreso=05_12_2013&Adultos=3&Child=3

A esto

http://localhost/PruebaLandingVueloConParametros/santiago-SCL/buenosaires-BUE/01_10_2013/05_12_2013/3/4

El Patrón para la url a mapear seria

^PruebaLandingVueloConParametros/([_0-9a-z-]+)/([_0-9a-z-]+)/([_0-9]+)/([_0-9]+)/([0-9]+)/([0-9]+)$

NOTA: A modo de ejemplo utilizo un patrón sencillo, pero la parte de origen y destino fechas podría ser algo mas “ajustado”, por ejemplo:

  • Para la parte origen destino: ([a-z0-9]+-[a-z0-9]{3})
  • Para la parte de fechas: ([0-9]{2}_[0-9]{2}_[0-9]{4})

 

SNAGHTML19c829c5

Podremos probar el patrón…

  • Datos de entrada para probar
    PruebaLandingVueloConParametros/santiago-SCL/buenosaires-BUE/01_10_2013/05_12_2013/3/4
  • Patron: Expresión Regular
    ^PruebaLandingVueloConParametros/([_0-9a-z-]+)/([_0-9a-z-]+)/([_0-9]+)/([_0-9]+)/([0-9]+)/([0-9]+)$

 

SNAGHTML19bcf3b7

Como vemos en los resultados de la prueba tenemos grupo de captura de las referencias inversa, los {R:x} que nos ayudaran en la acción a tomar para entregar a la aplicación el parámetro correcto con el valor y nombre correctos.

¿Como capturamos los Back-references (referencia inversa)?

En este ejemplo en particular cada vez que utilizamos expresiones regulares (e.r) y agrupamos dichas expresiones en paréntesis (e.r) podremos capturar un “grupo de captura”.

Si este grupo esta en:

  • Las condiciones entonces debemos hacer referencia a {C:x}
  • En los patrones o reglas de entrada entonces {R:x}, como lo demuestra en la prueba de entrada del patrón

En este ejemplo en particular no tendremos en cuenta las condiciones, así que vamos directamente a la acción a tomar…

 

Accionar a Tomar: Reescritura

Donde tendremos la dirección url a reescribir tomando las referencia inversas del patrón de entrada (los {R:x})

PruebaLandingVueloConParametros.aspx?origen={R:1}&destino={R:2}&fechaSalida={R:3}&fechaRegreso={R:4}&adultos={R:5}&child={R:6}

Nos quedaría así:

SNAGHTML19d25d82

Donde vemos

  • Destildar “Anexar cadena de consulta (querystring)” asi queda limpio la rescritura y no necesitaremos nada mas (aqui deberias evaluar si debes o no agregar el querystring en la acccion)
  • Destildar si queremos no “Dirección Url reescrita de registro” o sea logear en los logs del IIS la url reescritra
  • Y debemos tildar “Detener el procesamiento de las reglas siguientes”, para que no se evaluen las demas reglas

 

3) Listo! (no hace falta hacer nada en la app web, ya que es transparente)

Y en nuestra app? Sigue funcionando porque esto lo realiza el IIS independientemente de la app o tecnología que esta sirviendo (ASP.NET, PHP, etc)
Así que nuestro código no tiene cambio! Puedes utilizarlo tranquilamente…

 

4) ¿Donde guarda el modulo las reglas? Web.config

Esto nos queda en el web.config por supuesto dentro de la seccion <system.webServer><rewrite>…

<configuration>
<system.web>
<compilation debug="true" targetFramework="4.0" />
</system.web>
<system.webServer>
<rewrite>
<rules>
<rule name="LandingVuelo" stopProcessing="true">
<match url="^PruebaLandingVueloConParametros/([_0-9a-z-]+)/([_0-9a-z-]+)
/([_0-9]+)/([_0-9]+)/([0-9]+)/([0-9]+)$"
/>
<action type="Rewrite"
                            url="PruebaLandingVueloConParametros.aspx?origen={R:1}&amp;destino={R:2}&amp;
fechaSalida={R:3}&amp;fechaRegreso={R:4}&amp;adultos={R:5}&amp;child={R:6}"

appendQueryString="false" />
</rule>
</rules>
</rewrite>
</system.webServer>

</configuration>

NOTA: A modo de visualización en este articulo las urls tiene un salto de línea (algo que no puede tener en el web.config)

 

Podríamos escribir las reglas directamente allí, algo que hacemos mas rápido (y nos gusta tocar XML)

 

 

 

Espero que les sirva de ayuda o guía.