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>();
}
}