jquery - 使用 Jquery 和 Asp.net MVC 加载外部 Html

Question

在我的索引视图中，我有这个：

<script type="text/javascript" src="~/Scripts/jquery-2.0.0.js"></script>
<script type="text/javascript" src="~/Scripts/Javascript1.js"></script>

<div id="dictionary">
</div>

<div class="letter" id="letter-a">
<a href="#">A</a>
</div>

在我的 Javascrip11.js 中，我有这个：

$(document).ready(function () {
 $('#letter-a a').click(function () {
    $('#dictionary').load('HtmlPage1.html');
     alert('Loaded!');
        return false;
    });
});

在我的 HtmlPage1 我有这个：

<div>Definitions for letter A</div>

当我单击锚标记时，我希望 Javascript 加载此 HtmlPage1 并插入到页面的 div 字典中.....我在 Scripts 文件夹和 ViewFolder 中都有 HtmlPage1 ..两者都不起作用....我我收到警报，但没有插入代码片段....

Answer 1

您必须创建一个“Ajax 控制器”（或您选择的名称），以便您可以通过 URL 加载页面。

样本：

将“HtmlPage1”放在“View/Ajax”文件夹中。

使用以下操作创建一个名为“AjaxController”的控制器：

public class AjaxController
{
     public ActionResult HtmlPage1()
     {
         return View();
     }
}

然后在你的 JavaScript 中调用 URL“Ajax/HtmlPage1”：

$('#dictionary').load('/Ajax/HtmlPage1');

从这里您可以添加更多 ActionResults 以添加不同的结果。:)

Answer 2

试试这个：

$(document).ready(function () {
  $('#letter-a a').on("click", function (e) {
    e.preventDefault();
    $('#dictionary').load('HtmlPage1.html');
    alert('Loaded!');
    return false;
  });
});

Answer 3

在 MVC 中加载静态文件时，基本上都是使用绝对路径。将 HtmlPage1.html 文件放在站点的根目录中，一切都应该工作

当然你也可以使用子文件夹（或者一个控制器动作，虽然这听起来很奇怪）：

$('#dictionary').load('Views/HtmlPage1.html');

Answer 4

我认为您需要防止<a>标签上的默认行为：

$(document).ready(function () {
 $('#letter-a a').click(function (e) {
    e.preventDefault();
    $('#dictionary').load('HtmlPage1.html');
     alert('Loaded!');
        return false;
    });
});

Answer 5

试试这个 ：-

$(document).ready(function () {
 $('#letter-a a').click(function () {
     $.get('HtmlPage1.html')
     .success(function(data) {
       alert(data);
         $('#dictionary').html(data);
     });

        return false;
    });
});