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:


عراسي العالم :)

Localize html text

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

Change culture:

Output:


عراسي العالم!

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:


عراسي العالم!

هيدي محتويات محلية.


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:


أول تلات أرقام شو هيه: '123'
بكام الشهر اليوم: 20/04/2024 09:50:50 ص


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:


عراسي العالم :)

عراسي العالم من الدنيا التاني! :)


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:


كاتو و عصير عكيف كيفك