Question

我有一组数据显示为表格。目前的设置是：

@using System.Collections.Generic
@model IEnumerable<Dictionary<String,String>>

<table id="dashboard">
<thead>
    @foreach (var item in Model.FirstOrDefault())
    {
    <th>
        @Html.DisplayFor(i => item.Key)
    </th>
    }
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                @foreach (var i in item)
                {
                    <td>
                        @Html.DisplayFor(i1 => i.Value)
                    </td>
                }
            </tr>
        }

    </tbody>

</table>

数据来自几个SQL表中的任何一个，并且通常显示在此处。我的目标是采用这个系统，并在下拉菜单中选择按钮后创建表格。我已经有下拉菜单了。我的困难是从我的收藏中获取数据，以便我可以显示它。

我认为这将是这样的：

<input type="button" id="OneBtn" value="1" />
<script type="text/javascript"
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
$(function () {
    $('#dashboard').hide();
    $("#OneBtn").click(function () {
        $('#dashboard').hide();
        $("#dashboard").empty();
        $.ajax({
            cache: false,
            type: "GET",
            url: "/Home/GetTableData/",
            data: { "id": 1 },
            success: function (data) {
                alert(data);

                /*$.each(data, function (index, item) {
                    var row = $('<tr></tr>'); // create new table row
                    row.append($('<td></td>').text(item.??));

                    $('#dashboard').append(row); // add to table
                });
                $('#dashboard').show();*/
            },
            error: function (xhr, ajaxOptions, throwError) {
                alert("Error");
                $('#dashboard').hide();
            }
        });
    });
});
</script>

我不确定从哪里开始。通过AJAX命令传递的数据是List of Dictionary对象。警报通过显示：

证明

System.Collections.Generic.List`1[System.Collections.Generic.Dictionary`2[System.String,System.String]]

显示此信息的正确方法是什么？

编辑：我意识到我传递的数据是错误的。我忘了将其作为JSON请求发送。之后，警报显示它正在接收一系列对象。

Answer 1

您可以使用部分视图来显示表格。然后，您可以通过GetTableData控制器

中的Home操作返回部分视图

public Action GetTableData(int id)
{
 //get data from database and fill it in your view model
 return PartialView("_MyTableView",model);
}

在ajax成功通话中你可以这样做

$.ajax({
            cache: false,
            type: "GET",
            url: "/Home/GetTableData/",
            data: { "id": 1 },
            success: function (data) {
               $('#dashboard').empty().html(data);
            },
            error: function (xhr, ajaxOptions, throwError) {
                alert("Error");
                $('#dashboard').hide();
            }
        });

Answer 2

我使用的方法是：

<script language="javascript" type="text/javascript">
    $(function () {
        $('#dashboard').hide();
        $("#OneBtn").click(function () {
            $('#dashboard').hide();
            $("#dashboard").empty();
            $.ajax({
                cache: false,
                type: "GET",
                url: "/Home/GetTableData/",
                data: { "id": 1 },
                success: function (data) {
                    var myTable = $('#dashboard');

                    if (data.length > 0)
                    {
                        var firstRecord = data[0];

                        var headerRow = $('<thead>');
                        for (var columnTitle in firstRecord)
                        {
                            headerRow.append($('<th>', {text: columnTitle}));
                        }

                        myTable.append(headerRow);

                        var record;
                        var dataRow;
                        for (var dataIndex = 0; dataIndex < data.length; dataIndex++)
                        {
                            record = data[dataIndex];
                            dataRow = $('<tr>');

                            for (var column in firstRecord)
                            {
                                dataRow.append($('<td>', { text: record[column] }));
                            }

                            myTable.append(dataRow);
                        }
                    }
                    $('#dashboard').show();
                },
                error: function (xhr, ajaxOptions, throwError) {
                    alert("Error");
                    $('#dashboard').hide();
                }
            });
        });
    });
</script>

这将创建在列标题后面命名的行并显示表。希望这对于遇到这种情况的其他人来说是一个有用的解决方案。

将预先填充的动态表转换为AJAX填充表

2 个答案: