Problème Datatable.NET appel AJAX pour charger l'index

Bonjour,

j'ai une vue en asp MVC VB.NET qui est une page d'index. Sur cette page j'ai une table qui utilise le plug in DATATABLE.NET que je tente de charger via une requete ajax qui me retourne un JSON.

L'appel AJAX retourne bien mon JSON mais la table ne se charge pas. Je ne comprend pas du tout ce qui ne va pas. Pourtant j'ai suivit l'exemple et rien n'y fais.
Auriez-vous une idée ?

voici la vue :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
 
@ModelType IEnumerable(Of Election.Assesseur)
@Code
ViewData("Title") = "Index"
End Code
 
<h2>Index</h2>
 
<p>
    @Html.ActionLink("Create New", "Create")
</p>
<table id="tableIndex" class="table display compact cell-border">
    <thead>
        <tr>
            <th>
                @Html.DisplayNameFor(Function(model) model.Id)
            </th>
            <th>
                @Html.DisplayNameFor(Function(model) model.NomPrenom)
            </th>
            <th>
                @Html.DisplayNameFor(Function(model) model.Adresse)
            </th>
 
            <th>
                @Html.DisplayNameFor(Function(model) model.Bureau)
            </th>
 
            <th>
                @Html.DisplayName("R")
            </th>
            <th>
                @Html.DisplayName("O")
            </th>
            <th>
                @Html.DisplayName("BV")
            </th>
            <th>
                @Html.DisplayNameFor(Function(model) model.Profession)
            </th>
            <th>
                @Html.DisplayName("Fonc elec")
            </th>
 
            <th></th>
        </tr>
    </thead>
 
    <tbody>
 
    </tbody>
</table>
 
<script src="~/Scripts/jquery-3.4.1.min.js"></script>
<script src="~/Scripts/jquery-ui-1.12.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="~/Content/jquery-DataTables.min.css" />
<script src="~/Scripts/jquery-DataTable.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script>
    $(function () {
        $.noConflict();
 
        $('#tableIndex').DataTable({
            "language": {
                "processing": "Traitement en cours...",
                "search": "Rechercher :",
                "lengthMenu": "Affiche _MENU_ demandes par page",
                "zeroRecords": "Rien trouvé - Désolé",
                "info": "Affiche page _PAGE_ sur _PAGES_",
                "infoEmpty": "Pas de demande disponible",
                "infoFiltered": "(filtré sur _MAX_ demande(s))",
                "loadingRecords": "Chargement en cours...",
                "emptyTable": "Aucune donn&eacute;e disponible dans le tableau",
                "paginate":
                    {
                        "first": "Premier",
                        "previous": "Pr&eacute;c&eacute;dent",
                        "next": "Suivant",
                        "last": "Dernier"
                    },
                "aria":
                    {
                        "sortAscending": ": activer pour trier la colonne par ordre croissant",
                        "sortDescending": ": activer pour trier la colonne par ordre décroissant"
                    }
            },
            "scrollY": "800px",
            "scrollCollapse": true,
            "serverSide": true,
            "ajax": {
                "url": '@Url.Action("GetAssesseur", "Adress")',
                "type": "POST"
            },
            "columns": [
                { "data": "Id" },
                { "data": "NomPrenom" },
                { "data": "Adresse" },
                { "data": "Bureau" },
                { "data": "CodeReception" },
                { "data": "Origine" },
                { "data": "BureauVote" },
                { "data": "Profession" },
                { "data": "FonctionElecteur" }
            ]
            //"ajax": "Adress/GetAssesseur/"
        });
    });
</script>

la méthode qui est bien appelée :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
Function GetAssesseur()
            Dim obj As Object
            Dim lstAsses As List(Of Assesseur) = New List(Of Assesseur)
            Dim lstAdres As List(Of AdressDT) = ctx.AdressDT.OrderBy(Function(x) x.ADKEYALPH).ToList
 
            For Each item As AdressDT In lstAdres
                lstAsses.Add(New Assesseur With {.Id = item.ADkeyNUM, .NomPrenom = item.ADNOMPREN, .Adresse = item.Adresse, _
                                                 .Bureau = item.InfoBureau, .BureauVote = item.AdnBureau, .CodeReception = item.ADcodRecep, _
                                                 .FonctionElecteur = item.AdFonElec, .Origine = item.AdOrigine, .Profession = item.AdProfess})
            Next
 
            Try
                obj = JsonConvert.SerializeObject(lstAsses, Formatting.Indented, New JsonSerializerSettings With {.ReferenceLoopHandling = Newtonsoft.Json.ReferenceLoopHandling.Ignore})
            Catch ex As Exception
 
            End Try
 
            Return New JsonResult() With {.Data = obj, .ContentEncoding = Encoding.Default, .ContentType = "application/json", .JsonRequestBehavior = JsonRequestBehavior.AllowGet, .MaxJsonLength = Integer.MaxValue}
            'Return Json(obj, JsonRequestBehavior.AllowGet)
        End Function

Une partie du JSON :

Code:

1
2
 
"[\r\n  {\r\n    \"Id\": 2877,\r\n    \"NomPrenom\": \"xxxxxx\",\r\n    \"Adresse\": \"xxxxxxxxxx\",\r\n    \"Bureau\": \"_ 25  ...\",\r\n    \"CodeReception\": \"_\",\r\n    \"Origine\": \"\",\r\n    \"BureauVote\": \"25\",\r\n    \"FonctionElecteur\": \"\",\r\n    \"Profession\": \"xxxxxxxxx\"\r\n  },\r\n  {\r\n    \"Id\": 2111,\r\n    \"NomPrenom\": \"xxxxxxx\",\r\n    \"Adresse\": \"xxxxxxxxxxxxxxxxx\",\r\n    \"Bureau\": \"_ 19  ...\",\r\n    \"CodeReception\": \"_\",\r\n    \"Origine\": \"\",\r\n    \"BureauVote\": \"19\",\r\n    \"FonctionElecteur\": \"\",\r\n    \"Profession\": \"xxxxx\"\r\n  }, ... }\r\n]"

J'avoue que je n'y comprend rien ... Car cela me semble tout correct.