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.


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
            

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:


नमस्ते दुनिया!

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'
तारीख है: 29-03-2024 02:48:52


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:


स्वादिष्ट केक और जूस