Refresh and Render ContentArea items without edit wrapper

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

AI OnAI Off

Home / Forums / Developers (Main Products) Forum / CMS 7.5 - 11 /

Refresh and Render ContentArea items without edit wrapper

Daved

Vote:

Information:

I am using MVC for this project on Epi 9.2.

Scenario: I have a ContentArea property that allows ICallout blocks using the AllowedTypes attribute. The ICallout items render differently using different partials, so I am looping through the ContentArea items and calling Html.RenderContentData on each. I am using Html.EditAttributes to make my row wrapper the editable section for the content area.

Issue: First, when the contentarea is edited (items added, removed, or rearranged) the area would not refresh. In my page controller I ended up adding editHints.AddFullRefreshFor to try to resolve it. I can't tell that this is having a benefit currently as different things I try sporadically have different results. I am still trying to nail down the refresh, and something I did made it happen, but then the layout of the individual items would break. Currently, each item is getting wrapped in it's own edit block, which is breaking the layout.

My Goal: Ideally, I don't care about having the edit sections around each of the items in the contentarea. I care more about the contentarea as a whole being editable and refreshing when it is edited.

Page Property Code:

[Display(Name = "Lower callout links", Description = "Callout links displayed just above the footer.",
	GroupName = SystemTabNames.Content)]
[MaxItemCount(6)]
[AllowedTypes(new[] { typeof(IColumnBlock) })]
public virtual ContentArea LowerCalloutLinks { get; set; }

Row Partial View Code:

int maxItems = 3;
var calloutItems = Model.Items.GetContentItems();

int rowCount = (int) Math.Ceiling(calloutItems.Count() / (float) maxItems);

for (int i = 0; i < rowCount; i++) {
	
		@{
	var currentItems = calloutItems.Skip(i * maxItems).Take(maxItems);
	int colsClass = (12 / currentItems.Count());

	foreach (var callout in currentItems) {
		
			@{ Html.RenderContentData(callout, false); }
		
	}
		}
	
}

With the bool for IsContentInContentArea to false, the content area refreshes and the layout of the items within gets messed up, with each getting it's own edit wrapper. When I set it to true, I get no edit wrapper and no refresh.

The actual view for the block renders fine on initial load, but right now it seems to be either, it refreshes and breaks, or it doesn't refresh but still looks the part, minus updating.

Thoughts?

#147714

Apr 21, 2016 23:43

Johan Petersson

Vote:

Hi,

Your main issue is that the content area is rendered differently on page load than when an editor has changed its value. Why? Becuase when the value is changed Episerver calls the display template for the property type or the one you have specified by either tag or something else, and not the whole page view where you have your custom rendering.
You can get arround this by having your own display template for content areas or just this specific property. You can specify a display template with a tag:

@Html.PropertyFor(x => x.LowerCalloutLinks, new { Tag = "CustomContentArea" })

And the create a view called CustomContentArea.cshtml in /views/shared/displaytemplates/.

Now when an editor changes the value this display template will be called as well.

Sometimes it's convenient to replace the whole content area renderer, which the Alloy templates project does

#147747

Edited, Apr 22, 2016 16:32

Daved

Vote:

Thanks for the suggestion, Johan. However, I tested it and am not seeing any difference in the behavior. The good news is, that does present a simpler markup line in my page than what I was using, but the ContentArea is still not refreshing when I rearrange the items as a test.

I created a DisplayTemplate called CalloutRow, and am referencing it as the Tag calling PropertyFor.

PropertyFor code:

@Html.PropertyFor(m => m.CurrentPage.LowerCalloutLinks, new { Tag = "CalloutRow", GroupClass = "marketsolutions-group" })

I also removed the EditAttributes code from the Display Template, but the rest of the code posted above is the same.

It isn't refreshing the section, though, when the AutoSave completes. Any more ideas?

#147862

Edited, Apr 26, 2016 22:12

Daved

Vote:

Update: It worked once after recycling my app pool, so something seemed right. It didn't work after that time, however. Inspecting the page revealed a dojo error on line 15. Chrome says "Unexpected Token" and Mozilla shows a "syntax error" which indicates something is awry, though I haven't gotten into the details and grit of what it might be.

If you have any suggestions, I am open to them.

Edit: Line 15 is the entire thing since it's minified. :)

#147864

Edited, Apr 26, 2016 22:39

Please login to post a reply