.net 5 Razor pages - image carousel update value on view model with image selected item

Question

I got a bootstrap carousel on a razor page. the carousel is working as expected but what I want to do is update the value of textbox using a value of the image selected in the carousel(which is used to populate a value of a viewmodel property). Is there any advice or ideas on best how to achieve this.

the html code for the carousel.

     <div class="form-group">
            @*@Html.LabelFor(model => model.CustomerEditViewModel.SocialUrl4, htmlAttributes: new { @class = "control-label col-md-2" })*@
            <label asp-for="CustomerEditViewModel.HeaderLogoId" class="control-label"></label>
            <div class="col-md-10">
                <input asp-for="CustomerEditViewModel.HeaderLogoId" class="form-control" autofocus="autofocus" />
                <span asp-validation-for="CustomerEditViewModel.HeaderLogoId" class="text-danger"></span>

            </div>
        </div>

<div class="col-lg-8 offset-lg-2" id="slider">
    <div id="myCarousel" class="carousel slide shadow">
        <!-- main slider carousel items -->
        <div class="carousel-inner">

            @{int i = 0;}

            @foreach (var item in Model.HeaderLogoList ) {
                var active = i == 0 ? "active" : "";

                <div class="@active carousel-item" data-slide-number="@i">
                    @*<img src="~/Uploads/@item.File" class="img-fluid">*@
                       <img alt="" class="img-fluid"  src='data:image/*;base64,@(Convert.ToBase64String(item.CompanyPhotoContent))'/>
          
                </div>
                i++;

            }

            <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>

        </div>
        <!-- main slider carousel nav controls -->


        <ul class="carousel-indicators list-inline mx-auto border px-2">

            @{int j = 0;}
            @foreach (var item in  Model.HeaderLogoList) {
                var active = i == 0 ? "active" : "";
                var isSelected = i == 0 ? "selected" : "";

                 Model.CustomerEditViewModel.HeaderLogoId = item.ImageId;    

                if ((string)active =="active")
                            {
                       Model.CustomerEditViewModel.HeaderLogoId = item.ImageId;          
                            }
          

                <li class="list-inline-item @active">
                    <a id="carousel-selector-@j" class="@isSelected" data-slide-to="@j" data-target="#myCarousel">
                        @*<img src="~/Uploads/@item.File" style="width: 86px; height: 86px" class="img-fluid">*@
                          <img alt="" style="width: 86px; height: 86px"  class="img-fluid"  src='data:image/*;base64,@(Convert.ToBase64String(item.CompanyPhotoContent))'/>
          
                    </a>
                </li>
                j++;

            }
        </ul>
    </div>
</div>

<style>
    #myCarousel .list-inline {
    white-space:nowrap;
    overflow-x:auto;
}

#myCarousel .carousel-indicators {
    position: static;
    left: initial;
    width: initial;
    margin-left: initial;
}

#myCarousel .carousel-indicators > li {
    width: initial;
    height: initial;
    text-indent: initial;
}

#myCarousel .carousel-indicators > li.active img {
    opacity: 0.7;
}
</style>

my model sections that has the images

    [BindProperty(SupportsGet = true)]
        public IEnumerable<PhotoGalery> HeaderLogoList { get; set; }

my photogallery class

    public class PhotoGalery
    {

        [Key]
        public Guid ImageId { get; set; }
 
       public PhotoTypes PhotoType { get; set; }
        public byte[] CompanyPhotoContent { get; set; }
       
        [MaxLength(450)]
        public string PhotoDescription { get; set; }

        [MaxLength(100)]
        public string PhotoTitle { get; set; }
    }

What it looks like

Thank you in advance.

Answer 1

Try to set ImageId as the Id of img,and use the event handler "slide.bs.carousel",here is a demo:

<div class="form-group">
            @*@Html.LabelFor(model => model.CustomerEditViewModel.SocialUrl4, htmlAttributes: new { @class = "control-label col-md-2" })*@
            <label asp-for="@Model.HeaderLogoId" class="control-label"></label>
            <div class="col-md-10">
                <input asp-for="@Model.HeaderLogoId" class="form-control" autofocus="autofocus" />
                <span asp-validation-for="@Model.HeaderLogoId" class="text-danger"></span>

            </div>
        </div>

<div class="col-lg-8 offset-lg-2" id="slider">
    <div id="myCarousel" class="carousel slide shadow">
        <!-- main slider carousel items -->
        <div class="carousel-inner">

            @{int i = 0;}

            @foreach (var item in Model.HeaderLogoList ) {
                var active = i == 0 ? "active" : "";

                <div class="@active carousel-item" data-slide-number="@i">
                    @*<img src="~/Uploads/@item.File" class="img-fluid">*@
                       <img id="@item.ImageId" alt="" class="img-fluid"  src='data:image/*;base64,@(Convert.ToBase64String(item.CompanyPhotoContent))'/>
          
                </div>
                i++;

            }

            <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>

        </div>
        <!-- main slider carousel nav controls -->


        <ul class="carousel-indicators list-inline mx-auto border px-2">

            @{int j = 0;}
            @foreach (var item in  Model.HeaderLogoList) {
                var active = i == 0 ? "active" : "";
                var isSelected = i == 0 ? "selected" : "";

                
                <li class="list-inline-item @active">
                    <a id="carousel-selector-@j" class="@isSelected" data-slide-to="@j" data-target="#myCarousel">
                        @*<img src="~/Uploads/@item.File" style="width: 86px; height: 86px" class="img-fluid">*@
                          <img alt="" style="width: 86px; height: 86px"  class="img-fluid"  src='data:image/*;base64,@(Convert.ToBase64String(item.CompanyPhotoContent))'/>
          
                    </a>
                </li>
                j++;

            }
        </ul>
    </div>
</div>

<style>
    #myCarousel .list-inline {
    white-space:nowrap;
    overflow-x:auto;
}

#myCarousel .carousel-indicators {
    position: static;
    left: initial;
    width: initial;
    margin-left: initial;
}

#myCarousel .carousel-indicators > li {
    width: initial;
    height: initial;
    text-indent: initial;
}

#myCarousel .carousel-indicators > li.active img {
    opacity: 0.7;
}
</style>

js:

<script>
        $(function () {
            var carouselEl = $('.carousel');
            var carouselItems = carouselEl.find('.carousel-item');
            $("#HeaderLogoId").val(carouselItems.siblings('.active').find("img").attr("id"));
            carouselEl.carousel({
                interval: 2000
            }).on('slid.bs.carousel', function (event) {
                $("#HeaderLogoId").val(carouselItems.siblings('.active').find("img").attr("id"));
            })
        })
    </script>

result: