Rendering Content Types in View in Separate Divs

Topics: Customizing Orchard
Feb 21, 2014 at 10:56 PM
I am new to Orchard. I am trying to render a content type called Projects.

A Project content type has these fields:
Parts_Title
Parts_Common_Body
Fields_Common_Text
Fields_MediaLibraryPicker
     Media
          Parts_Image
I have created a template that renders the content called Content-Project.cshtml:
@using Orchard.Utility.Extensions;
@{
    if (Model.Title != null) {
        Layout.Title = Model.Title;
    }

    Model.Classes.Add("content-item");
    
    var contentTypeClassName = ((string)Model.ContentItem.ContentType).HtmlClassify();
    Model.Classes.Add(contentTypeClassName);
    
    var tag = Tag(Model, "article");
}

@tag.StartElement

    <header>
        @Display(Model.Header)
    </header>

    <div class="project-box">
    @Display(Model.Content)
    </div>

@tag.EndElement
What I would love to be able to do is wrap separate parts of the content type in separate divs, like so:
<div class="project-box">
    @Display(Model.Content.Title)
    @Display(Model.ContentPart.Text)
    @Display(Model.ContentField.Value)
</div>

<div class="project-map">
    @Display(Model.ContentPart.ContentItem.MediaPart.MediaUrl)
</div>
But this renders nothing at all.

Apparently I can't drill down into Model.Content from a single template? How do I render some parts of Model.Content in one div, and some parts of Model.Content in another?

Thanks!
Feb 24, 2014 at 9:01 PM
You can try this. It works for me:
@using Orchard.Utility.Extensions;
@{
    if (Model.Title != null) {
        Layout.Title = Model.Title;
    }

    Model.Classes.Add("content-item");
    
    var contentTypeClassName = ((string)Model.ContentItem.ContentType).HtmlClassify();
    Model.Classes.Add(contentTypeClassName);

    dynamic ci = Model.ContentItem;

    dynamic titlePart = ((dynamic)ci).TitlePart;
    dynamic bodyPart = ((dynamic)ci).BodyPart;
    dynamic myTextField = ((dynamic)ci).Project.myText;
    dynamic myImgField = ((dynamic)ci).Project.myImg;
    
    
    var tag = Tag(Model, "article");
}
@tag.StartElement
    <header>
        @Display(Model.Header)
        @if (Model.Meta != null) {
            <div class="metadata">
                @Display(Model.Meta)
            </div>
        }
    </header>

<div class="project-box">
    
    <div style ="border:solid 1px green;">
        
        @Display(titlePart.Title);
        @Display(bodyPart.Text);
        @Display(myTextField.Value);
    </div>
</div>

<div class="project-map">
    @foreach (var mediaPart in myImgField.MediaParts)
    {
         <p>@mediaPart.MediaUrl</p>
    }    

</div>


    @if(Model.Footer != null) {
        <footer>
            @Display(Model.Footer)
        </footer>
    }
@tag.EndElement
The most important change is here:
    dynamic ci = Model.ContentItem;

    dynamic titlePart = ((dynamic)ci).TitlePart;
    dynamic bodyPart = ((dynamic)ci).BodyPart;
    dynamic myTextField = ((dynamic)ci).Project.myText;
    dynamic myImgField = ((dynamic)ci).Project.myImg;
You need to cast to dynamic.
Note too that fields, as opossed to parts, live inside a custom part that is attached to your content item. The name of this custom part is the name of your content item. So to access fields you need the syntax: " ((dynamic)ci).TheNameOfYourContentType.TheNameOfYourField".



This was discussed here: https://orchard.codeplex.com/discussions/398270
Hope it helps.
Feb 25, 2014 at 7:14 PM
Thanks, that worked, except all content is showing up as encoded HTML instead of rendered HTML.

I tried Html.Raw():
 @Html.Raw(Display(myTextField.Value))
But it had no effect. Anyone have an idea? Here is the template:
@using Orchard.Utility.Extensions;
@{
    if (Model.Title != null) {
        Layout.Title = Model.Title;
    }

    Model.Classes.Add("content-item");
    
    var contentTypeClassName = ((string)Model.ContentItem.ContentType).HtmlClassify();
    Model.Classes.Add(contentTypeClassName);

    dynamic ci = Model.ContentItem;

    dynamic titlePart = ((dynamic)ci).TitlePart;
    dynamic bodyPart = ((dynamic)ci).BodyPart;
    dynamic myTextField = ((dynamic)ci).Project.Photos;
    dynamic myImgField = ((dynamic)ci).Project.Map;
    
    var tag = Tag(Model, "article");
}


@tag.StartElement
    <header>
        @Display(Model.Header)
        @if (Model.Meta != null) {
            <div class="metadata">
                @Display(Model.Meta)
            </div>
        }
    </header>

<div class="project-box">
    
        @Display(titlePart.Title)
        @Display(bodyPart.Text)
        @Display(myTextField.Value)

</div>

<div class="project-map">
        @Display(myImgField.Value)
</div>

    @if(Model.Footer != null) {
        <footer>
            @Display(Model.Footer)
        </footer>
    }

@tag.EndElement
Feb 26, 2014 at 5:08 PM
Try this:
@Display( new HtmlString(bodyPart.Text));
Feb 26, 2014 at 5:39 PM
That worked. Thanks a million!