> 编程开发 > ASP.NET >

ASP.NET MVC开发：JSON和AJAX 2016-12-01 12:31　出处：未知　人气：　

通常在ASP.NET MVC中使用AJAX，指的是在JQuery中使用AJAX。当然如果你JAVAScript能力强的话，完全可以脱离JQuery。JQuery带给我们很多便利，省了很多时间在兼容性上的调试。

这篇文章我们讨论的是AJAX在ASP.NET MVC中的使用，从最简单的实现AJAX，到控制器生成JSON，最后到控制器-数据库-JSON，再到视图的呈现，听起来好像很麻烦，但其实并不。

新建一个项目，新建一个控制器，取名为：AJAXController。修改代码如下：

public ActionResult Index() { return View(); } public ActionResult helloAJAX() { return Content("Hello AJAX","text/plain"); }

右击Index()，新建视图。视图注意要加载JQuery。

<h1 id="result1"></h1> $(document).ready(function () { $.ajax({ type: 'GET', url: '@Url.Action("helloAJAX","AJAX")', success: function (result) { $('#result1').html(result); } }); });

运行Index，看看h1是不是已经加载了控制器helloAJAX()。

现在我们右击Models文件夹，新建一个类，取名为Product，源代码如下:

{ public string Id { get; set; } public string Name { get; set; } public decimal Price { get; set; } }

现在再次回到控制器，增加一个JSONdata控制器类，代码如下。

public ActionResult JSONdata() { var products = new List<Product>() { new Product() {Id="1",Name="蛋糕",Price=120 }, new Product() {Id="2",Name="饼干",Price=20 }, new Product() {Id="3",Name="曲奇",Price=160 }, }; return Json(products, JsonRequestBehavior.AllowGet); }

打开视图，修改成如下样子：

> =="text/javascript"> $(document).ready(function () { $.ajax({ type: 'GET', url: '@Url.Action("helloAJAX","AJAX")', success: function (result) { $('#result1').html(result); } }); $('.active').click(function () { $.ajax({ type: 'GET', dataType: 'json', contentType: 'application/json', url: '@Url.Action("JSONdata","AJAX")', success: function (result) { var tostr = ''; for (var i = 0; i < result.length; i++) { tostr += '<br />ID: ' + result[i].Id + '<br />Name:' + result[i].Name + '<br />Price: ' + result[i].Price + '<br />=======================' } $('#result2').html(tostr); } }); }); }); </script>

运行后，如下图：

AJAX

下面，我们将对数据库做出查询，并将查询的结果格式化为JSON，使用AJAX将JSON传递到HTML页面。

在这里，我拿出来的数据库是AxCMS的数据库的Contents的数据，对AxCMS不理解的，点击这里查看。

Contents表存在着1对1的关系，查询的时候要注意，我这里直接输出全部数据，相当简单：

private AxCMSDBContext db = new AxCMSDBContext(); public ActionResult DataToJSON() { var contents = db.Contents; return Json(contents.ToList(), JsonRequestBehavior.AllowGet); }

然后修改视图就可以啦：

> ===="text/javascript"> $(document).ready(function () { $.ajax({ type: 'GET', url: '@Url.Action("helloAJAX","AJAX")', success: function (result) { $('#result1').html(result); } }); $('.active').click(function () { $.ajax({ type: 'GET', dataType: 'json', contentType: 'application/json', url: '@Url.Action("JSONdata","AJAX")', success: function (result) { var tostr = ''; for (var i = 0; i < result.length; i++) { tostr += '<br />ID: ' + result[i].Id + '<br />Name:' + result[i].Name + '<br />Price: ' + result[i].Price + '<br />=======================' } $('#result2').html(tostr); } }); }); $('.activedata').click(function () { $.ajax({ type: 'GET', dataType: 'json', contentType: 'application/json', url: '@Url.Action("DataToJSON", "AJAX")', success: function (result) { var tostr = ''; for (var i = 0; i < result.length; i++) { tostr += '<br />USER: ' + result[i].User + '<br />Title:' + result[i].Title + '<br />Content: ' + result[i].Content + '<br />=======================' } $('#result3').html(tostr); } }); }); }); </script>