How to Create an MVC Widget in Kentico 12 Page Builder

Question

Previous question for context (the previous question was going nowhere, so I created this new one to start fresh): Unable to Create New MVC Widget in Kentico 12

I'm trying to create a widget called "Image with Summary". For now, I'm just trying to add a single property to it (a summary property that will have a rich text editor).

It isn't appearing as a widget option when I add a new widget to page builder:

From this, you can see that I have page builder configured properly (there is already a "Rich text" widget added), you can see that adding widgets is possible (the "Rich text" widget comes from a NuGet package that I installed called "Kentico.EMS12.MvcComponents.Widget.RichText"), and you can see that I only have two widgets available ("Form" and "Rich text"), neither of which are the widget I'm trying to add.

I need your help figuring out why my new widget is not appearing in this dialog.

Here is the Solution Explorer in Visual Studio showing all the files I've created for this new widget:

Here is what my properties class looks like:

// ImageWithSummaryProperties.cs
namespace RhythmAgency.KenticoWebsite.Widgets.ImageWithSummary
{
    using Kentico.PageBuilder.Web.Mvc;

    public class ImageWithSummaryProperties : IWidgetProperties
    {
        public string Summary { get; set; }
    }
}

Here is what my view model looks like:

// ImageWithSummaryViewModel.cs
namespace RhythmAgency.KenticoWebsite.Widgets.ImageWithSummary
{
    public class ImageWithSummaryViewModel
    {
        public string Summary { get; set; }
    }
}

Here is what my controller looks like:

// ImageWithSummaryController.cs
using System.Web.Mvc;
using Kentico.PageBuilder.Web.Mvc;
using RhythmAgency.KenticoWebsite.Widgets.ImageWithSummary;

[assembly: RegisterWidget(
    identifier: "Rhythm.ImageWithSummary",
    controllerType: typeof(ImageWithSummaryController),
    name: "Image with Summary",
    Description = "An image with summary text.",
    IconClass = "icon-l-img-3-cols-3")]

namespace RhythmAgency.KenticoWebsite.Widgets.ImageWithSummary
{
    public class ImageWithSummaryController : WidgetController<ImageWithSummaryProperties>
    {
        public ActionResult Index()
        {
            var properties = GetProperties();
            return PartialView("Widgets/_Rhythm.ImageWithSummary", new ImageWithSummaryViewModel()
            {
                Summary = properties.Summary
            });
        }
    }
}

Here is what my view looks like:

@* _Rhythm.ImageWithSummary.cshtml *@
@using Kentico.PageBuilder.Web.Mvc
@using RhythmAgency.KenticoWebsite.Widgets.ImageWithSummary
@using Kentico.Components.Web.Mvc.InlineEditors
@model ImageWithSummaryViewModel

@if (Context.Kentico().PageBuilder().EditMode)
{
    Html.Kentico().RichTextEditor(nameof(ImageWithSummaryProperties.Summary), null);
}
else
{
    <div class="fr-view">
        @Html.Raw(Html.Kentico().ResolveRichText(Model.Summary))
    </div>
}

I wouldn't focus too much on the view file, as I'm not even able to add the widget to the page builder, so the view has never even had a chance to be called.

Here's my home view file:

@* Views/Home/Index.cshtml *@
@using Kentico.PageBuilder.Web.Mvc
@using Kentico.Web.Mvc

<h1>Rhythm Agency</h1>

@Html.Kentico().EditableArea("main")

I'm really at a loss as to why this widget isn't appearing in the list of available widgets to add to the page section. Here's some extra context:

• I'm on Kentico 12.0.77.
• I've tried a widget without a controller and now one with a controller.
• As you can see, I have the widget registration (as an assembly attribute) in the controller class file.
• The frontend of the site renders the rich text widget just fine.
• I didn't see any relevant issues in the error log.
• I'm using the default section.
• When I call EditableArea, you can see I do not place any restrictions on the widgets that can be used.
• I'm using the free edition of Kentico. I doubt that's a factor, but mentioning it just in case (the "benefits of upgrading your license" link is currently a 404).
• I don't see any errors in Chrome's console.
• I've read various instructions for creating widgets like 10 times. No idea what I'm missing.
• I'm using Chrome on Windows 10.
• I was previously calling the widget "Image Summary Section", but I renamed it on the off chance "Section" was a reserved word.

EDIT:

Somebody is curious as to why this and the previous question are different, so this edit clarifies that. The previous question was about a widget I was attempting to implement using just a properties class. This newer question uses a different approach (namely, using a controller), which is an alternative way of implementing widgets in Kentico.

EDIT #2:

Somebody recommended I put the widget registration assembly attribute in the App_Start folder, which I did, but it didn't help:

So why this is failing to work is still a mystery.

Answer 1

For the controller and widget to be recognized you need to put your controller in the '/Controllers' folder. I have my widget controllers located in the '/Controllers/Widgets' folder.

I had issues which included not having added the suffix 'Controller' in the class name and issues with the widget controller not being in the '/Controllers' folder.

Also you aren't working in an seperate project? Because this would need you to use the following in the 'AssemblyInfo.cs'

using CMS;
[assembly: AssemblyDiscoverable]

And make sure you have enabled the page builder feature in your kentico project. For example:

protected void Application_Start()
{
    ...

    // Gets the ApplicationBuilder instance
    // Allows you to enable and configure Kentico MVC features
    ApplicationBuilder builder = ApplicationBuilder.Current;

    // Enables the preview feature
    builder.UsePreview();

    // Enables the page builder feature
    builder.UsePageBuilder();

    ...
}