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í

Comentarios desde Facebook:

  1. avatar
    Cesar MEXICO Google Chrome Windows
    12 julio 2013 at 16:33 #

    Buen post para configurar los idiomas

  2. avatar
    jhon VENEZUELA Google Chrome Windows
    7 noviembre 2012 at 11:02 #

    saludos, como hago si necesito cambiar el idioma pero en todas la pantallas urgente

    • avatar
      GeekZero PARAGUAY Google Chrome Windows
      7 noviembre 2012 at 11:20 #

      Sencillo, implementas esto mismo en todas las pantallas.

      • avatar
        jhon VENEZUELA Google Chrome Windows
        13 noviembre 2012 at 11:05 #

        debe de haber una forma mas sencilla; aproximado 60 pantallas y lanzar este código en cada una de ellas no creo que sea la mejor manera.

        se debería lanzar en el global.asax (nose como) o crear una clase y se le hace un llamado en cada pantalla

        • avatar
          GeekZero PARAGUAY Google Chrome Windows
          13 noviembre 2012 at 11:09 #

          No creo que desde el Global.asax puedas hacer eso, pero si tienes un masterpage te ahorrarías el código del “InitializeCulture”, pero los archivos de recursos, obligatoriamente debes tener uno por cada idioma de cada página

      • avatar
        jhon VENEZUELA Google Chrome Windows
        13 noviembre 2012 at 11:22 #

        yo se que los .resx hay que hacerlo por cada idioma. pero lo que no quiero es lanzar este codigo en cada pantalla no todas tienen master page

        este es el codigo en la pantalla.

        protected override void InitializeCulture()
        {

        String selectedLanguage = Session[“idioma”].ToString();

        Thread.CurrentThread.CurrentCulture = CultureInfo.CreateSpecificCulture(selectedLanguage);

        Thread.CurrentThread.CurrentUICulture = new CultureInfo(selectedLanguage);

        base.InitializeCulture();

        }

        la variable idioma la creo en el archivo global.asax esto es por el usuario elige el idioma que desea en las paginas

        void Session_Start(object sender, EventArgs e)
        {
        utilizar el valor del idioma en todo el proyecto
        Session[“idioma”] = “es-VE”;
        }

      • avatar
        jhon VENEZUELA Google Chrome Windows
        5 diciembre 2012 at 16:31 #

        una pregunta cuando coloco el protected override void InitializeCulture() en el master page

        me arroja el siguiente error

        Mensaje de error del compilador = cs0115:’adminadvance_adminlogin.Initializeculture()’: no se encontro ningun miembro adecuado que invalidar

        cuando lo lanzo en el pagina aspx si me funciona perfecto pero son muchas paginas

        como puedo solucionarlo???

  3. avatar
    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

    • avatar
      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..

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

    Aquí hay mas información al respecto.

  5. avatar
    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.

    • avatar
      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.

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

  6. avatar
    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.

    • avatar
      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..

      • avatar
        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.

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