November Happy Hour will be moved to Thursday December 5th.

smithsson68@gmail.com
Aug 15, 2011
  17688
(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
Optimizely SaaS CMS + Coveo Search Page

Short on time but need a listing feature with filters, pagination, and sorting? Create a fully functional Coveo-powered search page driven by data...

Damian Smutek | Nov 21, 2024 | Syndicated blog

Optimizely SaaS CMS DAM Picker (Interim)

Simplify your Optimizely SaaS CMS workflow with the Interim DAM Picker Chrome extension. Seamlessly integrate your DAM system, streamlining asset...

Andy Blyth | Nov 21, 2024 | Syndicated blog

Optimizely CMS Roadmap

Explore Optimizely CMS's latest roadmap, packed with developer-focused updates. From SaaS speed to Visual Builder enhancements, developer tooling...

Andy Blyth | Nov 21, 2024 | Syndicated blog

Set Default Culture in Optimizely CMS 12

Take control over culture-specific operations like date and time formatting.

Tomas Hensrud Gulla | Nov 15, 2024 | Syndicated blog