MVC DisplayFor Not Rendering

Question

I am having an issue with a custom display template in an MVC 5 application. I have a viewmodel that contains a complex type that I wanted to reuse. I created the DisplayTemplates folder and placed a partial view that follows the correct naming convention. Everything seems to work correctly and the partial view gets called but nothing renders on the browser.

I have checked the rendered html to make sure it wasn't being hidden or displayed funny but there is literally nothing rendered in the html output. Please see below for relevent screenshots. What am I doing wrong? Thanks.

Folder Structure

Here is the initial view. The viewmodel has a list of AvailableOption. The foreach calls the displayfor

@model CustomerWebPortal.ViewModels.OrderVehicle

@using (Html.BeginForm("CreateOrder", "Home"))
{
    <h2>@Html.DisplayFor(x => x.DisplayName)</h2>

    <div class="description">
        <ul>
            @Html.Raw(Model.Description)
        </ul>
    </div>

    <h3>Available Options</h3>
    <hr />

    <div>
        @foreach (var option in Model.AvailableOptions)
        {
            Html.DisplayFor(x => option, "AvailableOption");
        }
    </div>

    <h3>Customer</h3>
    <hr />
    
    <div class="customerInfo">
        @Html.LabelFor(x => x.Customer)
        @Html.TextBoxFor(x => x.Customer)
        @Html.ValidationMessageFor(x => x.Customer)
    </div>

    <div class="actions">
        <input type="submit" value="Place Order" />
    </div>

    @Html.HiddenFor(x => x.VehicleId)
    @Html.HiddenFor(x => x.Price)
}

Here is the partial view for the complex type

@model CustomerWebPortal.ViewModels.AvailableOption

<div class="row-fluid padtopbottom5">
    <div class="span6">
        <div class="row-fluid">
            <div class="span4">
                @Html.CheckBoxFor(x => x.Selected)
            </div>
        </div>
    </div>

    <div class="span6">
        <div class="row-fluid">
            <div class="span4">
                <h3>@Html.DisplayFor(x => x.DisplayName)</h3>

                <ul>
                    @Html.Raw(Model.Description)
                </ul>

                <p><strong>@Html.DisplayFor(x => x.Price)</strong></p>
            </div>
        </div>
    </div>
</div>

Here is the foreach that calls the displayfor for the complex type

Here is the resulting rendered HTML

I have created a small test project that reproduces the error if anyone wants to take a look. Sample Project

Answer 1

This is in the comments of the question, but I wrote a small test app using Html.Raw, and apparently it should also fix your case. It just needs an "@" in front of the Html.DisplayFor

ViewModel (in my case, junk data for you)

public class IndexViewModel
{
    private IEnumerable<string> _avlOpt;

    public IEnumerable<string> AvailableOptions
    {
        get { return _avlOpt; }
        set { _avlOpt = value; }
    }

    public IndexViewModel()
    {
        List<string> lstString = new List<string>();
        for (int i=1;i<5;i++)
        {
            lstString.Add(@"<h" + i.ToString() + ">Test</h" + i.ToString() + ">");
        }
        AvailableOptions = lstString;
    }
}

View

 test<br/>
 @foreach (var option in Model.AvailableOptions)
 {
   @Html.Raw(option);
 }
<br/>end test

View Result (Source - WITHOUT "@" - Html.Raw(option))

<div>
test<br/>
<br/>end test
</div>

View Result (Source - WITH "@" - @Html.Raw(option))

<div>
test<br/>
<h1>Test</h1><h2>Test</h2><h3>Test</h3><h4>Test</h4>    <br/>end test
</div>

Answer 2

If you're a dunce, like me, be sure you didn't create a blank DisplayTemplate for the value type.

In my case I was experimenting with something and got distracted, leaving an empty file in the DisplayTemplates folder named string.cshtml and spent the next hour upon return trying to figure out why my values stopped displaying.

Don't do that