Search code examples
blazor

Having issues with charset in my blazor project

I'm starting to work with blazor, with one demo project, and Im having a problem with the charset, its not working, maybe it's not implemented where it is needed, I don't really know. So I have the charset implemented in the index.html, a html file inside the wwwroot, and in my Index.razor component. In my Index.razor Im calling other component only with body elements, where are the words that need accents.

The code that I have in index.html (I don't really know what this code does, it came with the demo):

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no" />
    <meta name="description" content="Guild Project"/>
    <title>Mission Control</title>
    <base href="/" />
    <script src="localStorage.js"></script>
    <link href="_content/RazorComponentsMaterialDesign/styles.css" rel="stylesheet" />
    <script src="_content/RazorComponentsMaterialDesign/script.js"></script>
    <script src="_content/RazorComponentsMaterialDesign/lib/material-components-web.js"></script>
    <link href="css/Layout.css" rel="stylesheet" />
    <script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.js"></script>
    <link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.css" rel="stylesheet" />
</head>
<body style="margin: 0px">

    <app>
        <!-- "Loading" spinner -->
        <div role="progressbar" class="mdc-linear-progress mdc-linear-progress--indeterminate">
            <div class="mdc-linear-progress__buffer"></div>
            <div class="mdc-linear-progress__bar mdc-linear-progress__primary-bar"><span class="mdc-linear-progress__bar-inner"></span></div>
            <div class="mdc-linear-progress__bar mdc-linear-progress__secondary-bar"><span class="mdc-linear-progress__bar-inner"></span></div>
        </div>
    </app>

    <script src="_framework/blazor.webassembly.js"></script>
    <script src="_content/PinMapLibrary/PinMap.js"></script>

</body>
</html>

Index.razor code:

@page "/"
@using MissionControl.Client.Components;

<html>
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        <div class="layout">
            <div class="sidebar">
                <Sidebar/>
            </div>
        </div>
    </body>
</html>

Here Im calling the component Sidebar where I have the words that need accents.

Sidebar code:

<p>Permissões</p>

As you can see Im implementing the charset in the index.html and in the Index.razor but its not working. You can see that in the image bellow.

example

I think I put all the information that you need to know about this issue but if you have some doubts just leave a comment. Thank you for your attention.

Solution

  • Save all your source code with UTF-8 encoding:

    In Visual Studio

    • select a file
    • click File -> Save {the file} As...
    • click the down arrow on save button enter image description here
    • click Save with Enconding...
    • select Unicode (UTF-8 with signature) - Codepage 65001 in Encoding
    • click OK

    To configure VS to save as Unicode per default :

    Tools -> Options -> Environment -> Documents
    Check Save documents as Unicode when data cannot be saved in codepage