[ACCEPTED]-How do I create a MVC Razor template for DisplayFor()-razor

OK, I found it and it's actually very simple. In 10 my Views\Shared\DisplayTemplates folder I have Reading.cshtml containing the following:

@model System.Int32
<span id="@ViewData.ModelMetadata.PropertyName">@Model</span>

This 9 renders the correct tag using the name of 8 the property as the id attribute and the value 7 of the property as the contents:

<span id="Reading">1234</span>

In the view 6 file this can be called using the following:

@Html.DisplayFor(model => model.Reading, "Reading")

Or 5 if the model property is decorated with 4 UIHint("Reading") then the template name can be left out 3 of the call to DisplayFor() and it will still render 2 using the template:

@Html.DisplayFor(model => model.Reading)

This should work equally 1 well with custom editor templates.

I read many SO posts about defining template 16 for @Html.DisplayFor for Boolean property but I couldn't 15 clearly understand them. Your question is 14 closed to this and after grasping it, I 13 decided to add a new answer including all 12 steps needed for implementing that. It might 11 be helpful for other people.

1. Creating a template

At first, you 10 need to add a Partial View in path below (the path is 9 very important):

Views/Shared/DisplayTemplates/

For example, I created a 8 Partial View that named _ElementTemplate and Fill it like this:

<span>
    @(@Model ? "Yes" : "No")
</span>

2. Adding UIHint to the Model

To make 7 a connection between your property and template, you should 6 add UIHint attribute like below in your model 5 class:

[UIHint("_YesOrNoTemplate")]
public bool MyProperty { get; set; }

3. Using @Html.DisplayNameFor in View

In every view that you need this property, you 4 can use code below:

<div>
    @Html.DisplayFor(modelItem => item.MyProperty)
</div>

Output

The code above is rendered 3 to code below in my example (if (MyProperty == true)):

<div>
    <span>
        Yes
    </span>
</div>

Setting attributes

For setting 2 id or other html attributes you can use ModelMetadata like 1 this:

<span id="@ViewData.ModelMetadata.PropertyName">
    @(@Model ? "Yes" : "No")
</span>

Output with attribute

<div id="MyProperty">
    <span>
        Yes
    </span>
</div>

You could make this id part of the view model 1 and use it in the display template:

<span id="@Model.Id">@Html.DisplayFor(x => x.Value)</span>

There's an article explaining the Templates (Display + Editor) in 1 Razor, and also the UIHint attribute.

I had exactly the same issue as the original 17 post.

Not sure the last comment is valid. It 16 would make the HTML id attribute a run-time 15 value and therefore cannot be referenced 14 with a design time name.

I used the overload 13 of DisplayFor which allows you to add new 12 objects onto the data dictionary (ViewBag)

My 11 model is a C# object called Project with 10 various properties. In my view I have this:

@Html.DisplayFor(model => model.ProjectName, "StringDisplaySetHtmlID", new { HtmlID = "project-name" })

This 9 is using a custom template called StringDisplaySetHtmlID 8 and the last parameter adds a key value 7 pair to the Viewbag.

My template file looks 6 like this:

@model string
<span class = "display-field" id = "@(ViewBag.HtmlID)">@Model</span> 

I'm also setting a class here 5 for styling purposes. I've used the key 4 name HtmlID rather than just ID to avoid 3 a potential common naming collision.

Now 2 in my javascript I can pick up the span's 1 content using the following jquery:

var projectName = $('#project-name').text()

The best way to build a display template 4 that will output the following:

<span id="ElementsId">Element's value</span>

Would be 3 this:

<span id="@Html.IdForModel()">@Html.DisplayTextFor(m => m)</span>

These helpers may not have existed 2 when this question was first posted, but 1 this builds on David's answer in two ways:

1. Using @Html.DisplayTextFor(m => m) instead of @Model will still utilize data annotations while rendering the value instead of just essentially running ToString() on it.
2. Using @Html.IdForModel() instead of @ViewData.ModelMetadata.PropertyName would be preferable in cases where the model is nested or repeated, and the ID is not going to simply be the property name.