smithsson68@gmail.com
Aug 15, 2011
  16226
(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
Customizing Property Lists in Optimizely CMS

Generic property lists is a cool editorial feature that has gained a lot of popularity - in spite of still being unsupported (officially). But if y...

Allan Thraen | Oct 2, 2022 | Syndicated blog

Content Delivery API – The Case of the Duplicate API Refresh Token

Creating a custom refresh provider to resolve the issues with duplicate tokens in the DXC The post Content Delivery API – The Case of the Duplicate...

David Lewis | Sep 29, 2022 | Syndicated blog

New Optimizely certifications - register for beta testing before November 1st

In January 2023, Optimizely is making updates to the current versions of our certification exams to make sure that each exam covers the necessary...

Jamilia Buzurukova | Sep 28, 2022

Optimizely community meetup - Sept 29 (virtual + Melbourne)

Super excited to be presenting this Thursday the 29th of September at the Optimizely community meetup. For the full details and RSVP's see the...

Ynze | Sep 27, 2022 | Syndicated blog

Preview multiple Visitor Groups directly while browsing your Optimizely site

Visitor groups are great - it's an easy way to add personalization towards market segments to your site. But it does come with it's own set of...

Allan Thraen | Sep 26, 2022 | Syndicated blog

The Report Center is finally back in Optimizely CMS 12

With Episerver.CMS.UI 12.12.0 the Report Center is finally re-introduced in the core product.

Tomas Hensrud Gulla | Sep 26, 2022 | Syndicated blog