The model item passed into the ViewDataDictionary

wirot thongchoojai asked on May 6, 2025 13:03

I Use Kentico 13, I have created a widget called "Carousel Widget" to display images. When I add the widget to a section, I encounter an error in the event log. How can I fix it?

EventCode: KenticoComponentDefault_Index

EventDescription: Message: The model item passed into the ViewDataDictionary is of type 'Kentico.PageBuilder.Web.Mvc.ComponentDefaultViewModel`1[KenticoPlayground.Components.Widgets.CarouselWidget.CarouselWidgetProperties]', but this ViewDataDictionary instance requires a model item of type 'KenticoPlayground.Components.Widgets.CarouselWidget.CarouselWidgetViewModel'.

My Code CarouselWidgetViewComponent.cs

    using System;
using System.Linq;

using CMS.MediaLibrary;
using CMS.SiteProvider;

using KenticoPlayground.Models;
using KenticoPlayground.Components.Widgets.CarouselWidget;

using Kentico.Content.Web.Mvc;
using Kentico.PageBuilder.Web.Mvc;

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.ViewComponents;

namespace KenticoPlayground.Components.Widgets.CarouselWidget
{
    public class CarouselWidgetViewComponent : ViewComponent
    {
        public const string IDENTIFIER = "KenticoPlayground.Widgets.Carousel";

        private readonly MediaFileRepository mediaFileRepository;
        private readonly IMediaFileUrlRetriever mediaFileUrlRetriever;

        public CarouselWidgetViewComponent(MediaFileRepository mediaFileRepository, IMediaFileUrlRetriever mediaFileUrlRetriever)
        {
            this.mediaFileRepository = mediaFileRepository;
            this.mediaFileUrlRetriever = mediaFileUrlRetriever;
        }

        public ViewViewComponentResult Invoke(CarouselWidgetProperties properties)
        {
            var image = GetImage(properties);

            return View("~/Components/Widgets/CarouselWidget/_CarouselWidget.cshtml", new CarouselWidgetViewModel
            {
                ImagePath = image == null ? null : mediaFileUrlRetriever.Retrieve(image).RelativePath
            });
        }

        private MediaFileInfo GetImage(CarouselWidgetProperties properties)
        {
            var imageGuid = properties.Image.FirstOrDefault()?.FileGuid ?? Guid.Empty;
            if (imageGuid == Guid.Empty)
            {
                return null;
            }

            return mediaFileRepository.GetMediaFile(imageGuid, SiteContext.CurrentSiteID);
        }

    }
}

**_CarouselWidget.cshtml**

@using Kentico.Web.Mvc

@using Kentico.PageBuilder.Web.Mvc 
@using Kentico.Components.Web.Mvc.Dialogs
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

@using KenticoPlayground.Components.Widgets.CarouselWidget

@inject IPageBuilderDataContextRetriever pageBuilderContext

@model CarouselWidgetViewModel

@if (pageBuilderContext.Retrieve().EditMode)
{
    <img src="@Model.ImagePath" alt="@Model.ImagePath" style="max-width: 300px;" />
}

CarouselWidgetViewModel.cs

using CMS.MediaLibrary;

namespace KenticoPlayground.Components.Widgets.CarouselWidget
{
    public class CarouselWidgetViewModel
    {
        public string ImagePath { get; set; }
    }
}

CarouselWidgetProperties.cs

using Kentico.Components.Web.Mvc.FormComponents;
using Kentico.Forms.Web.Mvc;
using Kentico.PageBuilder.Web.Mvc;
using System.Collections.Generic;
using System.Linq;

namespace KenticoPlayground.Components.Widgets.CarouselWidget
{
    public class CarouselWidgetProperties : IWidgetProperties
    {
        public const string MEDIA_LIBRARY_NAME = "Graphics";

        [EditingComponent(MediaFilesSelector.IDENTIFIER, Label = "Background image", Order = 1)]
        [EditingComponentProperty(nameof(MediaFilesSelectorProperties.LibraryName), MEDIA_LIBRARY_NAME)]
        [EditingComponentProperty(nameof(MediaFilesSelectorProperties.MaxFilesLimit), 1)]
        [EditingComponentProperty(nameof(MediaFilesSelectorProperties.AllowedExtensions), ".gif;.png;.jpg;.jpeg;.svg;.webp")]
        public IEnumerable<MediaFilesSelectorItem> Image { get; set; } = new List<MediaFilesSelectorItem>();
    }
}

Recent Answers


Rahul Kumawat answered on May 6, 2025 18:23

I’ve implemented the same CarouselWidget code and haven’t encountered the error you're seeing. It might be worth checking if the widget view is named correctly (e.g., _CarouselWidget.cshtml) and that your view component is explicitly returning the correct model type (CarouselWidgetViewModel). Also, make sure you're not relying on the default rendering (ComponentDefaultViewModel) if you’ve customized the view.

0 votesVote for this answer Mark as a Correct answer

wirot thongchoojai answered on May 7, 2025 05:23

I found that the issue was caused by an incorrect widget registration.

wrong

[assembly: RegisterWidget("KenticoPlayground.Widgets.Carousel","Carousel",typeof(CarouselWidgetProperties),"~/Components/Widgets/CarouselWidget/_CarouselWidget.cshtml",IconClass = "icon-puzzle")]

Correct

[assembly: RegisterWidget(CarouselWidgetViewComponent.IDENTIFIER, typeof(CarouselWidgetViewComponent), "Carousel", typeof(CarouselWidgetProperties), Description = "Displays the text and image.", IconClass = "icon-ribbon", AllowCache = true)]

0 votesVote for this answer Mark as a Correct answer

   Please, sign in to be able to submit a new answer.