title: How to Create an MVC Widget in Kentico 12 Page Builder
body: <p>Previous question for context (the previous question was going nowhere, so I created this new one to start fresh): <a href="https://stackoverflow.com/questions/62947063/unable-to-create-new-mvc-widget-in-kentico-12">Unable to Create New MVC Widget in Kentico 12</a></p>
  <p>I'm trying to create a widget called &quot;Image with Summary&quot;. For now, I'm just trying to add a single property to it (a summary property that will have a rich text editor).</p>
  <p>It isn't appearing as a widget option when I add a new widget to page builder:</p>
  <p><a href="https://i.stack.imgur.com/cp6m6.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cp6m6.png" alt="Page Builder with Widget Dialog" /></a></p>
  <p>From this, you can see that I have page builder configured properly (there is already a &quot;Rich text&quot; widget added), you can see that adding widgets is possible (the &quot;Rich text&quot; widget comes from a NuGet package that I installed called &quot;Kentico.EMS12.MvcComponents.Widget.RichText&quot;), and you can see that I only have two widgets available (&quot;Form&quot; and &quot;Rich text&quot;), neither of which are the widget I'm trying to add.</p>
  <p><strong>I need your help figuring out why my new widget is not appearing in this dialog.</strong></p>
  <p>Here is the Solution Explorer in Visual Studio showing all the files I've created for this new widget:</p>
  <p><a href="https://i.stack.imgur.com/vj7Y4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vj7Y4.png" alt="Visual Studio Solution Explorer showing files related to Image with Summary widget" /></a></p>
  <p>Here is what my properties class looks like:</p>
  <pre><code>// ImageWithSummaryProperties.cs
  namespace RhythmAgency.KenticoWebsite.Widgets.ImageWithSummary
  {
      using Kentico.PageBuilder.Web.Mvc;
  
      public class ImageWithSummaryProperties : IWidgetProperties
      {
          public string Summary { get; set; }
      }
  }
  </code></pre>
  <p>Here is what my view model looks like:</p>
  <pre><code>// ImageWithSummaryViewModel.cs
  namespace RhythmAgency.KenticoWebsite.Widgets.ImageWithSummary
  {
      public class ImageWithSummaryViewModel
      {
          public string Summary { get; set; }
      }
  }
  </code></pre>
  <p>Here is what my controller looks like:</p>
  <pre><code>// ImageWithSummaryController.cs
  using System.Web.Mvc;
  using Kentico.PageBuilder.Web.Mvc;
  using RhythmAgency.KenticoWebsite.Widgets.ImageWithSummary;
  
  [assembly: RegisterWidget(
      identifier: &quot;Rhythm.ImageWithSummary&quot;,
      controllerType: typeof(ImageWithSummaryController),
      name: &quot;Image with Summary&quot;,
      Description = &quot;An image with summary text.&quot;,
      IconClass = &quot;icon-l-img-3-cols-3&quot;)]
  
  namespace RhythmAgency.KenticoWebsite.Widgets.ImageWithSummary
  {
      public class ImageWithSummaryController : WidgetController&lt;ImageWithSummaryProperties&gt;
      {
          public ActionResult Index()
          {
              var properties = GetProperties();
              return PartialView(&quot;Widgets/_Rhythm.ImageWithSummary&quot;, new ImageWithSummaryViewModel()
              {
                  Summary = properties.Summary
              });
          }
      }
  }
  </code></pre>
  <p>Here is what my view looks like:</p>
  <pre><code>@* _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
  {
      &lt;div class=&quot;fr-view&quot;&gt;
          @Html.Raw(Html.Kentico().ResolveRichText(Model.Summary))
      &lt;/div&gt;
  }
  </code></pre>
  <p>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.</p>
  <p>Here's my home view file:</p>
  <pre><code>@* Views/Home/Index.cshtml *@
  @using Kentico.PageBuilder.Web.Mvc
  @using Kentico.Web.Mvc
  
  &lt;h1&gt;Rhythm Agency&lt;/h1&gt;
  
  @Html.Kentico().EditableArea(&quot;main&quot;)
  </code></pre>
  <p><strong>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.</strong> Here's some extra context:</p>
  <ul>
  <li>I'm on Kentico 12.0.77.</li>
  <li>I've tried a widget without a controller and now one with a controller.</li>
  <li>As you can see, I have the widget registration (as an assembly attribute) in the controller class file.</li>
  <li>The frontend of the site renders the rich text widget just fine.</li>
  <li>I didn't see any relevant issues in the error log.</li>
  <li>I'm using the default section.</li>
  <li>When I call <code>EditableArea</code>, you can see I do not place any restrictions on the widgets that can be used.</li>
  <li>I'm using the free edition of Kentico. I doubt that's a factor, but mentioning it just in case (the &quot;benefits of upgrading your license&quot; link is currently a 404).</li>
  <li>I don't see any errors in Chrome's console.</li>
  <li>I've read various instructions for creating widgets like 10 times. No idea what I'm missing.</li>
  <li>I'm using Chrome on Windows 10.</li>
  <li>I was previously calling the widget &quot;Image Summary Section&quot;, but I renamed it on the off chance &quot;Section&quot; was a reserved word.</li>
  </ul>
  <p><strong>EDIT:</strong></p>
  <p>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.</p>
  <p><strong>EDIT #2:</strong></p>
  <p>Somebody recommended I put the widget registration assembly attribute in the <code>App_Start</code> folder, which I did, but it didn't help:</p>
  <p><a href="https://i.stack.imgur.com/KxaIO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KxaIO.png" alt="Widget Registration Code" /></a></p>
  <p>So why this is failing to work is still a mystery.</p>