3

Trabajo con ASP.NET MVC, estoy utilizando la librería DataTable.net

Estoy trayendo datos desde la base de datos por medio de un JsonResult que me devuelve la información en un texto plano.

Método

// 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);
    }

Desde el 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"
            }
        }
    });
});

El problema es que me muestra una pagina con la siguiente información JSON

Creo el tema pasa por dejar el Index como ActionResult y crear un método JsonResult que cargue la table.

Actualizando como tengo mis métodos. Controller

 // 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"
            }
        }
    });
});

Error DataTables warning: table id=clientes - Requested unknown parameter '0' for row 0, column 0. For more information about this error, please see

4
  • porque no devuelves un JsonResult en vez de un ActionResult, hasta donde entiendo el ActionResult devuelve una pagina nueva por así decirlo y el JsonResult solo devuelve un Json
    – JuankGlezz
    Commented el 7 dic. 2017 a las 19:56
  • @JuankGlezz También he probado con ActionResult creo debo ser una método ActionResult el cual llamae a un método JsonResult que obtenga los datos y devolver una view. Commented el 7 dic. 2017 a las 20:00
  • solo una duda el controlador index es llamado al cargar la vista previamente o es un método sin pagina?
    – JuankGlezz
    Commented el 7 dic. 2017 a las 20:11
  • @JuankGlezz No pude responderte antes había salido a hacer unos tramites, respondiendo a tu pregunta en el Action Index solo devuelvo una vista. Commented el 9 dic. 2017 a las 16:52

1 respuesta 1

1

Mi duda es igual a la de JuankGlezz puesto que si tu metodo Index retorna un Json no puedes llamar la vista Index al mismo tiempo. Pero voy a ponerte un ejemplo claro de tu pregunta.

Tenemos el método Index el cual llama a la vista Index que contiene una Tabla(DataTable) donde se muestran los clientes.

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

La vista tienen lo siguiente:

    @*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>
}

Si te fijas el script quedó mas corto al eliminar parámetros que al final se llaman por defecto, como son busqueda, paginación y filtrado. La parte interesante es donde se difine la opción url la cual defino con el Helper @Url.Action que trae ASP. Esto por defecto pasa a nuesto controlador como GET por eso creo un método el cual retorne un Json con un listado de Clientes. Quedando de esta forma:

    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 TE PERMITE RESPONDER CON JSON A PETICIONES DE TIPO GET, SI NO LO PONES TE DARÍA UN ERROR 500. Otra parte importante es declarar "dataSrc": '' en tu scrip para trabajar con un array Json. De esta forma funciona perfectamente espero te sea de ayuda

5
  • Me sale el siguiente error: DataTables warning: table id=clientes - Requested unknown parameter '0' for row 0, column 0. For more information about this error, please see datatables.net/tn/4, respondiendo a tu pregunta en el Action Index solo muestro una vista. Commented el 9 dic. 2017 a las 16:48
  • Voy a poner mi código de nuevo, voy actualizar mi pregunta. Commented el 9 dic. 2017 a las 16:50
  • Amigo prueba copiar textualmente mi ejemplo que funciona, tanto la vista como el controlador y si tu Index muestra una vista entonces deberias crear otro metodo para retornar la lista de Clientes en formato Json, tal y como te lo he mostrado. Saludos Commented el 11 dic. 2017 a las 12:36
  • He probado tu código y me da el mismo erro, los campos que traigo en mi consulta que son 9 y en el JSON solo necesito 7, esa puede ser la causa del problema?, ¿puedes mostrar una imagen de la carga de datos del datatable.net? Commented el 12 dic. 2017 a las 21:24
  • No salía por que falto llamar al método json desde el action Index, ya lo puse y salió. Commented el 15 dic. 2017 a las 1:03

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.