jQuery.load 在 ASP.NET MVC 中不起作用答案

【问题标题】：jQuery.load doesn't work in ASP.NET MVCjQuery.load 在 ASP.NET MVC 中不起作用
【发布时间】：2017-04-13 03:36:34
【问题描述】：

我的剃须刀里有这条线：

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

在 HTML 文件中，我有这个：

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

在我的 js 文件中我有这个：

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

但是当我点击那个链接时，什么也没有发生。当我直接从文件浏览器打开 Index.html 时，它可以工作。我该如何解决这个问题？

编辑：

在控制台中，它有这个：

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

我想我把 html 文件放到了错误的文件夹中。你能告诉我放在哪里吗？谢谢。

EDIT2：

我的 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 函数在这个（单独的）JS 文件中创建。

【问题讨论】：

$(a)（不是$(link)）但我建议你给你的元素一个id或类名，而不是检查它的内部文本值
检查是否有任何控制台错误？正如@StephenMuecke 所说，我们想知道link 持有什么！所以尝试添加完整的js代码..
@StephenMuecke 请查看我的编辑。谢谢。
您将html 文件放在哪里？哪个目录？
@bhatunoglu 为什么不将@Url.Content 与您的 HTML 文件的相对路径一起使用，例如$("#govde").load("@Url.Content("~/Views/Home/PersonalRecords.html")");?

标签： javascript jquery asp.net asp.net-mvc razor

【解决方案1】：

问题始于$("#govde").load方法中提到的文件名：

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

此语句尝试加载假定存在于项目根目录中的“PersonalRecords.html”，但由于目标文件存在于不同目录中，因此返回 404。

因此，首先应该提到完整的绝对路径 URL 以加载 HTML 内容：

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

那么，由于load 方法放在单独的 JS 文件中，所以将它们放在一起应该是这样的：

剃须刀

<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 文件

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);
        }
    }
}

接下来，从第一个提到的部分开始：

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

我认为这不是在视图端读取所有文件内容的好习惯，因此我更喜欢使用FilePathResult 从控制器端返回文件内容，就像@Guruprasad Rao 所说：

// 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");
}

在视图中用作链接：

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

类似问题：

Rendering .html files as views in ASP.NET MVC

Render HTML file in ASP.NET MVC view?

【讨论】：