Localize TagHelper
Localize razor pages using localize html tag.
Use the top language bar to change the culture and see the outputs for different cultures.
- Read the related article here.
- Github repository : LazZiya.TagHelpers.Localization
Installation
Install via nuget package manager (check for latest version before install),
Install-Package LazZiya.TagHelpers.Localization
Then add LazZiya.TagHelpers.Localization to _ViewImports.cshtml
@addTagHelper *, LazZiya.TagHelpers.Localization
@* IMPORTANT : starting from v1.3.0 *@
@removeTagHelper Microsoft.AspNetCore.Mvc.TagHelpers.AnchorTagHelper, Microsoft.AspNetCore.Mvc.TagHelpers
Important Breaking Change!
Starting from v1.3.0 a new CultureAnchorTagHelper has been added. This tag helper adds the {culutre}
parameter to every anchor link automatically depending on the current culture name. This tag helper replaces the framework AnchorTagHelper
, thats why it is important to remove the default anchore tag helper as described above in order to avoid the conflicts.
For more details visit GitHub repository.
Samples
Localize plain text
When using <localize> tag it will not product output tag, only inside text/html will be rendered.
<localize>Hello world!</localize>
Change culture:
Output:
¡Hola Mundo!
Localize html text
Localize any html tag
Any html tag can be localized by applying any of localize-* attributes.
<div localize-content>
<h4>Hello world!</h4>
<p>Hello world!</p>
</localize-content>
Change culture:
Output:
¡Hola mundo!
Este es contenido de locailzed.
Localize text with args
pass arguments as array of objects inside localize-args tag.
<p localize-args="@(new object[] { 123, DateTime.Now })">
The first three numbers are: '{0}'<br />
The date is: {1}
</p>
Change culture:
Output:
Los primeros tres números son: '123'
La fecha es: 20/04/2024 12:23:36
Fix localized culture
The output will be always localized to the specified culture regardless of the current request culture.
<!-- this content will always be in Arabic -->
<p localize-culture="ar">
Hello world!
</p>
Change culture:
Output:
مرحباً بالعالم!
Change localization source
Read localized values from a specified resource by parsing the relevant resource source type.
When working with shared resources with public keys, simply create a dummy public class, name it as the resource name (without culture suffix) and place it in the same folder as the cultures.
e.g. if our resource files are named like MyOtherSource.xx.resx and are located in LocalizationResources folder, we create the below empty class in the same folder:
public class MyOtherSource { }
Then we can parse this resource as type parameter inside localize tags as below:
<!-- this text will be localized from the default localization source -->
<p localize-content>
Hello world!
</p>
<!-- this text will be localized from MyOtherSource.xx.resx localization source -->
<p localize-source="typeof(MyOtherSource)">
Hello world!
</p>
Change culture:
Output:
¡Hola Mundo!
Hola mundo de la otra fuente!
Localize custom attributes
Any html attribute can be localized by adding locaize-att- suffix to the attribute name.
<img src="~/images/lost-image.jpg" localize-att-alt="Delicious Cake and juice" />
Change culture: