locked
Some approaches for creating an Image Gallery in ASP Net Core projects? RRS feed

  • Question

  • User1607623375 posted

    Hello,

    I'm building my first project. It holds directors. And each director has a page that shows a list of his/her movies.

    But I wanted to show an image for each movie. Something like the second photo below.

    What I want to add to my project:

    • Make users able to add a poster for each movie when they want to add a movie.
    • Instead of a plain list of movies (first photo below), I want a list of movie posters in each directors' page (second photo below).

    But I don't know even the approaches to do it. Let alone how to do it.

    I'd appreciate it if you give me some ideas/approaches, so I can search for tutorials.

    Thanks.

    image.png

    Screenshot from letterboxd movie website:

    image.png

    Friday, May 22, 2020 12:24 PM

Answers

  • User711641945 posted

    Hi Davood Kazemi,

    Here is a working demo like below:

    Model:

    public class Director
    {
        public int Id { get; set; }
        public string DirectorName { get; set; }
        public List<Movie> Movies { get; set; }
    }
    public class Movie
    {
        public int Id { get; set; }
        public string MovieName { get; set; }
        public string Poster { get; set; }
        public int DirectorId { get; set; }
        public Director Director { get; set; }
    }

    Index.cshtml:

    @model IEnumerable<Director>
    
    @{
        ViewData["Title"] = "Index";
    }
    
    <h1>Index</h1>
    
    <p>
        <a asp-action="Create" asp-controller="Directors">Create Director</a>|
        <a asp-action="Create" asp-controller="Movies">Create Movie</a>
    </p>
    <table class="table">
        <thead>
            <tr>
                <th>
                    @Html.DisplayNameFor(model => model.DirectorName)
                </th>
                <th></th>
            </tr>
        </thead>
        <tbody>
    @foreach (var item in Model) {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.DirectorName)
                </td>
                <td>               
                    <a asp-action="Details" asp-route-id="@item.Id">Details</a> 
                </td>
            </tr>
    }
        </tbody>
    </table>
    

    Create.cshtml for creating the movies:

    @model Movie
    <h1>Create</h1>
    <h4>Movie</h4>
    <hr />
    <div class="row">
        <div class="col-md-4">
            <form asp-action="Create" enctype="multipart/form-data">
                <div asp-validation-summary="ModelOnly" class="text-danger"></div>
                <div class="form-group">
                    <label asp-for="MovieName" class="control-label"></label>
                    <input asp-for="MovieName" class="form-control" />
                    <span asp-validation-for="MovieName" class="text-danger"></span>
                </div>
                <div class="form-group">
                    <label asp-for="Poster" class="control-label"></label>
                    <input type="file" name="file"/>
                </div>
                <div class="form-group">
                    <label asp-for="DirectorId" class="control-label"></label>
                    <select asp-for="DirectorId" class ="form-control" asp-items="ViewBag.DirectorId"></select>
                </div>
                <div class="form-group">
                    <input type="submit" value="Create" class="btn btn-primary" />
                </div>
            </form>
        </div>
    </div>
    
    <div>
        <a asp-action="Index">Back to List</a>
    </div>
    
    @section Scripts {
        @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
    }

    Details.cshtml for the movie list:

    @model Director
    
    <h1>Details</h1>
    
    <div>
        <h4>Director</h4>
        <hr />
        <dl class="row">
            <dt class="col-sm-2">
                @Html.DisplayNameFor(model => model.DirectorName)
            </dt>
            <dd class="col-sm-10">
                @Html.DisplayFor(model => model.DirectorName)
            </dd>
        </dl>
        <table class="table">
            <thead>
                <tr>
                    <th>
                        @Html.DisplayNameFor(model => model.Movies[0].MovieName)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.Movies[0].Poster)
                    </th>
                </tr>
            </thead>
            <tbody>
                @foreach (var item in Model.Movies)
                {
                    <tr>
                        <td>
                            @Html.DisplayFor(modelItem => item.MovieName)
                        </td>
                        <td>
                            <img src="~/images/@item.Poster" style="height:80px;width:80px;" />
                        </td>
                    </tr>
                }
            </tbody>
        </table>
    </div>
    <div>
        <a asp-action="Edit" asp-route-id="@Model.Id">Edit</a> |
        <a asp-action="Index">Back to List</a>
    </div>
    

    DirectorsController:

    public class DirectorsController : Controller
    {
        private readonly MvcProj3_1Context _context;
    
        public DirectorsController(MvcProj3_1Context context)
        {
            _context = context;
        }
    
        // GET: Directors
        public async Task<IActionResult> Index()
        {
            return View(await _context.Director.ToListAsync());
        }
    
        // GET: Directors/Details/5
        public async Task<IActionResult> Details(int? id)
        {
            if (id == null)
            {
                return NotFound();
            }
    
            var director = await _context.Director.Include(d=>d.Movies)
                .FirstOrDefaultAsync(m => m.Id == id);
            if (director == null)
            {
                return NotFound();
            }
    
            return View(director);
        }
    }

    MoviesController:

    public class MoviesController : Controller
    {
        private readonly MvcProj3_1Context _context;
        private readonly IWebHostEnvironment _env;
        public MoviesController(MvcProj3_1Context context, IWebHostEnvironment env)
        {
            _context = context;
            _env = env;
        }
        // GET: Movies/Create
        public IActionResult Create()
        {
            ViewData["DirectorId"] = new SelectList(_context.Director, "Id", "Id");
            return View();
        }
    
        // POST: Movies/Create
        // To protect from overposting attacks, enable the specific properties you want to bind to, for 
        // more details, see http://go.microsoft.com/fwlink/?LinkId=317598.
        [HttpPost]
        [ValidateAntiForgeryToken]
        public async Task<IActionResult> Create(Movie movie,IFormFile file)
        {
            var fileName = "";
            if (file.Length > 0)
            {
                // full path to file in temp location
                var uploadPath = Path.Combine(_env.ContentRootPath, "wwwroot/images");
                fileName = Guid.NewGuid() + Path.GetExtension(file.FileName);
                var filePath = Path.Combine(uploadPath, fileName);
    
                using (var stream = new FileStream(filePath, FileMode.Create))
                {
                    await file.CopyToAsync(stream);
                }
    
            }
            if (ModelState.IsValid)
            {
                movie.Poster = fileName;
                _context.Add(movie);
                await _context.SaveChangesAsync();
                return RedirectToAction(nameof(Index));
            }
            ViewData["DirectorId"] = new SelectList(_context.Director, "Id", "Id", movie.DirectorId);
            return View(movie);
        }
    }

    Result:

    Best Regards,

    Rena

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, June 16, 2020 9:07 AM