CODEWITHSUNDEEP
c#asp.netajaxasp.net-mvc
Nicole Ramírez
Nicole Ramírez

Reputation: 345

ASP.net MVC Data Table Ajax Error

Im creating my firts MVC app, this app should thisplays in Data Table all the info Stored in my Tables "Clientes", this table was created using SQL Server andis being link to my project using Entity Framework.

but when i run my code I got this error message: 

DataTables warning: table id=myDataTable - Ajax error. For more information about this error, please see http://datatables.net/tn/7


@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" class="tablecontainer" />
    <title>Index</title>
    <!--Hojas de estilo ( Archivos planos de texto para poner estilos a mis etiquetas)-->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css" />
    <link href="~/Content/themes/base/jquery-ui.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="~/Style/miprimerStyle.css" />
</head>
<body>
    <!--Ancho del padre-->
    <div class="tamaño" id="tamaño"> 
        <!--a es hipervinculos-->
        <a class="popup btn btn-primary Margin20" href="/home/save/0" >Agregar un nuevo cliente </a>
        <table id="myDataTable">
            <thead>
                <!--Fila-->
                <tr>
                    <!--Columna-->
                    <th>Nombre</th> 
                    <th>Apellido</th>
                    <th>Telefono</th>
                </tr>
            </thead>
        </table>
    </div>
    <script src="~/Scripts/jquery-3.1.1.min.js"></script>
    <script src="~/Scripts/jquery.validate.min.js"></script>
    <script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
    <script src="~/Scripts/jquery-ui-1.12.1.min.js"></script>
    <script>
        $(document).ready(function () {
            var oTable = $('#myDataTable').DataTable({
                "ajax": {
                    "url" : '/home/GetEmployees',
                    "type" : "get",
                    "datatype" : "json"
                },
                "columns": [
                    { "data": "Nombre", "autoWidth": true },
                    { "data": "Apellido", "autoWidth": true },
                    { "data": "Telefono", "autoWidth": true },
                ]
            })
        })
    </script>
</body>
</html>

and this is my Home Controller:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Script.Serialization;

namespace TestDeConocimientos.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }
        public ActionResult GetEmployees()
        {
            using (TerasysDBEntities1 dc = new TerasysDBEntities1())
            {
               var clientes = dc.Clientes.OrderBy(a => a.Nombre).ToList();
               return Json(new { data = clientes }, JsonRequestBehavior.AllowGet);
            }
        }
    }
}

I also put a breakpoint at the line:

var clientes = dc.Clientes.OrderBy(a => a.Nombre).ToList();

and I could See that ll the Data is perfectly stored on the Var "Clients"

What is happening Here?

Upvotes: 2

Views: 1586

Answers (1)

Nicole Ram&#237;rez
Nicole Ram&#237;rez

Reputation: 345

Solved:

public ActionResult GetEmployees()
        {
            using (TerasysDBEntities1 dc = new TerasysDBEntities1())
            {
                dc.Configuration.LazyLoadingEnabled = false;
                var clientes = dc.Clientes.OrderBy(a => a.Nombre).ToList();
                return Json(new { data = clientes }, JsonRequestBehavior.AllowGet);
            }
        }

Upvotes: 3

Related Questions