CODEWITHSUNDEEP
c#asp.net-mvcdisplay-templates
Clayton Page
Clayton Page

Reputation: 95

MVC DisplayFor Not Rendering

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

project 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

enter image description here

Here is the resulting rendered HTML

enter image description here

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

Upvotes: 2

Views: 5818

Answers (2)

Kevin R.
Kevin R.

Reputation: 3581

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

Upvotes: 1

Aaron
Aaron

Reputation: 1323

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>

Upvotes: 2

Related Questions