ASP.NET MVC开发：JSON和AJAX

通常在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 class 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);
        }

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

<h1 id="result1"></h1>
<div class="active">点击此处加载本地的JSON</div>
<div id="result2"></div>
<script type="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);
        }

然后修改视图就可以啦：

<h1 id="result1"></h1>
<div class="active">点击此处</div>
<div id="result2"></div>

<div class="activedata">点击此处</div>
<div id="result3"></div>

<script type="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>

运行成功，最后我们优化一下JQuery的写法：

$('.activedata').on("click", function (e) {
            e.preventDefault();
            $.ajax({
                type: 'GET',
                dataType: 'json',
                contentType: 'application/json',
                url: '@Url.Action("DataToJSON", "AJAX")',
                success: function (result) {
                    $(result).each(function (index, item) {
                        $('#result2').append('USER:' + item.User + '<br />Title:' + item.Title + '<br />Content:' + item.Content + '<br />=======================<br />');
                    });
                }
            });
        });

谢谢大家。转帖的时候请把凉风有兴或者AlexZeng.net进行署名。本文版权声明：自由转载-非商用-非衍生-保持署名（创意共享3.0许可证）