jQuery.load doesn't work in ASP.NET MVC

Question

I have this line in my Razor :

@Html.Raw(File.ReadAllText(Server.MapPath("~/Views/Home/index.html")))

And in HTML file, I have this :

<li><a href="#">Personal Records</a></li>

And in my js file I have this :

if ($(link).text() === 'Personal Records') {
    $("#govde").load("PersonalRecords.html");
}

But when I click on that link, nothing happens. When I open Index.html directly from file browser, it works. How can I fix this?

EDIT :

In console, it has this :

http://localhost:12345/PersonalRecords.html  404 (Not Found)

I guess I have placed the html files to a wrong folder. Can you tell me where to place? Thanks.

EDIT2 :

I have this in my JS :

var upperMenu = document.getElementById('upperMenu');
var requests = document.getElementById('requests');
$(upperMenu ).click(function (event) {
             ustMenu.childNodes.forEach((myList) => {
                 $(myList).attr('class', ' ');
             });
             var link = event.target;
             var list = link.parentNode;
             $(myList).attr('class', 'active');
             if ($(link).text() === 'Personal Records') {
                 $("#govde").load('@Url.Content("~/PersonalRecords.html")');
            }

});

.load function is created in this(seperate) JS file.

$(a) (not $(link)) but I recommend you give your element an id or class name rather than checking its inner text value — user3559349
– user3559349, Commented Apr 13, 2017 at 3:56
Check if you have any console errors? Also as @StephenMuecke said, we would like to know what does link hold! so try adding complete js code.. — Guruprasad J Rao
– Guruprasad J Rao, Commented Apr 13, 2017 at 3:59
@bhatunoglu Why not using @Url.Content with relative path to your HTML file, e.g. $("#govde").load("@Url.Content("~/Views/Home/PersonalRecords.html")");? — Tetsuya Yamamoto
– Tetsuya Yamamoto, Commented Apr 13, 2017 at 4:02

Community · Accepted Answer · 2017-05-23 11:54:07Z

The problem started with file name mentioned in $("#govde").load method:

$("#govde").load("PersonalRecords.html");

This statement tries to load "PersonalRecords.html" which assumed exists in the project's root directory, but it returns 404 since the target file exist in different directory.

Hence, it should be mentions full absolute path URL to load HTML content first:

var url = '@Url.Content("~/Views/Home/PersonalRecords‌.html")';

Then, since load method placed inside separate JS file, putting them together should results like this:

Razor

<script src="@Url.Content("~/[path_to_your_JS_file]")" type="text/javascript"></script>
<script>
    var url = '@Url.Content("~/Views/Home/PersonalRecords‌.html")';
    loadRequest(url);
</script>

JavaScript file

function loadRequest(url) {
    var upperMenu = $("#upperMenu").get(0);
    var requests = $("#requests").get(0);
    $(upperMenu).click(function (event) {
        ustMenu.childNodes.forEach((myList) => {
            $(myList).attr('class', ' ');
        });
        var link = event.target;
        var list = link.parentNode;
        $(myList).attr('class', 'active');
        if ($(link).text() === 'Personal Records') {
              $("#govde").load(url);
        }
    }
}

Next, as of first mentioned part:

@Html.Raw(File.ReadAllText(Server.MapPath("~/Views/Home/index.html")))

I considered this is not a good practice to read all file contents in view side, hence I prefer return the file contents from controller side using FilePathResult like @Guruprasad Rao said:

// taken from /a/20871997 (Selman Genç)
[ChildActionOnly]
public ActionResult GetHtmlFile(String path)
{
    // other stuff
    // consider using Server.MapPath(path) if in doubt determining file path
    return new FilePathResult(path, "text/html");
}

Usage as link in view:

<li>@Html.ActionLink("HTML File", "GetHtmlFile", "Controller", new { path = "~/Views/Home/PersonalRecords‌.html" }, null)</li>

Similar issues:

Rendering .html files as views in ASP.NET MVC

Render HTML file in ASP.NET MVC view?

Collectives™ on Stack Overflow

jQuery.load doesn't work in ASP.NET MVC

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related