Don't miss out Virtual Happy Hour this Friday (April 26).

Try our conversational search powered by Generative AI!

smithsson68@gmail.com
Aug 15, 2011
  17321
(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
Solving the mystery of high memory usage

Sometimes, my work is easy, the problem could be resolved with one look (when I’m lucky enough to look at where it needs to be looked, just like th...

Quan Mai | Apr 22, 2024 | Syndicated blog

Search & Navigation reporting improvements

From version 16.1.0 there are some updates on the statistics pages: Add pagination to search phrase list Allows choosing a custom date range to get...

Phong | Apr 22, 2024

Optimizely and the never-ending story of the missing globe!

I've worked with Optimizely CMS for 14 years, and there are two things I'm obsessed with: Link validation and the globe that keeps disappearing on...

Tomas Hensrud Gulla | Apr 18, 2024 | Syndicated blog

Visitor Groups Usage Report For Optimizely CMS 12

This add-on offers detailed information on how visitor groups are used and how effective they are within Optimizely CMS. Editors can monitor and...

Adnan Zameer | Apr 18, 2024 | Syndicated blog