smithsson68@gmail.com
Aug 15, 2011
  17616
(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
Integrating Optimizely DAM with Your Website

This article is the second in a series about integrating Optimizely DAM with websites. It discusses how to install the necessary package and code t...

Andrew Markham | Sep 28, 2024 | Syndicated blog

Opticon 2024 - highlights

I went to Opticon in Stockholm and here are my brief highlights based on the demos, presentations and roadmaps  Optimizely CMS SaaS will start to...

Daniel Ovaska | Sep 27, 2024

Required fields support in Optimizely Graph

It's been possible to have "required" properties (value must be entered) in the CMS for a long time. The required metadata haven't been reflected i...

Jonas Bergqvist | Sep 25, 2024

How to write a bespoke notification management system

Websites can be the perfect vehicle for notifying customers of important information quickly, whether it’s the latest offer, an operational message...

Nicole Drath | Sep 25, 2024