Search code examples
jqueryasp.net-core-mvc

How to load a HTML file into another file

I am trying to load a file (help content) into a model popup based on the View being loaded.

I want to be able to determine the file on the fly, but for testing, I am trying to use a test file (test.html) which is in the root directory of my project. I am using the jquery load command as follows:

      $("#helpdata").load("https://localhost:7249/test.html", function (response, status, xhr) {
                alert("Load was performed." + status);
            });

I have tried multiple variations of the url but can't get anything to work. It gives me a status of Error when loading. I'm not sure whether the url is relative, or fully defined. Nothing works. What am I missing?

Help file below.

@using (Html.BeginForm("Help", "Generic", FormMethod.Post))
    {
        <div class="modal fade" id="helpModal1" tabindex="-1" aria-labelledby="helpModalLabel" data-bs-backdrop="static" aria-hidden="true">
            <div class="modal-dialog modal-dialog-scrollable">
                <div class="modal-content">
                    <div class="modal-header">
                        <h1 class="modal-title fs-5" id="helpModalLabel">Logon Help</h1>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div style="overflow:auto">
                            <div id="helpdata">
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
    }

Was expecting the file to be loaded into the specified div element.

Solution

  • As it's you either need a route, a config-exception or to put it in the wwwroot folder,

    • Move your static .html file into the wwwroot folder of your project.

    Do not change $(..).load(path) to match wwwroot - the wwwroot folder is just that, it matches the root for www requests, so project wwwroot\file.html -> http://site/file.html

    Ensure your program.cs contains app.UseStaticFiles(); (it should do otherwise you don't get css/js etc, but you might have a custom location for static files, so move file.txt to that location if your static files are non-standard)

    See: Static files in ASP.Net Core for more details