How to create an MVC Razor template for DisplayFor ()

Question

I have several properties in my view model that are displayed for display only, but I need to get their values ​​using jQuery to do the calculation on the page. The standard Html.DisplayFor () method simply writes their value to the page. I want to create a razor template that will allow me to display each element as:

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

I know that I can specify a template in Html.DisplayFor () to use a specific template to display the property, but inside this template, how to determine the id id to write to the span tag?

 @Html.DisplayFor(model => model.Element, "MyTemplate"); 

Answer 1

Ok, I found it, and it is actually very simple. In my Views \ Shared \ DisplayTemplates folder, I have a Read.cshtml containing the following:

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

This displays the correct tag using the property name as the id attribute and the property value as content:

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

This can be invoked in the view file using the following:

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

Or, if the model property is decorated with UIHint ("Read"), then the template name can be left out of the DisplayFor () call, and it will still be displayed using the template:

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

This should work well with custom editor templates.

Answer 2

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

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

Answer 3

I read a lot of SO posts on how to define a template for @Html.DisplayFor for a boolean property, but couldn't understand them clearly. Your question is close to this, and after understanding it, I decided to add a new answer that includes all the steps for its implementation. This may be useful for other people.

1. Create a template

First you need to add a Partial View to the path below (the path is very important):

 Views/Shared/DisplayTemplates/ 

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

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

2. Adding UIHint to the model

To establish the relationship between your property and template , you must add the UIHint attribute as UIHint below in your model class:

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

3. Using @ Html.DisplayNameFor in a View

Each time you view this property, you can use the following code:

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

Exit

The above code is displayed in the following example ( if (MyProperty == true) ):

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

Attribute Settings

To set id or other HTML attributes you can use ModelMetadata as follows:

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

Attribute Output

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

Answer 4

Here's an article explaining Templates (Display + Editor) in Razor, as well as the UIHint attribute.

Answer 5

I had exactly the same problem as the original entry.

Not sure if the last comment is valid. This would make the HTML id attribute a run-time value and therefore cannot refer to the design-time name.

I used DisplayFor overload, which allows you to add new objects to the data dictionary (ViewBag)

My model is a C # object called Project with various properties. In my opinion, I have the following:

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

This is using a custom StringDisplaySetHtmlID template, and the last parameter adds a pair of key values ​​to the View Bag.

My template file looks like this:

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

I also create a class for styling. I used the HtmlID key name, not just the identifier, to avoid a potential common name collision.

Now in my javascript, I can get the contents of the range using the following jquery:

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

Answer 6

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

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

Will it be:

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

These assistants may not have existed when this question was first published, but this is based on David's answer in two ways:

1. Using @Html.DisplayTextFor(m => m) instead of @Model will still use data annotations when displaying the value, rather than just essentially running ToString() on it.
2. Using @Html.IdForModel() instead of @ViewData.ModelMetadata.PropertyName would be preferable when the model is nested or repeating and the identifier is not just a property name.