Issue with Loading CSS and JS Files in WebView from MAUI Resources Folder

Question

I am building a .NET MAUI app and am trying to render an HTML file in a WebView. The HTML file needs to load external CSS and JavaScript files that are located in the Resources/FirecodeRequirements folder of my MAUI project.

I’ve followed the steps to include the assets, but they are not loading correctly in the WebView. Here are the details of my setup:

Folder Structure:

/Resources
    └── /FirecodeRequirements
        ├── index.html
        ├── styles.css
        └── script.js

Build Action:

I've set the Build Action for all the files (index.html, styles.css, script.js) to MauiAsset.

HTML File (index.html):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fire Code Requirements</title>
    <!-- Correct Path to CSS -->
    <link rel="stylesheet" href="FirecodeRequirements/styles.css">
</head>
<body>
    <div class="table_component page active">
        <table>
            <tr><th>Page 1</th></tr>
            <tr><td>Content for page 1</td></tr>
        </table>
        <div class="navigation-btns">
            <button class="prevBtn" disabled>Previous</button>
            <button class="nextBtn">Next</button>
        </div>
    </div>

    <!-- Correct Path to JS -->
    <script src="FirecodeRequirements/script.js"></script>
</body>
</html>

MAUI Code to Load the HTML:

var webView = new WebView
{
    Source = "Resources/FirecodeRequirements/index.html"
};

Problem:

The HTML is loading correctly, but CSS and JavaScript are not applied (styles and scripts are not working). -I’ve tried different variations of the file paths but the CSS and JS files still aren’t loading.

What I’ve Tried:

Ensured the Build Action for the CSS, JS, and HTML files is set to MauiAsset.
Made sure the paths in the HTML file are correct and reflect the folder structure (FirecodeRequirements/).
Cleaned and rebuilt the project.
Verified the app is running correctly on the device, but the styles and scripts are not applied.

Question: How can I correctly load CSS and JavaScript files from the Resources folder into a WebView in .NET MAUI? Is there a specific way to reference the asset files that I might be missing?

Any guidance on what could be going wrong would be much appreciated!

Junrey Berondo Ongcol · Accepted Answer · 2024-11-12 10:40:16Z

1

try:

<script src="../FireCodeRequirements/scripts.js"></script>
<link rel="stylesheet" href="../FirecodeRequirements/styles.css">

answered Nov 12, 2024 at 10:40

Junrey Berondo Ongcol

891 gold badge1 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jhezavell Velono Over a year ago

i tried this, and it solved my problem. now i know that ../ move up from your current directory.

Junrey Berondo Ongcol Over a year ago

The ../ at the beginning of the path moves up one directory from the location of the HTML file. So this path works if the HTML file is located in a subdirectory that has a sibling directory named FirecodeRequirements containing styles.css.

Collectives™ on Stack Overflow

Issue with Loading CSS and JS Files in WebView from MAUI Resources Folder

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related