Search code examples
asp.net-mvc-3n2cms

N2CMS MVC3 Html.DroppableZone Renders Full Layout


I have the following in my project (MVC3) N2CMS 2.2.1 (from nuget). I am able to edit the main page using the "manage parts" functionality and drag an image part onto the page and set it's content. However, when it renders the page it renders my Image.cshtml file inside of the _layout.cshtml (like it would for a page, not a part)... this is causing the site to have multiple head/footer etc tags and breaking the layout. How can i get the DroppableZones to render the partials properly (without having to set Layout = "" in every partial view manually). If you would like to test this yourself, you can check out the code from https://github.com/robbihun/N2CMSBaseStarterSite run it, go through the N2CMS setup with the sqlite db and use the manage parts feature (http://screencast.com/t/w9q5a49Ei8) to drag an image part onto the home page.

_layout.cshtml

<body>
    @{ Html.ControlPanel().Render(); }
    @RenderBody()

    <footer>&copy; @DateTime.Now.Year</footer>
    @RenderSection("scripts", false)
</body>

StartHome.cshtml

<div>
@{ Html.DroppableZone(Zones.ImageSlider).Render(); }
</div>

Image.cshtml

@model ImagePart

    <div class="image">
    <img src="@Model.Image" alt="@Model.Title" />
        <span class="title">@Model.Title</span>
        <span class="description">@Model.ShortDescription</span>
    </div>

StartHomePage.cs

[PageDefinition("Start Page", Description = "The start or home page of the website.", SortOrder = 1, InstallerVisibility = InstallerHint.PreferredRootPage | InstallerHint.PreferredStartPage)]
[WithEditableTitle("Title", 1, Focus = true, ContainerName = Tabs.Content)]
[RestrictParents(typeof(IRootPage))]
public class StartHomePage : PageBase
{
    [EditableFreeTextArea("Main Content", 2, ContainerName = Tabs.Content)]
    public virtual string MainContent { get; set; }
}

ImagePart.cs

[PartDefinition("Image Part", Description = "Image with title and description.")]
[WithEditableTitle("Title", 10)]
public class ImagePart : PartBase
{
    [FileAttachment, EditableImageUpload("Image", 5)]
    public virtual string Image { get; set; }

    [EditableTextBox("Short Description", 15, TextMode = TextBoxMode.MultiLine, Rows = 5, Columns = 15)]
    public virtual string ShortDescription { get; set; }
}

Solution

  • Add a _ViewStart.cshtml in the Views/Shared/Parts folder, and it'll override the Layout setting in that folder. In the new _ViewStart, set Layout = null; and don't set the Layout in your partial views.

    Here's a pull request for you: https://github.com/robbihun/N2CMSBaseStarterSite/pull/1