Home / Questions / 123320
Accepted
Pedro Ávila
Asked: 2020-12-08 11:02:51 +0800 CST 2020-12-08 11:02:51 +0800 CST

使用来自 JSON 的数据填充数据表

  • 772

我使用 ASP.NET MVC，我正在使用DataTable.net库

我通过以纯文本形式返回信息的 JsonResult 从数据库中获取数据。

方法

// GET: Cliente
    public ActionResult Index()
    {
        List<Cliente> _cliente = clienteService.GetAll().ToList();
        config = new MapperConfiguration(cfg => cfg.CreateMap<Cliente, ClienteViewModel>());
        List<ClienteViewModel> list = config.CreateMapper().Map<List<ClienteViewModel>>(_cliente);
        return Json(list, JsonRequestBehavior.AllowGet);
    }

从 HTML

<script type="text/javascript" language="javascript">
$(document).ready(function() {
    $("#clientes").DataTable({
        paging: true,
        searching: true,
        bProcessing: true,
        "ajax": {
            "url": "Cliente/Index",
            "columns": [
                { "data": "ClienteId" },
                { "data": "RazonSocial" },
                { "data": "NumeroDocumento" },
                { "data": "Direccion" },
                { "data": "Fijo" },
                { "data": "Email" },
                { "data": "Estado" }
            ],
            "dataType": "json"
        },
        "language": {
            "sProcessing": "Procesando...",
            "sLengthMenu": "Mostrar _MENU_ registros",
            "sZeroRecords": "No se encontraron resultados",
            "sEmptyTable": "Ningún dato disponible en esta tabla",
            "sInfo": "Mostrando registros del _START_ al _END_ de un total de _TOTAL_ registros",
            "sInfoEmpty": "Mostrando registros del 0 al 0 de un total de 0 registros",
            "sInfoFiltered": "(filtrado de un total de _MAX_ registros)",
            "sInfoPostFix": "",
            "sSearch": "Buscar:",
            "sUrl": "",
            "sInfoThousands": ",",
            "sLoadingRecords": "Cargando...",
            "oPaginate": {
                "sFirst": "Primero",
                "sLast": "Último",
                "sNext": "Siguiente",
                "sPrevious": "Anterior"
            },
            "oAria": {
                "sSortAscending": ": Activar para ordenar la columna de manera ascendente",
                "sSortDescending": ": Activar para ordenar la columna de manera descendente"
            }
        }
    });
});

问题是它向我显示了一个包含以下信息的页面 JSON

我认为问题是将索引保留为 ActionResult 并创建一个加载表的 JsonResult 方法。

更新，因为我有我的方法。控制器

 // GET: Cliente
    public ActionResult Index()
    {
        return View();
    }

    public JsonResult ListaClientes()
    {
        List<Cliente> _cliente = clienteService.GetAll().ToList();
        config = new MapperConfiguration(cfg => cfg.CreateMap<Cliente, ClienteViewModel>());
        List<ClienteViewModel> list = config.CreateMapper().Map<List<ClienteViewModel>>(_cliente);
        return Json(list, JsonRequestBehavior.AllowGet);
    }

HTML

<script type="text/javascript" language="javascript">
$(document).ready(function() {
    $("#clientes").DataTable({
        //paging: true,
        //searching: true,
        //bProcessing: true,
        "ajax": {
            "url": "@Url.Action("ListaClientes")",
            "dataSrc": '',
            "type": "GET",
            "columns": [
                { "data": "ClienteId" },
                { "data": "RazonSocial" },
                { "data": "NumeroDocumento" },
                { "data": "Direccion" },
                { "data": "Fijo" },
                { "data": "Email" },
                { "data": "Estado" }
            ],
            //"dataType": "json"
        },
        "language": {
            "sProcessing": "Procesando...",
            "sLengthMenu": "Mostrar _MENU_ registros",
            "sZeroRecords": "No se encontraron resultados",
            "sEmptyTable": "Ningún dato disponible en esta tabla",
            "sInfo": "Mostrando registros del _START_ al _END_ de un total de _TOTAL_ registros",
            "sInfoEmpty": "Mostrando registros del 0 al 0 de un total de 0 registros",
            "sInfoFiltered": "(filtrado de un total de _MAX_ registros)",
            "sInfoPostFix": "",
            "sSearch": "Buscar:",
            "sUrl": "",
            "sInfoThousands": ",",
            "sLoadingRecords": "Cargando...",
            "oPaginate": {
                "sFirst": "Primero",
                "sLast": "Último",
                "sNext": "Siguiente",
                "sPrevious": "Anterior"
            },
            "oAria": {
                "sSortAscending": ": Activar para ordenar la columna de manera ascendente",
                "sSortDescending": ": Activar para ordenar la columna de manera descendente"
            }
        }
    });
});

错误 DataTables 警告：表 id=customers - 为第 0 行第 0 列请求未知参数“0”。有关此错误的更多信息，请参阅

ajax

1 Answers

  1. Best Answer

    我的疑问与 JuankGlezz 的疑问相同，因为如果您的 Index 方法返回 Json，则您不能同时调用 Index 视图。但我要给你一个明确的例子来说明你的问题。

    我们有 Index 方法，它调用包含显示客户端的 Table(DataTable) 的 Index 视图。

        public ActionResult Index()
    {
        return View();
    }

    该视图具有以下内容：

        @*ESTO YA NO LO NECESITAS YA QUE LOS CLIENTES VIENEN EN UN JSON*@
    @*@model IEnumerable<WebApp1.Models.Cliente>*@

    @{
       ViewBag.Title = "Index";
    }

    <h2>Index</h2>

    <p>
      @Html.ActionLink("Create New", "Create")
    </p>
<table id="clientes" class="display">
    <thead>
        <tr>
            <th>
                Id
            </th>
            <th>
                RazonSocial
            </th>
            <th>
                NumeroDocumento
            </th>
            <th>
                Direccion
            </th>
            <th>
                Fijo
            </th>
            <th>
                Email
            </th>
            <th>
                Estado
            </th>
        </tr>
    </thead>
</table>
@section scripts
{
    <script>
        $(document).ready(function () {
            $("#clientes").DataTable({
                ajax: {
                    "url": "@Url.Action("ListadoClientes")",
                    "dataSrc": ''
                },
                columns: [
                    { "data": "ClienteId" },
                    { "data": "RazonSocial" },
                    { "data": "NumeroDocumento" },
                    { "data": "Direccion" },
                    { "data": "Fijo" },
                    { "data": "Email" },
                    { "data": "Estado" }
                ]
            });
        });
    </script>
}

    如果仔细观察，脚本会在删除末尾默认调用的参数时更短，例如busqueda,paginación和filtrado. 有趣的部分是定义选项的地方，我用ASP 带来url的 Helper来定义它。@Url.Action默认情况下，这会传递给我们的控制器，因为这就是GET为什么我创建一个返回带有客户端列表的 Json 的方法。这样：

        public class ClienteController : Controller
    {
        private ApplicationDbContext db = new ApplicationDbContext();

        // GET: /Cliente/
        public ActionResult Index()
        {
            ListadoClientes();
            return View();
        }

        public JsonResult ListadoClientes()
        {
            var clientes = db.Clientes.ToList();
            return Json(clientes, JsonRequestBehavior.AllowGet);
        }
        .......
}

    JsonRequestBehavior.AllowGet它允许您使用 JSON 响应来获取类型请求，如果您不输入它，它会给您一个 500 错误。另一个重要部分是"dataSrc": ''在您的脚本中声明以使用 Json 数组。这样可以完美运行，希望对您有所帮助

    • 1