tête Datatable D'accord, mais le corps de connexion Datatable à Api - pas de données de retour

Question

Ce sont mes erreurs dans le navigateur:

Impossible de charger la ressource: le serveur a répondu avec un statut de 404 (non trouvé)

jquery .datatables.js: 3406 Uncaught TypeError: Impossible de lire la propriété 'longueur' undefined

Voici la réponse JSON directe:

est ici la source de la page:

@model IEnumerable<SE01.Models.BMFixture> 
 

 
@{ 
 
    ViewBag.Title = "Fixtures"; 
 
    Layout = "~/Views/Shared/_Layout.cshtml"; 
 
} 
 
<h2>Fixtures</h2> 
 

 
<table id="bmfixtures" class="table table-bordered table-hover"> 
 
    <thead> 
 
     <tr> 
 

 
      <th>Market</th> 
 
      <th>Market</th> 
 
      <th>Selection</th> 
 
      <th>Bookmaker</th> 
 
      <th>Odds</th> 
 
      <th>Delete</th> 
 

 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
      
 
    </tbody> 
 
</table> 
 

 

 
@section scripts 
 
{ 
 
    <script> 
 
     $(document).ready(function() { 
 
      $("#bmfixtures").DataTable({ 
 
       ajax: { 
 
        url: "/Api/BMFixtures", 
 
        datasrc: "" 
 
       }, 
 
       columns: [ 
 
        { 
 
         data: "marketname", 
 
         render: function(data, type, bmfixture) { 
 
          return "<a href='/bmfixtures/edit/" + bmfixture.Id + "'>" + bmfixture.marketname + "</a>"; 
 
         } 
 
        }, 
 
        { 
 
         data: "marketname" 
 
        }, 
 
        { 
 
         data: "selectionname" 
 
        }, 
 
        { 
 
         data: "bookmakername" 
 
        }, 
 
        { 
 
         data: "bookmakerodds" 
 
        }, 
 
        { 
 
         data: "id", 
 
         render: function(data) { 
 
          return "<button class='btn-link js-delete' data-bmfixture-id=" + data + ">Delete</button>"; 
 
         } 
 
        } 
 

 
       ] 
 
      }); 
 

 
      $("#bmfixtures").on("click", " .js-delete", function() { 
 
       var button = $(this); 
 

 
       if (confirm("Are you sure you want to delete this fixture?")) { 
 
        $.ajax({ 
 
         url: "/api/bmfixtures/" + button.attr("data-bmfixture-id"), 
 
         method: "DELETE", 
 
         success: function() { 
 
          button.parents("tr").remove(); 
 
         } 
 
        }); 
 
       } 
 
      }); 
 
     }); 
 
    </script> 
 
}

Answer 1

Salut j'ai essayé une démo simple et il semble fonctionner très bien, mais je ne suis pas vous en utilisant les données, donc peut-être un problème avec le format JSON. Seules les choses que j'ai différemment doivent utiliser des guillemets simples et qualifier complètement l'URL - essayez donc (par exemple url: "http://localhost:60241/api/bmfixtures")

Exemple (ont changé les données dans les liens, etc. vous obtenez tellement idée):

@{ 
    ViewBag.Title = "Fixtures"; 
    Layout = "~/Views/Shared/_Layout.cshtml"; 
} 
<h2>Fixtures</h2> 

<table id="bmfixtures" class="table table-bordered table-hover"> 
    <thead> 
     <tr> 
      <th></th> 
      <th>id</th> 
      <th>type</th> 
      <th>text</th> 
      <th></th> 
     </tr> 
    </thead> 
    <tbody></tbody> 
</table> 

@section scripts 
{ 
    <script> 

     $("#bmfixtures").DataTable({ 
      ajax: { 
       // Replace below line with: url: "http://localhost:60241/api/bmfixtures", (in your version) 
       url: "http://api.scb.se/OV0104/v1/doris/en/ssd", 
       dataSrc: '' 
      }, 
      columns: [ 
       { 
        data: 'id', 
        render: function (data, type, bmfixture) { 
         return "<a href='/bmfixtures/edit/" + bmfixture.id + "'>" + bmfixture.id + "</a>"; 
        } 
       }, 
       { data: 'id' }, 
       { data: 'type' }, 
       { data: 'text' }, 
       { 
        data: 'id', 
        render: function (data) { 
         return "<button class='btn-link js-delete' data-bmfixture-id=" + data + ">Delete</button>"; 
        } 
       } 
      ] 
     }); 
    </script> 
}