Polyglot Language Switcher asp.net

988 views Asked by At

I want to use polyglot language switcher with asp.net 4.0 website. Below code works;

 <body>
 <div id="polyglotLanguageSwitcher"> 
    <form id="form1" runat="server"  > 
        <form action="#" >
           <select id="polyglot-language-options" >
               <option id="en" value="en" selected="selected">English</option>
               <option id="fr" value="fr">Fran&ccedil;ais</option>
               <option id="de" value="de">Deutsch</option>
               <option id="it" value="it">Italiano</option>
               <option id="es" value="es">Espa&ntilde;ol</option>
           </select>
        </form>
   </form>
</div>

I want to use as shown below (in <form id="form1" runat="server"> </form> tag) but it doesn't works.

<body>
 <form id="form1" runat="server"  >
    <div id="polyglotLanguageSwitcher">
       <form action="#" >
           <select id="polyglot-language-options" >
               <option id="en" value="en" selected="selected">English</option>
               <option id="fr" value="fr">Fran&ccedil;ais</option>
               <option id="de" value="de">Deutsch</option>
               <option id="it" value="it">Italiano</option>
               <option id="es" value="es">Espa&ntilde;ol</option>
           </select>
       </form>
    </div>
 </form>

polyglog.js is here: https://github.com/ixtendo/Polyglot-Language-Switcher/blob/master/js/jquery.polyglot.language.switcher.js

Any ideas?

2

There are 2 answers

2
Sandeep On BEST ANSWER

Try following it is working on my end. I have added form tag inside div polyglotLanguageSwitcher and it worked:

<body>
    <div id="container" style="width: 400px; margin: 140px auto 40px;">
        <!-- begin language switcher -->
        <div id="polyglotLanguageSwitcher">
            <form id="form1" runat="server">

                <select id="polyglot-language-options">
                    <option id="en" value="en">English</option>
                    <option id="fr" value="fr">Fran&ccedil;ais</option>
                    <option id="de" value="de">Deutsch</option>
                    <option id="it" value="it">Italiano</option>
                    <option id="es" value="es">Espa&ntilde;ol</option>
                </select>

            </form>
        </div>
        <!-- end language switcher -->

    </div>
</body>

If you want form outside of div then change following lines in js but i will not recommend it:

var options = $("#" + rootElementId + " > form > select > option");

with

var options = $("#" + rootElementId + " > select > option");

and

  $("#" + rootElementId + " form:first-child").remove();

with

$("#" + rootElementId + " :first-child").remove();
2
iCollect.it Ltd On

There are alternatives available to ASP.Net MVC so that most of the work is done server-side. You need a custom routing, a controller hook (e.g. in OnActionExecuting) and some tricks with server-side culture changing. Also all your strings need to be in locale-specific resource files.

Here are a couple of links to help:

http://geekswithblogs.net/shaunxu/archive/2010/05/06/localization-in-asp.net-mvc-ndash-3-days-investigation-1-day.aspx

http://download1.parallels.com/SiteBuilder/Windows/docs/3.2/en_US/sitebulder-3.2-win-sdk-localization-pack-creation-guide/30801.htm

I used these as my reference to build a generic localisation library for my MVC apps.

Part 1 Custom routing

My custom route looks like this. It expects either a 2 letter or 2-2 letter language code (ISO format) e.g. en or en-EN etc:

//Special localisation route mapping - expects specific language/culture code as first param
routes.MapRoute(
    name: "Localisation",
    url: "{lang}/{controller}/{action}/{id}",
    defaults: new { lang = "en", controller = "Home", action = "List", id = UrlParameter.Optional },
    constraints: new { lang = @"[a-z]{2}|[a-z]{2}-[a-zA-Z]{2}" }
);

Then your links to change language will simply look like these anchors:

<a href="en">Englishe</a>
<a href="fr">Fran&ccedil;ais</a>
<a href="de">Deutsch</a>
<a href="it">Italiano</a>
<a href="es">Espa&ntilde;ol</a>