load data with ajax and .net core

Question

good morning, I have the following problem to solve.

I show you the context

 

I have a project with .net core 3.1 and mvc in which by means of scafolding I connect to the database, the models, controllers and views were created, execute the application and effectively everything should be running dome. but actually what I want is to do a crud with jquery and ajax, and that's when I already have a problem, for this I go on to show the code I have.

 mi Controller

public ComAnticipoesController(ChilyContext context)
        {
            _context = context;
        }

        // GET: ComAnticipoes
        public async Task<IActionResult> Index()
        {
            return View(await _context.ComAnticipos.ToListAsync());
        }

 a View Index

@model IEnumerable<DBfirts.Models.ComAnticipo>

@{
    ViewData["Title"] = "Index";
}

<h1>Index</h1>

<p>
    <a asp-action="Create">Create New</a>
</p>
<table id="example" class="table table-striped table-bordered" style="width:100%">
    <thead>
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.EmpresaId)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.TipoAnticipoId)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.AnticipoNro)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Fecha)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.PedCompraId)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.ProveedorId)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.MonedaId)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.TipoCambio)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.AnticipoDes)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.AnticipoObs)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.MontoAnt)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.MontoDes)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.GestionId)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.TipoCompId)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.CompNro)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.PlanId)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.EstadoId)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.SLastUpdateId)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.DtLastUpdateDt)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.IConcurrencyId)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.ConFac)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.SinFac)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.CentroCostoId)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.AnticipoOrden)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.AnticipoIdOrg)
            </th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.EmpresaId)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.TipoAnticipoId)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.AnticipoNro)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Fecha)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.PedCompraId)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.ProveedorId)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.MonedaId)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.TipoCambio)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.AnticipoDes)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.AnticipoObs)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.MontoAnt)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.MontoDes)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.GestionId)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.TipoCompId)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.CompNro)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.PlanId)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.EstadoId)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.SLastUpdateId)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.DtLastUpdateDt)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.IConcurrencyId)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.ConFac)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.SinFac)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.CentroCostoId)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.AnticipoOrden)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.AnticipoIdOrg)
                </td>
                <td>
                    <a asp-action="Edit" asp-route-id="@item.AnticipoId">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pencil" viewBox="0 0 16 16">
                            <path fill-rule="evenodd" d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5L13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5zm-9.761 5.175l-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325z" />
                        </svg>
                    </a> |
                    <a asp-action="Details" asp-route-id="@item.AnticipoId">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-eye" viewBox="0 0 16 16">
                            <path fill-rule="evenodd" d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.134 13.134 0 0 0 1.66 2.043C4.12 11.332 5.88 12.5 8 12.5c2.12 0 3.879-1.168 5.168-2.457A13.134 13.134 0 0 0 14.828 8a13.133 13.133 0 0 0-1.66-2.043C11.879 4.668 10.119 3.5 8 3.5c-2.12 0-3.879 1.168-5.168 2.457A13.133 13.133 0 0 0 1.172 8z" />
                            <path fill-rule="evenodd" d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z" />
                        </svg>
                    </a> |
                    <a asp-action="Delete" asp-route-id="@item.AnticipoId">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16">
                            <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z" />
                            <path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4L4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z" />
                        </svg>
                    </a>
                </td>
            </tr>

        }

    </tbody>

</table>

 

In the _Layout.cshtml, I made the following change

<li class="nav-item">
                            @*<a id="anticipo" class="nav-link text-dark" asp-area="" asp-controller="ComAnticipoes" asp-action="Index">Anticipos</a>*@
                            <a id="anticipo" class="nav-link text-dark" asp-area="" >Anticipos</a>
                        </li>

 

 

and add at the bottom this script

 

<script>
        $("#anticipo").click(function () {
            //alert("Hola mundo")
            CargarDatos();
        });
        function CargarDatos() {
            $.ajax({
                type: "Get",
                //url: "ComAnticipoes/Index",
                url: "@Url.Content("~/ComAnticipoes/Index")",
                cache: false,
                success: function (dataHtml) {
                    $("~/#example").html(dataHtml);
                }
            });
        }

    </script>

I tried some other options in the url thinking that it might not find the Index sheet or view but I have not managed to load my data.

 

Please help me to solve my problem and see what my mistake was

Thanks you

 

Roberto