post icon

Tutorial para crear sitios web Multiidioma con ASP.Net

Crear sitios con soporte de varios idiomas es indispensable cuando vamos a colgar un sitio en Internet, gracias a las herramientas que nos ofrece Visual Studio y ASP.Net ésta tarea es realmente sencilla.

En éste tutorial vamos a crear un sitio que sólo tendrá un label y será traducido según el idioma elegido, creo que bastará para comprender el concepto. Doy por hecho que saben crear proyectos web con Visual Studio, preferentemente hagánlo en C#.

Necesitaremos algo como la siguiente imagen:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DestrozandoIdiomas.aspx.cs" Inherits="DestrozandoIdiomas" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Multi Idioma</title>
</head>
<body>
    <form id="frmPrincipal" runat="server">
        <div>
            <asp:HyperLink ID="HyperLink1" runat="server"
                NavigateUrl="~/DestrozandoIdiomas.aspx?lang=ES">Español</asp:HyperLink> &nbsp; &nbsp; &nbsp;
            <asp:HyperLink ID="HyperLink2" runat="server"
                NavigateUrl="~/DestrozandoIdiomas.aspx?lang=EN">English</asp:HyperLink> &nbsp; &nbsp; &nbsp;
            <asp:HyperLink ID="HyperLink3" runat="server" NavigateUrl="?lang=ZH-CN">??</asp:HyperLink>
            <br />
            <asp:Label ID="lblIdioma" runat="server" Text="Label"></asp:Label>
        </div>
    </form>
</body>
</html>

El siguiente paso es crear la carpeta de ASP, llamada App_LocalResources, donde irán nuestros archivos de recursos para los idiomas. En la imágen verán los pasos.

Para cada página que queramos que tenga soporte de lenguajes necesitamos crear un archivo de recurso por idioma, eso quiere decir que si tenemos 3 WebForm y soportamos 3 idiomas, tendremos 9 ficheros de recursos mínimamente. Estos archivos de recursos deben llamarse igual que su WebForm con la extensión que sería .resx.

He creado un WebForm llamado DestrozandoIdiomas.aspx, por lo tanto crearé 3 ficheros de recursos:

  1. DestrozandoIdiomas.aspx.resx (Idioma por defecto)
  2. DestrozandoIdiomas.aspx.EN.resx (Soporte en Inglés)
  3. DestrozandoIdiomas.aspx.ZH-CN.resx (Soporte en Chino)

Luego a todos los objetos que queremos que sean afectados por el soporte de lenguajes necesitamos agregarle manualmente un metatag que será su identificador, en el Label agregamos lo siguiente:

<asp:Label ID="lblIdioma" runat="server" Text="Label" meta:resourcekey="labelInfo"></asp:Label>

Con el identificador de Recurso en este caso labelInfo, en los ficheros de recursos le asignaremos a su propiedad Text el nuevo valor.

Si se han fijado cada uno de los enlaces que he colocado pasa parámetros HTTP por Get, menos el español que será por defecto. Estos valores los consultaremos luego antes de cargar el idioma.

Por último sobreescribiremos en método InitializeCulture(), presionamos F5 y veremos su funcionamiento..

1
2
3
4
5
protected override void InitializeCulture()
{
	UICulture = Request.QueryString["lang"] == null ? "ES" : Request.QueryString["lang"];
	base.InitializeCulture();
}

A pedido de varios usuarios ya en el blog, voy a expandir el tutorial. La mayoría me pregunta como puede hacer la asignación por código de los recursos, para usarlos como mensajes emergentes, mostrar errores personalizados y otras variantes. Eso es sencillo también como lo ya visto en este tutorial, para ello usaremos los Recursos Globales dando clic derecho sobre nuestro proyecto y agregamos la nueva carpeta llamada:

1
App_GlobalResources

Así como lo hicimos con los recursos locales. Agregaremos 3 archivos de recursos llamados llamado Mensajes.resx y sus variantes para el Ingles y el Chino. En cuanto a la página web agregamos 3 botones y una caja de texto que se cargará en el evento clic de cada botón y mostrará en cual botón hemos dado clic, así como ven en la siguiente imágen.

Y en los recursos agregamos tag, pero no propiedades especificas como el caso de los recursos locales, vean la siguiente imágen.

En el evento clic de cada botón que tengamos iremos agregando la asignación por código de los recursos, así como sigue:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
protected void Button1_Click(object sender, EventArgs e)
{
	txtEvento.Text = Resources.Mensajes.Boton1;
}
 
protected void Button2_Click(object sender, EventArgs e)
{
	txtEvento.Text = Resources.Mensajes.Boton2;
}
 
protected void Button3_Click(object sender, EventArgs e)
{
	txtEvento.Text = Resources.Mensajes.Boton3;
}

Una vez implementado se vería algo asi:

A modo tutorial lo hecho de éste modo bastante simple, les recomiendo que utilicen cookies y comboBox para mejorar la experiencia de usuario del sitio.

Finalmente, para los que desean tener el proyecto completo lo pueden descargar de aquí

Articulos Relacionados:

14 Comentarios

Deja tu Comentario
  1. zalatiel MEXICO Google Chrome Windows
    13 octubre 2011 at 21:28 #

    como le ago para que al cambiar de pagina me mantenga el mismo idioma? alguna idea?..

    saludos

    • Matias PARAGUAY Google Chrome Windows
      13 octubre 2011 at 23:29 #

      protected override void InitializeCulture()
      {
      UICulture = Request.QueryString["lang"] == null ? “ES” : Request.QueryString["lang"];
      base.InitializeCulture();
      }

      adaptalo a tu necesidad..

  2. Fox SPAIN Mozilla Firefox Windows
    23 noviembre 2010 at 10:58 #

    Aquí hay mas información al respecto.

  3. Rolando COSTA RICA Mozilla Firefox Windows
    2 noviembre 2010 at 02:03 #

    Inmensas gracias por tu ayuda con la parte del código.
    Te tengo otra pequeña duda:
    Si yo tengo .aspx localizados en carpetas internas del sitio Web por ejemplo si dentro de mi Sitio tengo una carpeta llamada Inventario y dentro de esa tengo varios aspx como Productos.aspx, sucede que si intento aplicarles este tutorial no me funciona. Solo si saco todos los aspx al root del sitio. He buscado como arreglarlo pero no encuentro.
    Me podrías indicar como hacerlo?
    Gracias.

    • Rolando COSTA RICA Mozilla Firefox Windows
      2 noviembre 2010 at 06:20 #

      También sería bueno tomar en cuenta que se podrían tener proyectos extra dentro de la solución donde tengo el WebSite. En ese caso como hago para por ejemplo en un class project donde tengo lógica de base de datos, identificar el idioma y escribir el texto según ese idioma. (Desde WebSite viene a ser más fácil con el GlobalResources pero y desde un proyecto aparte del Website?) no sé si me salgo del alcance del post pero sería genial tener esa información.
      De todas maneras muchísimas gracias por todo.

    • GeekZero PARAGUAY Google Chrome Windows
      2 noviembre 2010 at 06:45 #

      Con respecto a las carpetas Globales no tendras problemas, tienen alcance para todo el Proyecto. En cuanto a las Carpetas Locales debes crear otra App_LocalResources dentro de la carpeta Inventario y crear allí las .aspx.LANG.resx

  4. Rolando COSTA RICA Mozilla Firefox Windows
    31 octubre 2010 at 18:49 #

    Muy útil pero que pasa si tengo texto en un idioma desde código?
    Por ejemplo texto en español en una excepción que se muestra al usuario?
    Gracias.

    • GeekZero PARAGUAY Google Chrome Windows
      1 noviembre 2010 at 08:38 #

      Para ello son muy utiles los recursos Globales, ya que mas de uno me ha preguntado sobre eso, en un breve tiempo veré para expandir este tutorial y agregar eso..

      • Rolando COSTA RICA Mozilla Firefox Windows
        1 noviembre 2010 at 17:34 #

        Sería de gran ayuda para los que no conocemos del tema.
        Te lo agradezco mucho.

    • GeekZero PARAGUAY Google Chrome Windows
      1 noviembre 2010 at 19:11 #

      Listo, puedes adaptar el ejemplo con mostrar mensajes de excepción, espero te sirva. Ademas he subido el proyecto a GigaSize si deseas descargarlo el enlace está al final del artículo.

Trackbacks/Pingbacks

  1. Tweets that mention Tutorial para crear sitios web MultiLanguage con ASP.Net | DevTroce.com -- Topsy.com UNITED STATES - 5 septiembre 2010

    [...] This post was mentioned on Twitter by Hire ASP.Net Experts, DevTroce. DevTroce said: Tutorial para crear sitios #web Multiidioma con ASP.Net: Crear sitios con soporte de varios… http://goo.gl/fb/Jr23u [...]

Responder