Five New Optimizely Certifications are Here! Validate your expertise and advance your career with our latest certification exams. Click here to find out more
Five New Optimizely Certifications are Here! Validate your expertise and advance your career with our latest certification exams. Click here to find out more
If you take a look inside EditAttributes() method, it generates list of key/value pairs for EPiServer OnPage edit mode to understand which html element represents which PageType property. I haven't seen feature to add more than one EditAttributes() to the html element - to edit more than one PageType property.
To make this a good experience for the editor I think I would create a ButtonWrapperBlock and make your ButtonBlock local only (with AvailableInEditMode=false). Something like this:
[ContentType(DisplayName = "ButtonLocalBlock", GUID = "bc29dc00-46d4-48fc-8fdc-a7ffa2008313", Description = "", AvailableInEditMode = false)] public class ButtonBlock : BlockData { [Display(Order = 1, GroupName = SystemTabNames.Content)] public virtual string ButtonText { get; set; } [Display(Order = 2, GroupName = SystemTabNames.Content)] public virtual Url ButtonLink { get; set; } [Display(Order = 3, GroupName = SystemTabNames.Content)] [SelectOne(SelectionFactoryType=typeof(ButtonSelectionFactory))] public virtual string ButtonType { get; set; } } [ContentType(DisplayName = "ButtonBlock", GUID = "3039ab13-4cdb-46bc-85a6-3910bc5e4819")] public class ButtonWrapperBlock : BlockData { [Display(Name = "Button")] public virtual ButtonBlock Button { get; set; } }
Then your ButtonBlock view would look like this:
@using EPiServer.Web.Mvc.Html @model MyEPiServerSiteMVC.Models.Blocks.ButtonBlock <a class="@Model.ButtonType" title="@Model.ButtonText" href="@Url.ContentUrl(Model.ButtonLink)"> @(string.IsNullOrWhiteSpace(Model.ButtonText) ? Html.Translate("/blocks/buttonblockcontrol/buttondefaulttext") : Model.ButtonText) </a>
And your ButtonWrapperBlock view would look like this:
@using EPiServer.Web.Mvc.Html @model MyEPiServerSiteMvc.Models.Blocks.ButtonWrapperBlock @Html.PropertyFor(m => m.Button)
This will lead to a popup dialog when the editor clicks the button and he/she can set all the button properties all together.
Hello, Mattias Olsson
I have changed the markup in the class to @Model.ButtonType just before you posted this and my button is now showing up. I have implimented the wrapper as you have sugguested and I am getting nothing showing for my button in edit and as well as preview mode. I copied the code exactly. Is there something missing?
Do you have these files?
/Views/Shared/ButtonBlock.cshtml
/Views/Shared/ButtonWrapperBlock.cshtml
And you have created a new instance of the new ButtonWrapperBlock? If yes, it's strange it is not working.
I had buttonblock.cshtml in /views/blocks
and buttonwrapperblock.cshtml in /views/shared
so they both need to bein shared then?
I now have both in shared.
This made two block types in the menu when creating a new block. I chose the wrapper. I entered the setting and the block displayed in my content area. Clicking on the block did not render a popup editor but instead the normal editor in it's own page. I am not using the alloy site but have started from an empy project.
I have a list of button classes that I am making a selectable property in my block control. Depending on the selection I would like that button class to inject into the view for that button. Code below.
The factory: These are common bootstrap buttons
public class ButtonSelectionFactory : ISelectionFactory { public IEnumerable GetSelections(ExtendedMetadata metadata)
{
return new ISelectItem[]
{
new SelectItem() { Text = "Default", Value = "btn btn-lg btn-default" }, new SelectItem() { Text = "Primary", Value = "btn btn-lg btn-primary" }, new SelectItem() { Text = "Success", Value = "btn btn-lg btn-success" }, new SelectItem() { Text = "Info", Value = "btn btn-lg btn-info" }, new SelectItem() { Text = "Warning", Value = "btn btn-lg btn-warning" }, new SelectItem() { Text = "Danger", Value = "btn btn-lg btn-danger" }, new SelectItem() { Text = "Link", Value = "btn btn-lg btn-link" }
};
}
}
My Button Block Class:
[ContentType(DisplayName = "ButtonBlock", GUID = "bc29dc00-46d4-48fc-8fdc-a7ffa2008313", Description = "")] public class ButtonBlock : BlockData { [Display(Order = 1, GroupName = SystemTabNames.Content)] public virtual string ButtonText { get; set; } [Display(Order = 2, GroupName = SystemTabNames.Content)] public virtual Url ButtonLink { get; set; } [Display(Order = 3, GroupName = SystemTabNames.Content)] [SelectOne(SelectionFactoryType=typeof(ButtonSelectionFactory))] public virtual string ButtonType { get; set; } }
My Button View:
@using EPiServer.Web.Mvc.Html @model MyEPiServerSiteMVC.Models.Blocks.ButtonBlock m.ButtonText)> @{ var buttonText = string.IsNullOrWhiteSpace(Model.ButtonText) ? Html.Translate("/blocks/buttonblockcontrol/buttondefaulttext") : Model.ButtonType; } @buttonText
When I replace @Html.EditAttributes with the actual name of the class the button shows. I have changed Model.buttonText to what you see now Model.ButtonType to try to capture what is being set for that property however it is running null. What step am I missing? Reference site