Localize TagHelper

Localize razor pages using localize html tag.

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:


Hello world!

Localize html text

                
<localize>
    <em>Hello world!</em>
</localize>
                    

Change culture:

Output:


Hello world!

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:


Hello world!

This is locailzed content.


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:


The first three numbers are: '123'
The date is: 11/11/2024 1:11:41 AM


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:


Hello world!

Hello world!


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:

Output:


Delicious cake and juice