我开始学习ASP.NET MVC 4，做了一些小事……
在我的索引页面中，我想获取带有一些数据的JSON 文件并将其显示在主页上。
在简单的HTML,JavaScript我使用ajax到GET/POSTJSON数据
<script>
$.ajax({
type : "GET",
dataType : "json",
url : "www.site.com",
success: function(data){
alert(data);
}
});
</script>
我创建了MVC 4项目，我应该在哪里调用jQuery $.ajax命令来获取数据并显示它？
我必须在视图中调用它吗？并使用 jQuery 语法？
我很乐意看到任何例子
【问题讨论】：
标签： javascript asp.net asp.net-mvc json
试试下面的
控制器
public class JsonController : Controller
{
public ActionResult Simple()
{
return View();
}
public JsonResult SimpleJson()
{
var persons = new List<Person>
{
new Person{Id=1, FirstName="Harry", LastName="Potter"},
new Person{Id=1, FirstName="James", LastName="Potter"}
};
return Json(persons, JsonRequestBehavior.AllowGet);
}
}
public class Person
{
public int Id { get; set; }
public string FirstName { get; set; }
public string LastName { get; set; }
}
在 simple.aspx 视图中
<head runat="server">
<meta name="viewport" content="width=device-width" />
<title>Simple</title>
<script src="../../Scripts/jquery-2.0.3.intellisense.js"></script>
<script src="../../Scripts/jquery-2.0.3.js"></script>
<script src="../../Scripts/jquery-2.0.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#FillButton').click(function () {
$.getJSON("/Json/SimpleJson", null, function (data) {
var div = $('#ajaxDiv');
$.each(data, function (i, item) {
div.append("<br /><br />First Name: " + item.FirstName);
div.append("<br />Last Name: " + item.LastName);
});
});
});
});
</script>
<div>
<div id="ajaxDiv">
</div>
<input id="FillButton" type="button" value="Get Persons" />
</div>
【讨论】：
您可以从视图中调用 ajax 函数，如下所示。
var oModel = {};
oModel.Id = $('#hiddenid').val();
oModel.Name = $('#hiddenName').val();;
$.ajax({
url: "/SomeController/SomeActionMethod",
type: "POST",
dataType: "json",
contentType: "application/json; charset=utf-8",
data: JSON.stringify(oModel),
}).done(function (data) {
alert(JSON.stringify(data));
});
并在您的控制器中使用名为“SomeActionMethod”的方法，如下所示，
[HttpGet]
public ActionResult SomeActionMethod(oModel oVarModel)
{
//Do some stuff
return someReturn;
}
希望这会有所帮助。
【讨论】：
您可以将它放在一个单独的 javascript 文件中，该文件可以从您的视图中引用。例如：
<script type="text/javascript" src="~/scripts/myscript.js"></script>
在脚本内部进行 AJAX 调用：
$.ajax({
type : "GET",
dataType : "json",
url : "/SomeController/SomeAction",
success: function(data) {
alert(data);
}
});
您正在调用的控制器操作显然应该返回一个 JsonResult：
public ActionResult SomeAction()
{
var model = new
{
Foo = "Bar",
}
return Json(model, JsonRequestBehavior.AllowGet);
}
此 javascript 需要进一步改进。您可能会注意到控制器操作的硬编码 url：
url : "/SomeController/SomeAction",
这不好，因为您的 url 的模式是由路由控制的，如果这些路由发生变化，您还必须修改您的 javascript。此外，如果您将应用程序部署在 IIS 的虚拟目录中，则此路径将不再考虑虚拟目录名称。
因此，始终建议使用 url 助手来生成控制器操作的 url。例如，您可以将其存储到视图中的全局 javascript 变量中：
<script type="text/javascript">
var myActionUrl = '@Url.Action("SomeAction", "SomeController")';
</script>
<script type="text/javascript" src="~/scripts/myscript.js"></script>
然后在你的 javascript 文件中使用这个变量：
$.ajax({
type : "GET",
dataType : "json",
url : myActionUrl,
success: function(data) {
alert(data);
}
});
【讨论】：
var model = new {}这是什么意思，因为我是新手...请告诉我@Darin Dimitrov
您必须在视图中进行ajax调用，只需调用返回json数据并对该数据进行操作的MVC url。
<script>
$.ajax({
type : "GET",
dataType : "json",
url : "www.site.com/{controller}/{action}/{id}",
success: function(data){
alert(data);
}
});
</script>
传递适用于 ajax 调用的 Controller、Action 和 Id 部分。 希望对你有帮助
【讨论】：