load data with ajax and .net core

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 Index()
{
return View(await _context.ComAnticipos.ToListAsync());
}

a View Index

@model IEnumerable<DBfirts.Models.ComAnticipo>
@{
ViewData["Title"] = "Index";
}
<h1>Indexh1>
<p>
<a asp-action="Create">Create Newa>
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">Anticiposa>*@
<a id="anticipo" class="nav-link text-dark" asp-area="" >Anticiposa>
li>

and add at the bottom this 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

2 Replies

Know the answer? Post it — somebody with the same question will find it here.

Mageshwaran R5y ago
Please refer this link,

https://www.c-sharpcorner.com/article/crud-operation-in-asp-net-mvc-using-ajax-and-bootstrap/
Sachin Singh5y ago
You have 3 buttons Edit,Details and Delete
and you want to Show Details, Edit Details and Delete particular Detail.
You need three method for these and accordingly send ajax request
for example follow below appraoch
    @model IEnumerable

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


Index


    "MyEditArea">
"Create">Create New
"example" class="table table-striped table-bordered" style="width:100%">
@Html.DisplayNameFor(model => model.EmpresaId)
@Html.DisplayNameFor(model => model.TipoAnticipoId)
@Html.DisplayNameFor(model => model.AnticipoNro)
@Html.DisplayNameFor(model => model.Fecha)
@Html.DisplayNameFor(model => model.PedCompraId)
@Html.DisplayNameFor(model => model.ProveedorId)
@Html.DisplayNameFor(model => model.MonedaId)
@Html.DisplayNameFor(model => model.TipoCambio)
@Html.DisplayNameFor(model => model.AnticipoDes)
@Html.DisplayNameFor(model => model.AnticipoObs)
@Html.DisplayNameFor(model => model.MontoAnt)
@Html.DisplayNameFor(model => model.MontoDes)
@Html.DisplayNameFor(model => model.GestionId)
@Html.DisplayNameFor(model => model.TipoCompId)
@Html.DisplayNameFor(model => model.CompNro)
@Html.DisplayNameFor(model => model.PlanId)
@Html.DisplayNameFor(model => model.EstadoId)
@Html.DisplayNameFor(model => model.SLastUpdateId)
@Html.DisplayNameFor(model => model.DtLastUpdateDt)
@Html.DisplayNameFor(model => model.IConcurrencyId)
@Html.DisplayNameFor(model => model.ConFac)
@Html.DisplayNameFor(model => model.SinFac)
@Html.DisplayNameFor(model => model.CentroCostoId)
@Html.DisplayNameFor(model => model.AnticipoOrden)
@Html.DisplayNameFor(model => model.AnticipoIdOrg)
@foreach (var item in Model)
{
@Html.DisplayFor(modelItem => item.EmpresaId)
@Html.DisplayFor(modelItem => item.TipoAnticipoId)
@Html.DisplayFor(modelItem => item.AnticipoNro)
@Html.DisplayFor(modelItem => item.Fecha)
@Html.DisplayFor(modelItem => item.PedCompraId)
@Html.DisplayFor(modelItem => item.ProveedorId)
@Html.DisplayFor(modelItem => item.MonedaId)
@Html.DisplayFor(modelItem => item.TipoCambio)
@Html.DisplayFor(modelItem => item.AnticipoDes)
@Html.DisplayFor(modelItem => item.AnticipoObs)
@Html.DisplayFor(modelItem => item.MontoAnt)
@Html.DisplayFor(modelItem => item.MontoDes)
@Html.DisplayFor(modelItem => item.GestionId)
@Html.DisplayFor(modelItem => item.TipoCompId)
@Html.DisplayFor(modelItem => item.CompNro)
@Html.DisplayFor(modelItem => item.PlanId)
@Html.DisplayFor(modelItem => item.EstadoId)
@Html.DisplayFor(modelItem => item.SLastUpdateId)
@Html.DisplayFor(modelItem => item.DtLastUpdateDt)
@Html.DisplayFor(modelItem => item.IConcurrencyId)
@Html.DisplayFor(modelItem => item.ConFac)
@Html.DisplayFor(modelItem => item.SinFac)
@Html.DisplayFor(modelItem => item.CentroCostoId)
@Html.DisplayFor(modelItem => item.AnticipoOrden)
@Html.DisplayFor(modelItem => item.AnticipoIdOrg)
"Edit" class="btnEdit" data-id="@item.AnticipoId">
"http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pencil" viewBox="0 0 16 16">
"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" />
|
"Details" class="btnDetails" data-id="@item.AnticipoId">
"http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-eye" viewBox="0 0 16 16">
"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" />
"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" />
|
"Delete" class="btnDelete" data-id="@item.AnticipoId">
"http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16">
"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" />
"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" />
}
public async Task Index()
{
return View(await _context.ComAnticipos.ToListAsync());
}
public async Task Edit(int Id)
{
return PartialView("_EditPartial",await _context.ComAnticipos.where(x=>x.AnticipoId==Id).singleOrDefault());
}
public async Task Delete(int Id)
{
var obj=_context.ComAnticipos.where(x=>x.AnticipoId==Id).singleOrDefault();
_context.ComAnticipos.Remove(obj);
_context.SaveChanges();
return View("Index");
}
....Partial view [Name=_EditPartial ]......
@model DBfirts.Models.ComAnticipo
@Model.TipoAnticipoId)
@Model.AnticipoNro)
@Model.item.Fecha)
@Model.PedCompraId)
@Model.item.ProveedorId)
@Model.MonedaId)
....
................