0

I want to display an image carousel when the user clicks on the image itself. At this moment there needs to be a carousel loaded with all the images in the gallery. I have a partial view that contains the HTML needed for the carousel.

I have tried to load the view as a partial on the <a href""> and I tried to load it in the <a target=""> as well. Both did not work. They load the partial but it is loaded when the gallery is showing and not after the click event.

Mij current Models are:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using umbraco;
using Umbraco.Core.Models;
using Umbraco.Web;

namespace NameSpace.Models
{

    public class Carousel
    {
        public List<Photo> PhotoList { get; set; }

        public Carousel(IPublishedContent content)
        {
            PhotoList = content.Children().Select(c => new Photo(c)).OrderByDescending(n => n.Date).ToList();
        }
    }
}

using System;
using System.Collections.Generic;
using System.Globalization;
using System.Linq;
using System.Web;
using Umbraco.Core.Models;
using Umbraco.Web;

namespace NameSpace.Models
{
    public class PhotoGallarypageRenderModel : BaseRenderModel
    {
        public string Name { get; set; }
        public IEnumerable<IPublishedContent> MediaGallary { get; set; }
        public string AlbumName { get; set; }
        public Carousel Carousel { get; set; }

        public PhotoGallarypageRenderModel(IPublishedContent content, CultureInfo culture) : base(content, culture)
        {
            Name = content.Name;
            MediaGallary = content.GetPropertyValue<IEnumerable<IPublishedContent>>("PhotoPicker");
            AlbumName = content.GetPropertyValue<string>("AlbumName");
            Carousel = new Carousel(content);
        }
    }
}

The View looks as follow:

@inherits UmbracoViewPage<NameSpace.Models.PhotoGallarypageRenderModel>
@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<div class="container">
    <h1 class="font-weight-light text-center text-lg-left mt-4 mb-0">Thumbnail Gallery</h1>
    <hr class="mt-2 mb-5">
    <div class="row text-center text-lg-left">
        @foreach (var item in Model.MediaGallary)
        {
            <div class="col-lg-3 col-md-4 col-6">
                <a href="/nl/fotografie/@Model.AlbumName/@item.Id" target="_blank" class="d-block mb-4 h-100">
                    <img class="img-fluid img-thumbnail" src="@item.GetCropUrl("gallaryThumbnail")" alt="Gallary photo">
                </a>
            </div>
        }
    </div>
</div>

So when the image is pressed I would like to loud the Carousel view with the selected image as first.

I would like not to use any JavaScript, since I don't know how to use it.

Theo
  • 57,719
  • 8
  • 24
  • 41
Gino Blaazer
  • 45
  • 7
  • Your question is not clear. What problem you are facing? You don't know how to write controller and action method? You don't know how to load the view? Or you don't know to call the controller action from the view? – Chetan Mar 30 '19 at 09:53
  • Ow sorry. I don't know how to load the view when the image is pressed – Gino Blaazer Mar 30 '19 at 09:59
  • Your image link is pointing to `nl/fotografie/@Model.AlbumName/@item.Id` what happens when you click on the image right now? – Chetan Mar 30 '19 at 10:01
  • It loads a non existing view – Gino Blaazer Mar 30 '19 at 10:03
  • to start with you should write a controller and action method which can map to `nl/fotografie/@Model.AlbumName/@item.Id` URL. The action method should accept appropriate parameters and return appropriate view with appropriate model data. Read about ASP.NET MVC Routing, Parameters, controller and action and apply the knowledge to solve your issue. And come back here if you face any specific issue in that. – Chetan Mar 30 '19 at 10:10
  • Your can read [here](https://www.tutlane.com/tutorial/aspnet-mvc/url-routing-in-asp-net-mvc-example-with-multiple-parameters-query-strings), [here](https://stackoverflow.com/questions/2246481/routing-with-multiple-parameters-using-asp-net-mvc), and [here](https://www.c-sharpcorner.com/UploadFile/bhushangawale/attribute-based-routing-in-Asp-Net-mvc-5/) and [here](https://nimblegecko.com/how-to-use-two-url-parameters-in-asp-net-core/) – Chetan Mar 30 '19 at 10:12

0 Answers0