Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Martin Rud 232 posts 902 karma points c-trib
    Apr 14, 2022 @ 12:02
    Martin Rud
    0

    How to call the same partial view for rendering both normal content documents and element documents

    Hi forum,

    On my site editors can insert content elements (element document types) via a block list property editor field:

    The first 4 types are elements where the editor fills out text fields, images and so on. In the last type, see "2" in the screenshot, the editor can instead pick nodes via an MNTP. There are 4 types of these nodes, exactly with the same fields (to the editors I name it global ribbons).

    enter image description here

    As of now I have some working code:

    ribbons.cshtml:

    @inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage
    @using Umbraco.Cms.Core.Models.Blocks;
    @{
        var blocks = Model.Value<IEnumerable<BlockListItem>>("ribbons");
        foreach (var block in blocks)
        {
            var content = block.Content;
            @await Html.PartialAsync("SiteBlocklist/" + content.ContentType.Alias, block)
        }
    }
    

    And then for the text/image element two ways of rendering:

    1) When editor has created the element from the block list editor:

    textImage.cshtml:

    @inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage<Umbraco.Cms.Core.Models.Blocks.BlockListItem>;
    @using Umbraco.Cms.Core.Models;
    @{
        var content = Model.Content;
    
        <h2>@content.Name</h2>
        <div>... rest of html here ... </div>
    }
    

    2) When the editor has created a global element ("Globale bånd" in the image):

    globalItems.cshtml:

    @inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage<Umbraco.Cms.Core.Models.Blocks.BlockListItem>;
    @using Umbraco.Cms.Core.Models.Blocks;
    @{
        var content = Model.Content;
    
        var ribbons = content.Value<IEnumerable<IPublishedContent>>("ribbons");
        foreach (var ribbon in ribbons)
        {
            @await Html.PartialAsync("SiteBlocklist/" + ribbon.ContentType.Alias, ribbon)
        }    
    }
    

    And this view calls:

    textImageGlobalItem.cshtml:

    @inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage;
    @using Umbraco.Cms.Core.Models;
    @{
        var content = Model;
    
        <h2>@content.Name</h2>
        <div>... rest of html here ... </div>
    }
    

    The rendered html in textImage.cshtml and textImageGlobalItem.cshtml is 100% the same and therefore I would like to have only on view for both cases.

    I thought I could change the call in ribbons.cshtml so it calls the partials with parameter 'content' instead of 'block' (since then I could use the view textImageGlobalItem.cshtml in both cases):

    @await Html.PartialAsync("SiteBlocklist/" + content.ContentType.Alias, content)
    

    But it doesn't work. Only this works:

    @await Html.PartialAsync("SiteBlocklist/" + content.ContentType.Alias, block)
    

    Using the former call gives me this error ('GlobalItems' is the element document type where the MNTP is):

    ModelBindingException: Cannot bind source type Umbraco.Cms.Web.Common.PublishedModels.GlobalItems to model type Umbraco.Cms.Core.Models.PublishedContent.IPublishedContent. The source is a ModelsBuilder type, but the view model is not.
    
Please Sign in or register to post replies

Write your reply to:

Draft