PropertyFor vs EditAttributes


Hi, I have a (problably trivial) question that I don't quite understand. When are you supposed to use @Html.ProperyFor and when are you supposed to use @Html.EditAttributes? To me they seem to accomplish the same thing, for example the following code generates the same behavior. This is the only way I have seem them in use.

<h1>@Html.PropertyFor(x => x.PageName)</h1>
<h1 @Html.EditAttributes(x => x.PageName)>@Model.PageName</h1>

Hope someone can put some light on it for a novice Epi user =)

Mar 13, 2013 15:09


When we designed the MVC support the thought regarding this was that the default way to render properties is to use PropertyFor. However, for instances where PropertyFor can't be used, maybe you want to customize the rendering, you can use EditAttributes to just get the html attributes.

In short, if possible, use PropertyFor. If you need more granular control of the html use EditAttributes to get the html attributes needed for on page edit.


Per Gunsarfs

EPiServer Development Team

Mar 13, 2013 15:24

Thanks for the answer!

Can you give an example where PropertyFor can't be used?  I'm still a bit confused because I saw in the MVC templates for Alloy they are using this line for example ( in Views/ProductPage/Index.cshtml and PageName is just a string.)

<h1 @Html.EditAttributes(x => x.CurrentPage.PageName)>@Model.CurrentPage.PageName</h1> . To me it seems it would be easier to just write:

<h1>@Html.PropertyFor(x => x.CurrentPage.PageName)</h1> if it gives the exact same behavior ( or is there some difference in edit mode?  )  

But knowing that Joel Abrahamsson ( and other people involved ) in writing the MVC templates have very good knowledge about EPiServer I thought they had some good reason for writing the other way. I'm not sure I understand what attribute is supposed to get returned when using EditAttributes, is it like a contenteditable attribute in Html5?

Mar 13, 2013 15:46

One thing that PropertyFor does is that it wraps the content with an html tag when in the edit UI. The reason for that is that we need a wrapping node to write the html attributes to. So the two examples will not render the exact same html in edit. I think that was a reason to why PropertyFor wasn't used, since it had effect on the layout. But Joel can answer that better.

The attributes are needed for the on page edit in the edit UI works. The most central one is called "data-epi-property-name" and informs the UI what property should be connected to that html element. Ie, meta data informing where to add the overlay and what property that should be edited when the overlay is clicked.


Per Gunsarfs

Mar 13, 2013 16:00

Thanks Per!

Mar 13, 2013 16:57
This thread is locked and should be used for reference only. Please use the Episerver CMS 7 and earlier versions forum to open new discussions.
* You are NOT allowed to include any hyperlinks in the post because your account hasn't associated to your company. User profile should be updated.