Localization In Blazor Server With .NET Core 3.1

We can modify the remaining three components in the same way.

AddEmployee.razor

@page "/addemployee"
@inject NavigationManager NavigationManager
@inject IEmployeeService EmployeeService
@inject IStringLocalizer<AddEmployee> L

<h2>@L["CreateEmployee"]</h2>
<hr />
<form>
    <div class="row">
        <div class="col-md-8">
            <div class="form-group">
                <label for="Name" class="control-label">@L["EmpName"]</label>
                <input for="Name" class="form-control" @bind="@employee.Name" />
            </div>
            <div class="form-group">
                <label for="Department" class="control-label">@L["EmpDepartment"]</label>
                <input for="Department" class="form-control" @bind="@employee.Department" />
            </div>
            <div class="form-group">
                <label for="Designation" class="control-label">@L["EmpDesignation"]</label>
                <input for="Designation" class="form-control" @bind="@employee.Designation" />
            </div>
            <div class="form-group">
                <label for="Company" class="control-label">@L["EmpCompany"]</label>
                <input for="Company" class="form-control" @bind="@employee.Company" />
            </div>
            <div class="form-group">
                <label for="City" class="control-label">@L["EmpCity"]</label>
                <input for="City" class="form-control" @bind="@employee.City" />
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-4">
            <div class="form-group">
                <input type="button" class="btn btn-primary" @onclick="@CreateEmployee" value="@L["Save"]" />
                <input type="button" class="btn" @onclick="@Cancel" value="@L["Cancel"]" />
            </div>
        </div>
    </div>
</form>

@code {

    Employee employee = new Employee();

    protected async Task CreateEmployee()
    {
        await EmployeeService.CreateEmployee(employee);
        NavigationManager.NavigateTo("listemployees");
    }

    void Cancel()
    {
        NavigationManager.NavigateTo("listemployees");
    }
}

EditEmployee.razor

@page "/editemployee/{id}"
@inject NavigationManager NavigationManager
@inject IEmployeeService EmployeeService
@inject IStringLocalizer<EditEmployee> L

<h2>@L["EditEmployee"]</h2>
<hr />
<form>
    <div class="row">
        <div class="col-md-8">
            <div class="form-group">
                <label for="Name" class="control-label">@L["EmpName"]</label>
                <input for="Name" class="form-control" @bind="@employee.Name" />
            </div>
            <div class="form-group">
                <label for="Department" class="control-label">@L["EmpDepartment"]</label>
                <input for="Department" class="form-control" @bind="@employee.Department" />
            </div>
            <div class="form-group">
                <label for="Designation" class="control-label">@L["EmpDesignation"]</label>
                <input for="Designation" class="form-control" @bind="@employee.Designation" />
            </div>
            <div class="form-group">
                <label for="Company" class="control-label">@L["EmpCompany"]</label>
                <input for="Company" class="form-control" @bind="@employee.Company" />
            </div>
            <div class="form-group">
                <label for="City" class="control-label">@L["EmpCity"]</label>
                <input for="City" class="form-control" @bind="@employee.City" />
            </div>
        </div>
    </div>
    <div class="row">
        <div class="form-group">
            <input type="button" class="btn btn-primary" @onclick="@UpdateEmployee" value="@L["Update"]" />
            <input type="button" class="btn" @onclick="@Cancel" value="@L["Cancel"]" />
        </div>
    </div>
</form>

@code {

    [Parameter]
    public string id { get; set; }

    Employee employee = new Employee();

    protected override async Task OnInitializedAsync()
    {
        employee = await EmployeeService.SingleEmployee(id);
    }

    protected async Task UpdateEmployee()
    {
        await EmployeeService.EditEmployee(id, employee);
        NavigationManager.NavigateTo("listemployees");
    }

    void Cancel()
    {
        NavigationManager.NavigateTo("listemployees");
    }
}

DeleteEmployee.razor

@page "/deleteemployee/{id}"
@inject NavigationManager NavigationManager
@inject IEmployeeService EmployeeService
@inject IStringLocalizer<DeleteEmployee> L

<h2>@L["ConfirmDelete"]</h2>
<p>@L["CofirmMessage"] ? Id : <b> @id </b></p>
<br />
<div class="col-md-4">
    <table class="table">
        <tr>
            <td>@L["EmpName"]</td>
            <td>@employee.Name</td>
        </tr>
        <tr>
            <td>@L["EmpDepartment"]</td>
            <td>@employee.Department</td>
        </tr>
        <tr>
            <td>@L["EmpDesignation"]</td>
            <td>@employee.Designation</td>
        </tr>
        <tr>
            <td>@L["EmpCompany"]</td>
            <td>@employee.Company</td>
        </tr>
        <tr>
            <td>@L["EmpCity"]</td>
            <td>@employee.City</td>
        </tr>
    </table>
    <div class="form-group">
        <input type="button" value="@L["Delete"]" @onclick="@Delete" class="btn btn-primary" />
        <input type="button" value="@L["Cancel"]" @onclick="@Cancel" class="btn" />
    </div>
</div>

@code {

    [Parameter]
    public string id { get; set; }
    Employee employee = new Employee();

    protected override async Task OnInitializedAsync()
    {
        employee = await EmployeeService.SingleEmployee(id);
    }

    protected async Task Delete()
    {
        await EmployeeService.DeleteEmployee(id);
        NavigationManager.NavigateTo("listemployees");
    }

    void Cancel()
    {
        NavigationManager.NavigateTo("listemployees");
    }
}

Finally, we can modify the “ConfigureServices” and “Configure” methods in “Startup” class file.

Modify the ConfigureServices method

You can notice that, I have set the resource path as “Resources”. You can give any name for this resource path. But it should match with the actual folder name which contain the resource files.

ConfigureServices (method)

public void ConfigureServices(IServiceCollection services)
{
    services.AddRazorPages();
    services.AddServerSideBlazor(options => options.DetailedErrors = true);
    services.AddSingleton<WeatherForecastService>();

    services.AddDbContext<SqlDbContext>(options =>
        options.UseSqlServer(Configuration.GetConnectionString("SqlDbContext")));

    services.AddScoped<IEmployeeService, EmployeeService>();

    services.AddLocalization(options => options.ResourcesPath = "Resources");
    var supportedCultures = new List<CultureInfo> { new CultureInfo("en"), new CultureInfo("ml") };
    services.Configure<RequestLocalizationOptions>(options =>
    {
        options.DefaultRequestCulture = new Microsoft.AspNetCore.Localization.RequestCulture("en");
        options.SupportedUICultures = supportedCultures;
    });
}

We can modify the Configure method also by adding request localization pipeline.

Configure (method)

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }
    else
    {
        app.UseExceptionHandler("/Error");
    }

    app.UseRequestLocalization();
    app.UseStaticFiles();

    app.UseRouting();

    app.UseEndpoints(endpoints =>
    {
        endpoints.MapBlazorHub();
        endpoints.MapFallbackToPage("/_Host");
    });
}

We have completed the entire coding part. We can run the application.

Click “Employee data” link and click “New Employee” button to add a new employee data.

If you are using Chrome browser, go to Settings -> Advanced -> Languages and choose another language. I have added Malayalam culture in this application. Hence, I can set Malayalam as default language in language preferences. After that, we can refresh the page again.

You can notice that, the language is automatically changed to new culture. Application will automatically detect browser language preference and will show the text accordingly.

Conclusion

In this post, I have explained how to set localization in Blazor server app. I have created this project using a Visual Studio extension. I have added resource files for Razor components used for CRUD operations in Employee app. I have used two cultures English and Malayalam to demonstrate localization. I believe that, you have got a very good understanding on Localization with Blazor server app. Please feel free to send your valuable feedbacks.