Loading...
Area: Episerver CMS
Applies to versions: 10 and higher
Other versions:

Creating a component

Recommendations [hide]

This topic describes how to create a component in the Episerver user interface.

How it works

You can use the CMS-extended Framework IFrameComponent attribute to create a component for a web form or user control. 

To create an IFrameComponent, add the IFrameComponent attribute to the class as follows:

[IFrameComponent(UrlFromUi="Edit/MyUserControl.ascx")]
public class MyUserControl
  {
    ...
  }

The CMS extension of the IFrameComponent has the following additional parameters:

UrlFromUtil Optional. The URL to the source, relative the Utils folder. Used instead of Url property.
UrlFromUi Optional. The URL to the source, relative the UI folder. Used instead of Url property.

User controls

If you use a control with ascx file name ending in any of the Url properties, it is automatically wrapped in an EPiServer.PageBase page.

Creating ASP.NET form component

Additionally to using User Control (ascx), URL to iframe component can be WebForm (aspx). For example:

[IFrameComponent(UrlFromUi = "/Edit/TestComponentPage.aspx", Title = "test component page", Description = "test component page description", Categories = "Content", PlugInAreas = PlugInArea.Navigation, IsAvailableForUserSelection = true)]
public class TestPageComponent
{
}

and WebForm code:

<%@ Page Language="c#" Codebehind="TestComponentPage.aspx.cs" AutoEventWireup="False" Inherits="AlloyMvcTemplates.Edit.TestComponentPage"  Title="PlugIn" %>

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>HelloWorld</title>
</head>
<body>
<div>
    <div>Hello World</div>
</div>
</body>
</html>

Creating MVC component

You can also create Iframe component using MVC.

First you need to add controller. Controller has to be annotated with IframeComponent attribute.

[IFrameComponent(Url = "/helloworld", Title = "Hello World Component", Categories = "content")]
public class HelloWorldController : Controller
{
    public ActionResult Index()
    {
        return View();
    }
}

The add a Index.cshtml view to the Views/HelloWorld directory:

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>HelloWorld</title>
</head>
<body>
<div>
    <div>Hello World</div>
</div>
</body>
</html>

Related information

Do you find this information helpful? Please log in to provide feedback.

Last updated: Oct 27, 2016

Recommendations [hide]