asp.net mvc 关于ajax的使用

最新推荐文章于 2021-09-16 17:41:56 发布

patttttt

最新推荐文章于 2021-09-16 17:41:56 发布

阅读量191

点赞数 1

分类专栏： asp.net

asp.net 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

来源：https://www.youtube.com/watch?v=7faB8kV43eg

方式一

Index.cshtml

<!--不添加jquery-1.10.2.js 无法调用ajax-->
    <script src="@Url.Content("~/Scripts/jquery-1.10.2.js")" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('.btn').click(function () {
                $.ajax({
                    type: 'post',
                    url: '@Url.Action("Test", "Home")',
                    success: function (result) {
                        $('#result1').html(result);
                    },
                    error: function() {
                        alert("不执行");
                    }
                });
            });
    </script>

<body>
    <a href="#" class="btn">Hello</a>
    <br />
    <div id="result1"></div>
</body>

HomeController.cs

[HttpPost]
        public ActionResult Test()
        {
            return Content("Hello", "text/plain");
        }

方式二：带参数
Index.cshtml

<script type="text/javascript">
        $(document).ready(function () {
            $('.sum').click(function () {
                $.ajax({
                    type: 'post',
                    url: '@Url.Action("sum", "Home")',
                    data:
                        {
                            a: 3,
                            b: 4
                        },
                    success: function (result) {
                        $('#result2').html(result);
                    },
                    error: function () {
                        alert("不执行");
                    }
                });
            });
        });
</script>

HomeController.cs

[HttpPost]
        public ActionResult sum()
        {
            return Content((Convert.ToInt16(Request.Params["a"])  + Convert.ToInt16(Request.Params["b"])).ToString(), "text/plain");
        }

方式三：返回对象
Index.cshtml

<script type="text/javascript">
        $(document).ready(function () {
            $('.DisplayObject').click(function () {
                $.ajax({
                    type: 'post',
                    url: '@Url.Action("DisplayObject", "Home")',
                    datatype: 'json',
                    contentType:'application',
                    success: function (result) {
                        var s = 'ID: ' + result.Id + '<br>Name: ' + result.Name + '<br>Price: ' + result.Price;
                        $('#result3').html(s);
                    },
                    error: function () {
                        alert("不执行");
                    }
                });
            });
        });
</script>

HomeController.cs

[HttpPost]
        public ActionResult DisplayObject()
        {
            Product p1 = new Product("pr1", "Name 1", 1000);
            return Json(p1, JsonRequestBehavior.AllowGet) ;
        }

Product.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace quickApp.Models
{
    public class Product
    {
        private string id;
        private string name;
        private decimal price;

        public string Id
        {
            get{return id;}
            set{id = value;}
        }

        public string Name
        {
            get{return name;}
            set{name = value;}
        }

        public decimal Price
        {
            get {return price;}
            set{price = value;}
        }

        public Product() { }

        public Product(string id, string name, decimal price) {
            this.id = id;
            this.name = name;
            this.price = price;
        }
    }
}

方式四：返回对象集
Index.cshtml

<script type="text/javascript">
        $(document).ready(function () {
            $('.DisplayList').click(function () {
                $.ajax({
                    type: 'post',
                    url: '@Url.Action("DisplayList", "Home")',
                    datatype: 'json',
                    contentType: 'application',
                    success: function (result) {
                        var s = '';
                        for (var i = 0; i < result.length; i++)
                        {
                            s += 'ID: ' + result[i].Id + '<br>Name: ' + result[i].Name + '<br>Price: ' + result[i].Price + '<br>';
                        }
                        $('#result4').html(s);
                    },
                    error: function () {
                        alert("不执行");
                    }
                });
            });
        });
</script>

HomeController.cs

[HttpPost]
        public ActionResult DisplayList()
        {
            List<Product> listProduct = new List<Product>();
            listProduct.Add(new Product("pr1", "Name 1", 1000));
            listProduct.Add(new Product("pr2", "Name 2", 2000));
            listProduct.Add(new Product("pr3", "Name 3", 3000));
            return Json(listProduct, JsonRequestBehavior.AllowGet);
        }

patttttt

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
asp.net mvc 关于ajax的使用

来源：https://www.youtube.com/watch?v=7faB8kV43eg 方式一 Index.cshtml&lt;!--不添加jquery-1.10.2.js 无法调用ajax--&gt; &lt;script src="@Url.Content("~/Scripts/jquery-1.10.2.js")" type="text/javascrip...
复制链接

扫一扫