在视图asp.net mvc中使用jquery查询json数据

在ASP.NET MVC中使用jQuery查询JSON数据，主要涉及到以下几个基础概念：

ASP.NET MVC：这是一个用于构建Web应用程序的框架，它采用模型-视图-控制器（MVC）架构模式，有助于实现代码分离和可维护性。
jQuery：这是一个快速、小巧且功能丰富的JavaScript库，它简化了HTML文档遍历、事件处理、动画和Ajax交互。
JSON（JavaScript Object Notation）：这是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成。

类型与应用场景

类型：在ASP.NET MVC中，JSON数据通常来源于后端控制器方法的返回值，或者是通过Ajax请求从服务器获取的数据。
应用场景：这种查询方式常用于动态加载数据、实现表格数据的增删改查、构建图表等交互式Web应用。

示例代码

以下是一个简单的示例，展示如何在ASP.NET MVC视图中使用jQuery查询JSON数据：

后端控制器代码（C#）

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }

    [HttpGet]
    public JsonResult GetData()
    {
        var data = new List<Person>
        {
            new Person { Name = "Alice", Age = 25 },
            new Person { Name = "Bob", Age = 30 }
        };
        return Json(data, JsonRequestBehavior.AllowGet);
    }
}

public class Person
{
    public string Name { get; set; }
    public int Age { get; set; }
}

前端视图代码（HTML + jQuery）

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Query JSON Data</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <h1>People List</h1>
    <ul id="people-list"></ul>

    <script>
        $(document).ready(function () {
            $.getJSON('@Url.Action("GetData", "Home")', function (data) {
                $.each(data, function (index, person) {
                    $('#people-list').append('<li>' + person.Name + ' - ' + person.Age + '</li>');
                });
            });
        });
    </script>
</body>
</html>