ASP.NET MVC开发:JSON和AJAX

C#

浏览数:206

2019-4-3

通常在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许可证