Get title of an HTML Widget in OrchardCMS - orchardcms

Question

How do I get title of a HTML widget (in this case the "default" TripelFirst) in Orchard CMS? Newbie question, but I can't figure it out.
This is the code, I just can't figure out how to get the title into the "panel-heading" div.
#if (Model.TripelFirst != null || Model.TripelSecond != null || Model.TripelThird != null) {
<div class="row">
#if (Model.TripelFirst != null) {
<div class="col-md-4 panel panel-success" runat="server" id="TripelFirst">
<div class="panel-heading">#Model.TripelFirst.Title()</div>
<div class="panel-body">#Model.TripelFirst.Body</div>
</div>
}
#if (Model.TripelSecond != null) {
<div class="col-md-4 panel panel-success" runat="server" id="TripelSecond">#Display(Model.TripelSecond)</div>
}
#if (Model.TripelThird != null) {
<div class="col-md-4 panel panel-success" runat="server" id="TripelThird">#Display(Model.TripelThird)</div>
}
</div>
}

Answer 1

First, it seems you are confusing zone and widget. TripelFirst is a zone, not a widget (see "So what are zones really?" for a more in-depth explanation of what a zone is). A zone should be seen as a placeholder, a container to which the widgets will be added. Orchard has a rich composition model where many decoupled services participate in the rendering of the page. The zone itself knows almost nothing about what's inside of it, it will just delegate rendering to its contents (such as widgets) when time comes. As such, the zone will not provide the easiest way to get to the title of the widgets it contains.
By far the easiest way to customize the rendering in Orchard is to do it from the right place :D Case in point, in this case, you might want to override the specific template for the widget, or a template for its wrapper (all shapes in Orchard can have wrappers which are templates that render around the shape itself).
This may look a little intimidating at first, but Orchard provides a marvelous tool out of the box that makes it easy to discover the shape structure of the page. Enable the "shape tracing" feature from the designer tools module on your dev machine (never activate this in production of course), and you'll get a nice Firebug-like debugging panel on the bottom of the page, that you can use to explore the tree of shapes/templates, the model for each of them, etc.
Another concept that is essential to understand rendering in Orchard is the placement file, which primarily describes in what order shapes representing a content item should get rendered.
In the end, to control the rendering of the title of a widget that goes into the TripelFirst zone, find the what template you need to override in your theme using shape tracing, then modify the rendering in this template to be exactly what you need.
Here's an example of code that you can put in a content part template override (such as Parts.Title.cshtml), that first finds the content item for the current part, then gets to the Title part, and displays it as a link.
#{
Orchard.ContentManagement.ContentItem contentItem =
Model.ContentPart.ContentItem;
string title = Model.Title.ToString();
}
<h2>#Html.ItemDisplayLink(title, contentItem)</h2>

Answer 2

Using the Shape Tracing tool, it helped me understand the model structure. Now I'm not saying this is the way the Orchard team wants this done, but this is how I ended up solving the problem.
#if (Model.SideItems != null)
{
<div class="col-md-12"> </div>
var sideWidgetItems = ((IEnumerable<dynamic>)Model.SideItems.Items).Where(x => x.ContentItem.ContentType == "HtmlWidget");
if (sideWidgetItems.Any())
{
foreach (var item in sideWidgetItems)
{
<div class="col-md-12">
<div class="panel panel-success">
<div class="panel-heading">#Html.Raw(item.ContentItem.Content.Parts[3].Title)
</div>
<div class="panel-body">#Html.Raw(item.ContentItem.Content.Parts[1].Text)
</div>
</div>
</div>
}
}
}