在表视图ASP.NET MVC中显示从AJAX请求到控制器的动态数据

public class HomeController : Controller
{
    public JsonResult GetData()
    {
        // 从数据库或其他数据源获取数据
        var data = new List<object>
        {
            new { Name = "John", Age = 25 },
            new { Name = "Emily", Age = 30 }
        };

        return Json(data, JsonRequestBehavior.AllowGet);
    }
}

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>
    $(document).ready(function() {
        $.ajax({
            url: '@Url.Action("GetData", "Home")',
            type: 'GET',
            dataType: 'json',
            success: function(data) {
                // 渲染表格
                var table = $('<table>').addClass('table');
                var thead = $('<thead>').appendTo(table);
                var tbody = $('<tbody>').appendTo(table);
                
                // 创建表头
                var headers = Object.keys(data[0]);
                var headerRow = $('<tr>').appendTo(thead);
                $.each(headers, function(_, header) {
                    $('<th>').text(header).appendTo(headerRow);
                });
                
                // 创建表格内容
                $.each(data, function(_, row) {
                    var dataRow = $('<tr>').appendTo(tbody);
                    $.each(headers, function(_, header) {
                        $('<td>').text(row[header]).appendTo(dataRow);
                    });
                });
                
                // 将表格添加到页面中
                table.appendTo('#table-container');
            }
        });
    });
</script>

<div id="table-container"></div>