MVC: Rutas

En este artículo vamos a aprender a utilizar las rutas en proyectos MVC creados con Visual Studio para así poder personalizar las url´s de acceso a nuestra aplicación y que sean más «amigables» para los usuarios y buscadores.

Primero creamos un proyecto Web con Visual Studio basado en la plantilla MVC,

Veremos que por defecto ya hace enrutamiento y sin tener que cambiar nada nos ofrece una url amigable.

Esta url tiene una serie de segmentos o rutas que permiten el acceso a la aplicación, de forma que se puede acceder de diferentes maneras (En este caso la vista está configurada como la de por defecto para la zona de Home).

URL	Destino
Home/Index	Controller=Home,Action=Index
Home/Index/3	Controller=Home,Action=Index,Id=3
Home	Controller=Home,Action=Index

El enrutamiento por defecto es el siguiente: {controller}/{action}/{id}. Lo podemos ver y modificar desde el archivo RouteConfig.cs localizado en la carpeta App_Start dentro de nuestro proyecto de Visual Studio.

Con routes.MapRoute indicamos un nombre a cada ruta, una url con el patrón de enrutamiento y el controlador y vista que se llamarán.

Con routes.IgonoreRoute indicamos al enrutamiento que se ignore cualquier url que termine por axd y que tenga parámetros adicionales. {* Pathinfo} es un comodín para todos los parámetros.

Además de la ruta por defecto podemos añadir encima nuestras rutas personalizadas:

De esta forma al navegar a http://localhost:[port]/Home/AboutMe se carga la vista About de nuestra plantilla.

Se puede modificar el enrutamiento en MVC a nuestro gusto ya que los enlaces que creemos en las vistas de nuestra aplicación se montarán dinamicamente con el enrutamiento adecuado gracias al lenguaje Razor:

Como podemos imaginar vamos a tener una gran flexibilidad para hacer url´s lo más «amigables» posibles. En la siguiente tabla se pueden ver ejemplos de patrones de enrutamiento válidos:

Route definition	Example of matching URL
{controller}/{action}/{id}	/Products/show/beverages
{table}/Details.aspx	/Products/Details.aspx
blog/{action}/{entry}	/blog/show/123
{reporttype}/{year}/{month}/{day}	/sales/2008/1/5
{locale}/{action}	/US/show
{language}-{country}/{action}	/en-US/show

+Info: https://msdn.microsoft.com/en-us/library/cc668201(v=vs.100).aspx

Pero aún hay más… Podemos configurar los enrutamientos fácilmende directamente desde los métodos de los controladores. Para ello en el archivo RouteConfig.cs agregamos la siguiente línea:

routes.MapMvcAttributeRoutes();

Y seguidamente abrimos nuestra clase del controlador y agregamos la ruta a nuestro método mediante el decorador [Route()]

Resultado:

Si tenemos parámetros. Podemos usar muchos modificadores dentro de este decorador para validar los parámetros.

Por ejemplo: [Route(“Noticias/Internacional/{id:int}”)]  //Para indicar que el id sea numérico de forma que sólo entra en el métedo si la url es algo así:

http://localhost:puerto/Noticias/Internacional/5

Route Constrain	Used For	Example
Alphabate	It matches uppercase or lowercase Latin alphabet characters (a-z and A-Z) values.	{ParameterName:alpha}
DateTime	It matches a Date Time value.	{ParameterName:datetime}
Decimal	It matches a decimal value.	{ParameterName:decimal}
Float	It matches a 32-bit floating-point value.	{ParameterName:float}
Integer	It matches a 32-bit integer value.	{ParameterName:int}
Long	It matches a 64-bit integer value.	{ParameterName:long}
Double	It matches a 64-bit floating-point value.	{ParameterName:double}
Max	It matches an integer with a maximum value.	{ParameterName:max(100)}
Min	It matches an integer with a minimum value.	{ParameterName:min(5)}
Length	It matches a string with the specified length or within a specified range of lengths.	{ParameterName:length(20)} {ParameterName:length(3,20)}
MaxLength	It matches an string with a maxmum value.	{ParameterName:maxlength(15)}
MinLength	It matches a string with a minimum length.	{ParameterName:minlength(6)}
Boolean	It matches a boolean value	{ParameterName:bool}
Range	It matches an integer within a range of values.	{ParameterName:range(1,500)}
Regex	It matches a regular expression.	{ParameterName:(^[a-zA-Z0-9_]*$)} {ParameterName:(^\d{3}-\d{5}-$)}
GUID	It matches a GUID value.	{ParameterName:guid}

De esta forma es posible crear enrutadores distintos para cada uno de los métodos que tengamos en nuestro controlador:

Observar que en el método de About hemos puesto [Route(«Noticias/Deportes/{id?}»)] la «?» sirve para que el parámetro id sea opcional, por lo que es válido llamarlo con o sin parámetro:

• http://localhost:puerto/Noticias/Deportes
• http://localhost:puerto/Noticias/Deportes/3

Mediante el decorador RoutePrefix podemos unificar rutas dentro de nuestro controlador (el resultado será el mismo que en el caso anterior):

Si es necesario se puede sobreescribir el prefijo de la clase por otro dentro del método con el símbolo «~».

En este caso la ruta de acceso sería: http://localhost:[puerto]/OtrasNoticias/Internacionales

En el siguiente ejemplo establecemos en la clase del controlador el método por defecto. Como vemos es el correspondiente a la vista Contact:

Finalmente indicar que es posible dar un nombre a los enrutamientos que creemos para después construir más facilmente los links mediante Razor.

Usando el nombre del enrutamiento el enlace se podría construir así:

<a href=»@Url.RouteUrl(«AboutMe»)»>Sobre mí</a>

En resumen, hemos visto que el enrutamiento se puede hacer directamente en la clase RouteConfig.cs o en los métodos y clases de los controladores. El primer caso permite tener todos los enrutamientos en el mismo punto (RouteConfig.cs) mientras que realizar el enrutamiento en los controladores permite saber de primera mano a que método va a llamar al cargar la ruta indicada. También es posible combinar ambos métodos de enrutamiento sin ningún problema.