smithsson68@gmail.com
Aug 15, 2011
  17749
(3 votes)

Creating EPiServer Admin/Edit Plug-ins using MVC

Since version 6 R1, EPiServer CMS has had full support for MVC routing. This is what enables you to create OnlineCenter Gadgets in MVC.

What may not have been obvious is that you can also create Admin and Edit mode plug-ins using MVC instead of Web Forms.

You start by creating a controller with a default Index method, an index view and optionally a model. I am not going to go into the specifics of how MVC works as there are plenty of blog posts out there by MVC experts that explain it far better than I could. I recommend looking at the Microsoft ASP.NET MVC site to start with.

To make your MVC controller / view into an EPiServer Admin / Edit plug-in, you need to add an EPiServer.PlugIn.GuiPlugIn attribute to the controller class. You can read more about EPiServer Plug-ins in the EPiServer SDK and also see an example of creating one using Web Forms by Frederik Vig.

[EPiServer.PlugIn.GuiPlugIn(
Area=EPiServer.PlugIn.PlugInArea.AdminConfigMenu, 
Url="/modules/Alloy/MyAdminPlugin/Index", 
DisplayName="My MVC Admin Plugin")]
public class MyAdminPluginController : Controller
{        
    public ActionResult Index()
    {
        return View();
    }       
}

The crucial item here is the Url value:

/modules/Alloy/MyAdminPlugin/Index.

That tells EPiServer CMS what to execute to render the HTML for your plug-in.

How the Url is determined

To understand this we need to look in the EPiServer CMS web.config in the EPiServer Shell public modules section:

<episerver.shell>
    <publicModules rootPath="~/modules/" autoDiscovery="Minimal">
      <add name="Alloy">
        <assemblies>
          <add assembly="EPiServer.Templates.AlloyTech" />
        </assemblies>
      </add>           
    </publicModules>
</episerver.shell>

You will see that the rootPath value for public modules is “modules” and that I have added a module called “Alloy”. Those 2 values make up the first 2 parts of the Url to the plug-in. This works because EPiServer CMS adds these values to the ASP.NET routing table when the application starts.

The last 2 parts of the Url are the controller name (without the controller suffix) and the name of the method to execute on the controller, in this case “Index”. This is standard MVC convention based programming in action in terms of matching a route in the format {controller}/{method}. In fact, you can even remove the “Index” part as this is assumed to be the default action. In that case the Url would be:

/modules/Alloy/MyAdminPlugin/

Aug 15, 2011

Comments

tompipe
tompipe Aug 15, 2011 10:00 PM

Awesome! Thanks Paul. Will certainly consider using this method next time I write a plugin! :)

Karoline Klever
Karoline Klever Aug 16, 2011 08:36 AM

I can't wait to try this out! Thanks for making us aware of this :)

Andreas Nordseth
Andreas Nordseth Aug 29, 2011 08:10 PM

Is there any more documentation around using mvc with admin plugins?

How about using it for EditControls, is that possible?

Ibrahim Uslu
Ibrahim Uslu Feb 27, 2014 10:34 AM

Hi

I have followed you article and try to use it in my project. But I could not get it work. when i press "My MVC Admin Plugin" i get page not found. Is there anyone can help or is there anyone make this worked.

by the nice article. thanks for that. there is not much resources regarding version 7.5 with mvc.

Roland Kierkels
Roland Kierkels Oct 14, 2014 03:29 PM

Same issue as Ibrahim. Its not working for me in Episerver 7.5+. Got an empty page when clicking on the My MVC Admin Plugin.

smithsson68@gmail.com
smithsson68@gmail.com Oct 25, 2014 06:19 AM

In the latest versions of EPiServer (7.5 ->) you need to register a route to your admin plugin. In your Global.asax.cs override the RegisterRoutesMethod like this:

protected override void RegisterRoutes(RouteCollection routes)
{
base.RegisterRoutes(routes);
routes.MapRoute("myadminplugin", "MyAdminPlugin/{action}",
new {controller = "MyAdminPlugin", action = "Index"});
}

Then change the Url value in the GuiPlugIn attribute on your controller to the url registered in the routes table, e.g. "/MyAdminPlugin".

[GuiPlugIn(DisplayName = "Example Admin Plugin in MVC", Url = "/MyAdminPlugin", Area = PlugInArea.AdminMenu)]

I would also add an Authorise attribute to the controller too so only CMS Admins (or whichever roles you choose) can access the plugin

[Authorize(Roles = "CmsAdmins")]

Sofia Öhrn
Sofia Öhrn Jan 20, 2016 10:54 AM

Thank you for this post. I just used this and it's so simple to implement! :)

Please login to comment.
Latest blogs
Copy Optimizely SaaS CMS Settings to ENV Format Via Bookmarklet

Do you work with multiple Optimizely SaaS CMS instances? Use a bookmarklet to automatically copy them to your clipboard, ready to paste into your e...

Daniel Isaacs | Dec 22, 2024 | Syndicated blog

Increase timeout for long running SQL queries using SQL addon

Learn how to increase the timeout for long running SQL queries using the SQL addon.

Tomas Hensrud Gulla | Dec 20, 2024 | Syndicated blog

Overriding the help text for the Name property in Optimizely CMS

I recently received a question about how to override the Help text for the built-in Name property in Optimizely CMS, so I decided to document my...

Tomas Hensrud Gulla | Dec 20, 2024 | Syndicated blog

Resize Images on the Fly with Optimizely DXP's New CDN Feature

With the latest release, you can now resize images on demand using the Content Delivery Network (CDN). This means no more storing multiple versions...

Satata Satez | Dec 19, 2024

Simplify Optimizely CMS Configuration with JSON Schema

Optimizely CMS is a powerful and versatile platform for content management, offering extensive configuration options that allow developers to...

Hieu Nguyen | Dec 19, 2024

Useful Optimizely CMS Web Components

A list of useful Optimizely CMS components that can be used in add-ons.

Bartosz Sekula | Dec 18, 2024 | Syndicated blog