Updating a list with ajax and razor - ajax

Question

I have a page in asp.net core razor, which is updating the database. I use ajax to go to the controller, the world is done, but I am not able to update the list that the ajax method returns.
This is my ajax method:
$.ajax(
{
url: "/Uploader/Update",
type: 'post',
data: {
Id: valor
},
success: function (data) {
$("#LaudosDocumentos").html(data);
}
})
Here is my Controller:
public async Task<IActionResult> Update(int Id)
{
ApplicationUser user = await _userManager.GetUserAsync(User);
if (!ModelState.IsValid)
{
return NotFound();
}
Laudos = _context.Laudos.Find(Id);
Laudos.Excluido = true;
Laudos.AlteracaoUsuId = user.Id;
_context.Attach(Laudos).State = EntityState.Modified;
await _context.SaveChangesAsync();
Id = Laudos.PessoaId;
LaudosDocumentos = await _context.Laudos.Where(m => m.PessoaId == Id && m.Excluido == false).ToListAsync();
return Json( new { LaudosDocumentos });
}
This is my page cshtml:
<div class="col-sm">
#if (Model.LaudosDocumentos.Count > 0)
{
<label class="control-label" style="margin-left:10px">
Arquivo(s) encontrado(s)
</label>
}
else
{
<label class="control-label" style="margin-left:10px">
Nenhum arquivo foi enviado para analise.
</label>
}
<div class="btn btn-default btn-file">
#foreach (var item in Model.LaudosDocumentos)
{
var ponto = item.Caminho.IndexOf(".");
var extensao = item.Caminho.Substring(ponto + 1);
if (extensao == "png" || extensao == "jpg" || extensao == "gif" || extensao == "jpeg")
{
<a class="example-image-link" href="/uploads/#Html.DisplayFor(modelItem => item.PessoaId)/#Html.DisplayFor(modelItem => item.Caminho)" data-lightbox="example-set" data-title="">
<img src="/uploads/#Html.DisplayFor(modelItem => item.PessoaId)/#Html.DisplayFor(modelItem => item.Caminho)" class="img-thumbnail" alt="Laudos" style="width:200px; height:200px;" />
</a>
<span style="font-size:23px; margin-left:10px;"> <i class="far fa-trash-alt" onclick="ExcluirArquivo(#Html.DisplayFor(modelItem => item.Id));"></i></span>
<span> <i class="far fa-trash-alt" onclick="ExcluirArquivo(#Html.DisplayFor(modelItem => item.Id));"></i></span>
}
}
</div>
</div>
I just need to update the list Model.LaudosDocumentos
but without having to pass the Id of a div.
I've tried to pass the item value in ajax but it also didn't work.

Answer 1

Json( new { LaudosDocumentos }) will return Json data , you should create your html markup and associated with Json value using Javascript , here is code sample .
If you don't want to create html in javscript manually , you can put the whole <div> to partial view , and use ajax to call server side function to query/load the partial view with passed model/value , and at last in success function of Ajax directly load the html using .html(result); . Here is coed sample .