Today I released a NuGet package for Experience Manager and DD4T (.NET). It allows a developer to easily add the required MarkUp to his (View)Models to enable the inline editing features of the Experience Manager from SDL Tridion. Only use this package if you use the DD4T .NET framework!
Install the package using the package explorer:
Install-Package DD4T.XPM
The installer automatically adds 2 files to the root of your MVC WebApplication: SiteEdit_config.xml and RegionConfiguration.xml
It also updates the web.config in the ‘Views’ folder to use the DD4T.XPM.XpmWebViewPage as pageBaseType and includes
the DD4T.XPM.HtmlHelpers namespace. After installing the package it’s recommended to restart Visual Studio.
How to use
1) Decorate your Models with the XPM Attributes:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| [InlineEditable] | |
| public class ArticleModel | |
| { | |
| [InlineEditableField(FieldName="title")] | |
| public string Title { get; set; } | |
| [InlineEditableField(FieldName="complink_to_article")] | |
| public HyperLink LinkToFullArticle { get; set; } | |
| [InlineEditableField(FieldName="related_articles")] | |
| public List<HyperLink> RelatedArticles { get; set; } | |
| [InlineEditableField(FieldName="publish_date")] | |
| public DateTime PublishDate { get; set; } | |
| [InlineEditableField(FieldName="prio")] | |
| public int Priority { get; set; } | |
| } | |
| [InlineEditable] | |
| public class HyperLink | |
| { | |
| [InlineEditableField(FieldName="link_to")] | |
| public string Url { get; set; } | |
| [InlineEditableField(FieldName="link_title")] | |
| public string LinkTitle { get; set; } | |
| } |
2) Create your model and call the ‘MakeInlineEditable’ method
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var model = new ArticleModel(); | |
| new XpmActions().MakeInlineEditable<ArticleModel>(model, tridionComponentPresentation); | |
| return model; |
3) Use the DD4T.XPM helpers to write out the value in the View
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @*Start of Component Presentation in View*@ | |
| @XPM.StartInlineEditingZone() | |
| @* or for a 'submodel' (Component Presentation in a Component Presentation) *@ | |
| @XPM.StartInlineEditingZone(Model.Teaser) | |
| @*Write out MarkUp and value*@ | |
| <h2>@XPM.Editable(m => m.Title)</h2> | |
| @*Write out MarkUp and value separately*@ | |
| <h2>@XPM.MarkUp(m => m.Title) @Model.Title</h2> | |
| @*Lists*@ | |
| @for (int i = 0; i < Model.RelatedArticles.Count; i++) | |
| { | |
| <li>@XPM.Editable(m => m.RelatedArticles[i].LinkTitle</li> | |
| } | |
| @*Region*@ | |
| <div> | |
| @XPM.RegionMarkup("PageHeader") | |
| </div> |
That’s all.
Regions
Regions are configured in the file ‘RegionConfiguration.xml’ in the root of your webapplication. This file is added by the NuGet installer. In your view you can use the following call to writeout the region MarkUp:
@XPM.RegionMarkup("PageHeader")
PageHeader is the ID of the region as configured in the RegionConfiguration.
Final notes
The NuGet installer adds the ‘SiteEdit_config.xml’ file to the root of your project. If this file is present, the XPM helper methods will write out the MarkUp (If you called ‘MakeInlineEditable’). If this file is not present, the helpers don’t output the MarkUp. Just the value. Of course you want to control the call to ‘MakeInlineEditable’ based on the environment you’re in: only call this in staging!
This package is developed with .NET 4.5.1 and NuGet version 2.7. I did *not* test it with other .NET frameworks, but I assume it just works.
Happy coding and let me know if you run into issues
Albertromkes's Weblog 
This is a fantastic approach, thank you for putting this together. One question: if my view models inherit from a base class, does my base class also have to be decorated with the [InlineEditable] attribute, even if none of the fields in the base class need to be editable via Experience Manager?
I never tested this, but I suspect you don’t have to decorate the base class. Just give it a go 🙂