How to change formatting of Html.DisplayFor for a user-defined class in MVC

Question

My main model, Project, has a property called "ProjectAddress" which is of type "Address"--a class that I defined. Address has the properties Line1, Line2, City, State, and ZipCode. When I use @Html.DisplayFor(model => model.ProjectAddress), it displays as:

Line 1
<Line1 value here>
Line 2
<Line2 value here>
City
<City value here>
...

and so on. I would like it to display as:

<Line 1>
<Line 2 if defined>
<City>, <State>, <ZipCode>
<County> County

without the property headers above each value. I can do this manually each time I want to display the address by hard coding

@Html.DisplayFor(model => model.ProjectAddress.Line1)
@if (!String.IsEmptyOrNull(model.ProjectAddress.Line2))
{
    @Html.DisplayFor(model => model.ProjectAddress.Line2)
}
@Html.DisplayFor(model => model.ProjectAddress.City), @Html.DisplayFor(model => model.ProjectAddress.State), @Html.DisplayFor(model => model.ProjectAddress.ZipCode)

but that's very tedious and if I change the format of my address class for whatever reason I'll have to go through my code and change each instance of that. Is there a way that I can change the formatting of @Html.DisplayFor(model => model.ProjectAddress) to be the block of code above?

Chris Pratt · Accepted Answer · 2017-06-06 14:17:20Z

2

You need to add a custom display template. Add the file, Views\Shared\DisplayTemplates\Address.cshtml, and put the following code inside:

@model Namespace.To.Address
@Html.DisplayFor(m => m.Line1)
@if (!String.IsEmptyOrNull(Model.Line2))
{
    @Html.DisplayFor(m => m.Line2)
}
@Html.DisplayFor(m => m.City), @Html.DisplayFor(m => m.State), 
@Html.DisplayFor(m => m.ZipCode)

Then, you can use DisplayFor as you tried originally in your view:

@Html.DisplayFor(m => m.ProjectAddress)

Razor will use the template you defined to render the ProjectAddress instance.

answered Jun 6, 2017 at 14:17

Chris Pratt

240k37 gold badges414 silver badges469 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Erik Funkenbusch Over a year ago

Just as an FYI to anyone reading this, make sure you change Namespace.To.Address to your actual fully qualified object name (name plus namespace)

Michael Coxon · Accepted Answer · 2017-06-06 14:17:20Z

1

Check out a thing called Display Templates. The short of it is this..

You create a new folder under views/shared called 'DisplayTemplates` (you can also have editor templates.
Add a new cshtml file called Address.cshtml. Set its model to My.LongNamespace.Address
Add the code you want to use to 'mark-up' the address type.

Example Address.cshtml (untested)

@model My.LongNamespace.Address

@Html.DisplayFor(model => model.Line1)
@if (!String.IsEmptyOrNull(model.Line2))
{
    @Html.DisplayFor(model => model.Line2)
}
@Html.DisplayFor(model => model.City), 
@Html.DisplayFor(model => model.State), 
@Html.DisplayFor(model => model.ZipCode)

answered Jun 6, 2017 at 14:17

Michael Coxon

5,5401 gold badge29 silver badges54 bronze badges

Collectives™ on Stack Overflow

How to change formatting of Html.DisplayFor for a user-defined class in MVC

2 Answers 2

1 Comment

Example Address.cshtml (untested)

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Example Address.cshtml (untested)

Comments

Your Answer

Sign up or log in

Post as a guest

Related