How to use Json in Asp.net Core

Question

I am a beginner and I want to show my images(gallery images) with JSON. Can anyone help me and say how to code that?

These are my actions:

and this is the way i showed the images in razor view: enter image description here

Can anyone help me step by step? :)

Answer 1

Here is a working demo:

Gallery.cshtml:

<form enctype="multipart/form-data" method="post" asp-action="ShowGallery">
    <input asp-for="ProductId" />
    <input type="file" multiple name="images" />
    @foreach (var item in ViewBag.Galleries as List<ProductGallery>)
    {
        <div id="img_@item.GalleryId">
            <img  style="width:200px;height:200px;" src="~/ProductImages/@item.ImageName"/>
        </div>
    }
    <input type="submit" value="submit"/>
</form>

Controller(I use fake data to test):

public List<Product> l = new List<Product> { new Product { ProductId = 1 }, new Product { ProductId = 2 }, new Product { ProductId = 3 } };
        public List<ProductGallery> l1 = new List<ProductGallery> { new ProductGallery { ProductId = 1,GalleryId=1, ImageName="1.jpg" }, new ProductGallery { ProductId = 2, GalleryId = 2, ImageName = "2.jpg" }, new ProductGallery { ProductId = 3, GalleryId = 3, ImageName = "3.jpg" } };
        
        public IActionResult Gallery(int id)
        {
            ViewBag.ProductName = l.Where(p => p.ProductId == id).FirstOrDefault().ProductTitle;
            ViewBag.Galleries = l1.Where(g => g.ProductId == id).ToList();
            return View(new ProductGallery { ProductId=id});
        }
        [HttpPost]
        public IActionResult ShowGallery(ProductGallery gallery, IFormFile[] images)
        {
            ViewBag.ProductName= l.Where(p => p.ProductId == gallery.ProductId).FirstOrDefault().ProductTitle;
            
            if (images != null && images.Any())
            {
                foreach (var img in images)
                {
                    var gal = new ProductGallery
                    {
                        GalleryId = l.Count(),
                        ProductId = gallery.ProductId,
                        ImageName = Guid.NewGuid().ToString().Replace("-", "") + Path.GetExtension(img.FileName)
                    };
                    string savePath = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot/ProductImages", gal.ImageName);
                    using (var stream = new FileStream(savePath, FileMode.Create))
                    {
                        img.CopyTo(stream);
                    }
                    l1.Add(gal);
                }
            }
            ViewBag.Galleries = l1.Where(g => g.ProductId == gallery.ProductId).ToList();
            return View("Gallery");
        }

result:

If you still cannot work,check your ViewBag.ProductName and ViewBag.Galleries .Check wether you get the data correctly,and add data to _context correctly.