加载外部HTML使用jQuery和Asp.net MVC

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字典中，当我点击锚标签时.. ...我有脚本文件夹和ViewFolder中的HtmlPage1 ..两者都不工作....我得到警报，但snipet没有被插入....

Answer 1

当加载在MVC静态文件基本上都采用绝对路径。把HtmlPage1.html文件在网站的根，一切都应该工作

当然你可以使用子文件夹以及（或者控制器动作，这听起来虽然哈克）：

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

Answer 2

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

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

Answer 3

你将不得不做出“Ajax控制器”（或您选择的名称），这样你就可以通过URL加载页面。

样品：

放置 “HtmlPage1” 中的 “查看/ Ajax” 的-folder。在JavaScript

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

，然后调用URL “的Ajax/HtmlPage1”：

创建一个名为 “AjaxController” 具有以下动作控制器

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

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

Answer 4

试试这个：

$(document).ready(function() { 
    $('#letter-a a').on("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; 
    }); 
});