I have this View Edit.cshtml
@model ProdutoViewModel
@{
Layout = "_Layout";
}
<nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb" class="position-static my-5">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a asp-action="Index" asp-controller="Home">Home</a></li>
<li class="breadcrumb-item active" aria-current="page">Editar</li>
</ol>
</nav>
<form enctype="multipart/form-data" class="mt-5" id="form-produto" asp-action="Edit" method="post" asp-controller="Produto">
<input hidden value="@Model.Id" name="id"/>
<div class="row flex-md-row flex-sm-column">
<div class="col-md-2">
<div class="nav flex-column nav-pills me-3" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<button class="nav-link active" id="v-pills-home-tab" data-bs-toggle="pill" data-bs-target="#v-pills-home" type="button" role="tab" aria-controls="v-pills-home" aria-selected="true">Informações</button>
<button class="nav-link" id="v-pills-profile-tab" data-bs-toggle="pill" data-bs-target="#v-pills-profile" type="button" role="tab" aria-controls="v-pills-profile" aria-selected="false">Imagens</button>
<button class="nav-link" id="v-pills-messages-tab" data-bs-toggle="pill" data-bs-target="#v-pills-messages" type="button" role="tab" aria-controls="v-pills-messages" aria-selected="false">Relacionados</button>
<button class="nav-link" id="v-pills-settings-tab" data-bs-toggle="pill" data-bs-target="#v-pills-settings" type="button" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</button>
</div>
</div>
<div class="tab-content col-md-10" id="v-pills-tabContent">
<div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">
<div class="container row">
@{
if (Model.Imagens.Where(img => img.Perfil).Count() > 0)
{
var perfil = Model.Imagens.Where(img => img.Perfil).First();
<div class="col-md-5 col-sm-12 img-container border border-2 rounded-4">
<div id="header-profile" class="row justify-content-end">
<a id="btn-profile" data-img-id="@perfil.Id" class="btn btn-close p-3"></a>
</div>
<img id="img-profile" class="p-3 card-img image" src="~/images/@(perfil.NomeArquivo+"."[email protected])" />
<div id="input-container" style="display:none">
<div class="input-group mb-3 mt-2">
<label class="btn btn-success custom-file-upload input-group-text w-100 justify-content-center d-flex" for="inputGroupFile01">
<i class="bi bi-upload mx-2"></i>
Upload
</label>
<input name="imagemPerfil" type="file" class="form-control" id="inputGroupFile01">
</div>
</div>
</div>
}
else
{
<div class="col-md-5 col-sm-12 img-container">
<img id="img-profile" class="p-3 img-thumbnail image" src="~/images/img-icon.png" />
<div class="">
<div class="text">Hello World</div>
</div>
<div class="input-group mb-3">
<label class="input-group-text" for="inputGroupFile01">Upload</label>
<input name="imagemPerfil" type="file" class="form-control" id="inputGroupFile01">
</div>
</div>
}
}
<div class="col justify-content-between pt-4">
<lable asp-for="Nome">Nome</lable>
<input class="form-control" type="text" asp-for="Nome" />
<lable asp-for="Descricao">Descrição</lable>
<textarea class="form-control h-auto" asp-for="Descricao"></textarea>
<div class="col row d-flex">
<div class="col">
<lable asp-for="Preco">Preço</lable>
<input class="form-control" type="text" asp-for="Preco" />
</div>
<div class="col">
<lable>Categoria</lable>
<select asp-for=IdCategoria class="form-select">
@foreach (var categoria in ViewBag.Categorias)
{
<option value="@categoria.Id">
@categoria.Nome
</option>
}
</select>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">
<div class="mt-2 container row">
<div id="gallery-container" class="row row-cols-1 row-cols-md-5 g-4 mx-auto">
@{
int id = 1;
if (Model.Imagens.Where(img => !img.Perfil).Count() == 0)
{
<div class="card mx-3" id="card-@id">
<div id="header-@id" class="row justify-content-end">
</div>
<div class="">
<img id="img-@id" src="~/images/img-icon.png" class="img-gallery card-img mb-2" alt="...">
</div>
<div class="card-body p-0">
<hr id="line-@id" />
<div class="">
<div class="input-group justify-content-center">
<label id="label-@id" class="btn btn-success mt-0 pt-0 mb-3 input-group-text w-100 h-100" for="input-@id">
<i class="bi bi-upload mx-2"></i>
Upload
</label>
<input name="imagens" type="file" class="form-control input-gallery" id="input-@id">
</div>
</div>
</div>
</div>
}
foreach (var imagem in Model.Imagens.Where(img => !img.Perfil))
{
<div class="card mx-3" id="card-@id">
<div id="header-@id" class="row justify-content-end">
<a id="btn-@id" data-img-id="@imagem.Id" class="btn btn-close p-3"></a>
</div>
<div class="">
<img id="img-@id" src="~/images/@(imagem.NomeArquivo + "." + imagem.Extensao)" class="img-gallery card-img mb-2" alt="...">
</div>
</div>
++id;
if (id == Model.Imagens.Where(img => !img.Perfil).Count() + 1)
{
<div class="card mx-3" id="card-@id">
<div id="header-@id" class="row justify-content-end">
</div>
<div class="">
<img id="img-@id" src="~/images/img-icon.png" class="img-gallery card-img mb-2" alt="...">
</div>
<div class="card-body p-0">
<hr id="line-@id" />
<div class="">
<div class="input-group justify-content-center">
<label id="label-@id" class="btn btn-success mt-0 pt-0 mb-3 input-group-text w-100 h-100" for="input-@id">
<i class="bi bi-upload mx-2"></i>
Upload
</label>
<input name="imagens" type="file" class="form-control input-gallery" id="input-@id">
</div>
</div>
</div>
</div>
}
}
}
</div>
</div>
</div>
<div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">
<input class="form-control" id="input-text-produto"/>
<div id="card-produto-container">
</div>
</div>
<div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">...</div>
</div>
</div>
<button type="submit" class="btn btn-success float" id="save-button"> <i class="bi bi-floppy"></i></button>
<div class="fixed-bottom row d-flex justify-content-end">
</div>
</form>
@section Scripts {
<script>
$(document).ready(function () {
$('#inputGroupFile01').change(function () {
var input = this;
//console.log(input)
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#img-profile').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
});
let idStart = @Model.Imagens.Count() == 0 ? 1 : @Model.Imagens.Count()
let args = {
input: 'input-'+idStart,
img: 'img-'+idStart,
card: 'card-'+idStart,
header: 'header-'+idStart,
label: 'label-'+idStart,
line: 'line-'+idStart
}
function initGallery(args) {
setEvents(args)
}
function setCloseEvents(idLimit) {
for (let i = 1; i <= idLimit; ++i) {
let btn = $('#btn-' + i)
btn.click(function () {
let card = $('#card-'+i)
console.log(i)
imgId = btn.data('img-id')
$('#gallery-container').append(`<input hidden name="imgsDeletadas" value="${imgId}"/>`)
card.remove()
})
}
}
function setCloseEventProfile() {
let btn = $('#btn-profile').click(function () {
let img = $('#img-profile').attr('src', '/images/img-icon.png')
let imgId = btn.data('img-id')
var headerProfile = $('#header-profile')
let inputContainer = $('#input-container')
inputContainer.show()
headerProfile.hide()
$('#gallery-container').append(`<input hidden name ="imgsDeletadas" value ="${imgId}" />`)
})
}
$('#input-text-produto').on('input', function (event) {
let cardParameters = {
resultsQtd : 3,
searchValue : ""
}
$.post('/Produto/LoadCards', cardParameters)
.done(function (result) {
console.log(result)
$('#card-produto-container').html(result)
})
})
let limit = idStart - 1
setCloseEvents(limit)
setCloseEventProfile()
initGallery(args)
})
</script>
}
My problem is: when i call the following ajax request and load the result inside a div (if i only print the content in console nothing wrong happens), my method Edit in my controller is called with id 0, that dont’t exists, and an error is returned, beacuse the controller dont’t find the 0 id in db.
$('#input-text-produto').on('input', function (event) {
let cardParameters = {
resultsQtd : 3,
searchValue : ""
}
$.post('/Produto/LoadCards', cardParameters)
.done(function (result) {
console.log(result)
$('#card-produto-container').html(result)
})
Here is my PartialView:
@model CardResponse<ProdutoViewModel>
<div class="row row-cols-1 row-cols-md-2 g-4">
<div class="col">
@foreach(var produto in Model.Result)
{
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">@produto.Nome</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
}
</div>
</div>
Here is my Controller:
using Microsoft.AspNetCore.Mvc;
using kssgrafica.Data;
using kssgrafica.Models;
using kssgrafica.Models.ViewModels;
using ImageMagick;
using kssgrafica.Services;
using kssgrafica.Services.ImageHandler;
using kssgrafica.Services.ImageHandler.Dtos;
using Microsoft.EntityFrameworkCore;
using AutoMapper;
using kssgrafica.Models.AuxiliaryModels;
using kssgrafica.Extensions;
namespace kssgrafica.Controllers
{
public class ProdutoController(ApplicationDbContext context, IImageHandler _imageHandler, IMapper mapper) : Controller
{
private readonly ApplicationDbContext _context = context;
private readonly IMapper _mapper = mapper;
private string DefaultPath = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot/images");
public IActionResult Index()
{
var produtos = _context.Produtos.Include(p => p.Categoria).Include(p => p.Imagens).ToList();
var produtosViewModel = _mapper.Map<List<ProdutoViewModel>>(produtos);
return View(produtosViewModel);
}
public async Task<IActionResult> LoadTable(DtParameters dtParameters)
{
var searchBy = dtParameters.Search?.Value;
// if we have an empty search then just order the results by Id ascending
var orderCriteria = "Id";
var orderAscendingDirection = true;
if (dtParameters.Order != null)
{
// in this example we just default sort on the 1st column
orderCriteria = dtParameters.Columns[dtParameters.Order[0].Column].Data;
orderAscendingDirection = dtParameters.Order[0].Dir.ToString().ToLower() == "asc";
}
var produtos = await _context.Produtos.ToListAsync();
var produtosViewModel = _mapper.Map<List<ProdutoViewModel>>(produtos);
var result = produtosViewModel.AsQueryable();
if (!string.IsNullOrEmpty(searchBy))
{
result = result.Where(r => r.Nome != null && r.Nome.ToUpper().Contains(searchBy.ToUpper()) ||
r.Descricao != null && r.Descricao.ToUpper().Contains(searchBy.ToUpper()) ||
r.Preco != null && r.Preco.ToString().ToUpper().Contains(searchBy.ToUpper()) ||
r.Id != null && r.Id.ToString() == searchBy.ToUpper());
}
result = orderAscendingDirection ? result.OrderByDynamic(orderCriteria, DtOrderDir.Asc) : result.OrderByDynamic(orderCriteria, DtOrderDir.Desc);
// now just get the count of items (without the skip and take) - eg how many could be returned with filtering
var filteredResultsCount = result.Count();
var totalResultsCount = await _context.Produtos.CountAsync();
return Json(new DtResult<ProdutoViewModel>
{
Draw = dtParameters.Draw,
RecordsTotal = totalResultsCount,
RecordsFiltered = filteredResultsCount,
Data = result
.Skip(dtParameters.Start)
.Take(dtParameters.Length)
.ToList()
});
}
public IActionResult Create()
{
ViewBag.Categorias = _context.CategoriasProduto.ToList();
return View();
}
[HttpPost]
public async Task<IActionResult> Create(ProdutoViewModel produtoViewModel, List<IFormFile> imagens, IFormFile imagemPerfil)
{
produtoViewModel.DataCadastro = DateTime.UtcNow;
var produto = _mapper.Map<Produto>(produtoViewModel);
_context.Add(produto);
await _context.SaveChangesAsync();
await SalvarImagens(imagens, imagemPerfil, produto);
return RedirectToAction(nameof(Index));
}
[HttpGet]
public async Task<IActionResult> Edit(int id)
{
ViewBag.Categorias = await _context.CategoriasProduto.ToListAsync();
var produto = await _context.Produtos.Where(p => p.Id == id).Include(p => p.Imagens).FirstOrDefaultAsync();
var produtoViewModel = _mapper.Map<ProdutoViewModel>(produto);
return View(produtoViewModel);
}
[HttpPost]
public async Task<IActionResult> Edit(ProdutoViewModel produtoViewModel, int[] imgsDeletadas, List<IFormFile> imagens, IFormFile imagemPerfil)
{
var produto = _mapper.Map<Produto>(produtoViewModel);
_context.Update(produto);
await DeleteImages(imgsDeletadas);
await SalvarImagens(imagens, imagemPerfil, produto);
await _context.SaveChangesAsync();
return RedirectToAction(nameof(Index));
}
[HttpPost]
public async Task<IActionResult> LoadCards(CardParameters cardParameters)
{
var produtos = await _context.Produtos.Include(p => p.Imagens).ToListAsync();
var result = _mapper.Map<List<ProdutoViewModel>>(produtos);
if (!string.IsNullOrEmpty(cardParameters.SearchValue))
{
result = result.Where(p => p.Id.ToString().ToUpper() == cardParameters.SearchValue.ToUpper() ||
p.Nome != null && p.Nome.ToUpper().Contains(cardParameters.SearchValue.ToUpper()) ||
p.Descricao != null && p.Descricao.ToUpper().Contains(cardParameters.SearchValue.ToUpper())).ToList();
}
var response = new CardResponse<ProdutoViewModel>()
{
Result = result.Take(cardParameters.ResultsQtd).ToList(),
LengthTotalRegisters = await _context.Produtos.CountAsync(),
LengthFiltredResults = result.Count()
};
return PartialView("Cards",response);
}
private async Task SalvarImagens(List<IFormFile> imagensGaleriaArquivo, IFormFile imagemPerfilArquivo, Produto produto)
{
foreach(var arquivo in imagensGaleriaArquivo)
{
var imagemGaleria = new Imagem()
{
Nome = "",
NomeArquivo = Guid.NewGuid().ToString(),
File = arquivo,
Extensao = _imageHandler.GetExtension(arquivo),
IdProduto = produto.Id,
Path = DefaultPath,
Perfil = false
};
var dtoGaleria = imagemGaleria.ToImageDto();
if(await _imageHandler.SaveImageAsync(dtoGaleria))
{
try
{
_context.Add(imagemGaleria);
} catch(Exception ex)
{
Console.WriteLine(ex.Message);
_imageHandler.DeleteImage(dtoGaleria);
}
}
}
if(imagemPerfilArquivo != null)
{
var imagemPerfil = new Imagem()
{
Nome = "",
NomeArquivo = Guid.NewGuid().ToString(),
File = imagemPerfilArquivo,
Extensao = _imageHandler.GetExtension(imagemPerfilArquivo),
IdProduto = produto.Id,
Path = DefaultPath,
Perfil = true
};
var dtoPerfil = imagemPerfil.ToImageDto();
try
{
if(await _imageHandler.SaveImageAsync(dtoPerfil))
{
_context.Add(imagemPerfil);
}
} catch(Exception ex)
{
Console.WriteLine(ex.Message);
_imageHandler.DeleteImage(dtoPerfil);
}
}
await _context.SaveChangesAsync();
}
private async Task DeleteImages(int[] imagesIds)
{
if(imagesIds.Length > 0)
{
var imagesIdsList = imagesIds.ToList();
var images = await _context.Imagens.Where(img => imagesIdsList.Contains(img.Id)).ToListAsync();
foreach(var img in images)
{
img.Path = DefaultPath;
_imageHandler.DeleteImage(img.ToImageDto());
_context.Remove(img);
}
await _context.SaveChangesAsync();
}
}
}
}
The methods envolved in the problem are Edit, post and get, and LoadCards.
I don’t know why Edit (get method) is being called when i load the PartialView, but i put an if that handles the case when de id is 0, returning an Ok(), but i want to know why this happens.
Here is my try:
public async Task<IActionResult> Edit(int id)
{
if(id == 0)
{
return Ok();
}
ViewBag.Categorias = await _context.CategoriasProduto.ToListAsync();
var produto = await _context.Produtos.Where(p => p.Id == id).Include(p => p.Imagens).FirstOrDefaultAsync();
var produtoViewModel = _mapper.Map<ProdutoViewModel>(produto);
return View(produtoViewModel);
}
New contributor
Samuel Oliveira is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.