ASP.net MVC Data Table Ajax Error

Question

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?

According to the error message, Ajax call failed. The page datatables.net/tn/7 explains how to get Http error from your browser. Please follow these instructions and post the information here. — Daniel Manta
– Daniel Manta, Commented Jun 12, 2017 at 2:31
check this , it might help :codeproject.com/Articles/1114208/… — Ehsan Sajjad
– Ehsan Sajjad, Commented Jun 12, 2017 at 2:32
@derloopkat 2jquery.validate.unobtrusive.min.js Failed to load resource: the server responded with a status of 404 (Not Found) :3423/home/GetEmployees?_=1497233865564 Failed to load resource: the server responded with a status of 500 (Internal Server Error) — Nicole Ramírez
– Nicole Ramírez, Commented Jun 12, 2017 at 2:38
Try comment out two lines: <script src="~/Scripts/jquery.validate.min.js"></script> <script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script> — Tomato32
– Tomato32, Commented Jun 12, 2017 at 2:43

Nicole Ramírez · Accepted Answer · 2017-06-12 03:06:42Z

3

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

answered Jun 12, 2017 at 3:06

Nicole Ramírez

3453 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

ASP.net MVC Data Table Ajax Error

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related