how to format a date time variable in asp.net mvc using @HTML.DisplayNameFor

Question

I have this statement in my view that as follows:

<th>           
    @Html.DisplayNameFor(model => model.ReleaseDate)
</th>

all I'm trying to do is format the release date so that it will be in the format of mm/dd/yyyy. I've searched loads and haven't come across anything that is exactly what I'm looking for. Any help would be greatly appreciated, I'm relatively new to coding.

Here is my Model:

using System;
using System.ComponentModel.DataAnnotations;
using System.Data.Entity;

namespace MvcMovie2.Models
{
    public class Movie
    {
        public int ID { get; set; }
        public string Title { get; set; }
        public DateTime ReleaseDate { get; set; }
        public string Genre { get; set; }
        public string Rating { get; set; }
        public decimal Price { get; set; }
    }

    public class MovieDBContext : DbContext
    {
        public DbSet<Movie> Movies { get; set; }
    }

    public class DummyModel : Movie
    {
        [DisplayFormat(DataFormatString = "{0:MM/dd/yyyy}")]
        public DateTime ReleaseDate { get; set; }
    }
}

and here is my view:

@model IEnumerable<MvcMovie2.Models.Movie>

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

<p>
    @Html.ActionLink("Create New", "Create")
</p>
<table class="table">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.Title)
        </th>
        <th>           
            @Html.DisplayFor(model => model.ReleaseDate)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Genre)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Rating)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Price)
        </th>
        <th></th>
    </tr>

@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.Title)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.ReleaseDate)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Genre)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Rating)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Price)
        </td>
        <td>
            @Html.ActionLink("Edit", "Edit", new { id=item.ID }) |
            @Html.ActionLink("Details", "Details", new { id=item.ID }) |
            @Html.ActionLink("Delete", "Delete", new { id=item.ID })
        </td>
    </tr>
}

</table>

Answer 1

You can achieve that with the DisplayFormatAttribute :

using System;
using System.ComponentModel.DataAnnotations;
using System.Data.Entity;

namespace MvcMovie2.Models
{
    public class Movie
    {
        public int ID { get; set; }
        public string Title { get; set; }
        [DisplayFormat(DataFormatString = "{0:MM/dd/yyyy}")]
        public DateTime ReleaseDate { get; set; }
        public string Genre { get; set; }
        public string Rating { get; set; }
        public decimal Price { get; set; }
    }

    public class MovieDBContext : DbContext
    {
        public DbSet<Movie> Movies { get; set; }
    }
}

Your view is strongly typed to IEnumerable<MvcMovie2.Models.Movie> therefore you cannot use the html helper like you did. Instead separate your code in partial views that are strongly type to MvcMovie2.Modes.Movie :

Code for the actual view :

@model IEnumerable<MvcMovie2.Models.Movie>

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

<p>
    @Html.ActionLink("Create New", "Create")
</p>
<table class="table">
    @Html.Partial("Header")
    @foreach (var item in Model) 
    {
        @Html.Partial("Movie", item)
    }
</table>

Code for the Header.cshtml partial view :

@model MvcMovie2.Models.Movie

<tr>       
    <th>
        @Html.DisplayNameFor(model => model.Title)
    </th>
    <th>           
        @Html.DisplayNameFor(model => model.ReleaseDate)
    </th>
    <th>
        @Html.DisplayNameFor(model => model.Genre)
    </th>
    <th>
        @Html.DisplayNameFor(model => model.Rating)
    </th>
    <th>
        @Html.DisplayNameFor(model => model.Price)
    </th>
    <th></th>
</tr>

Code for the Movie.cshtml partial view :

@model MvcMovie2.Models.Movie

<tr>        
    <td>
        @Html.DisplayFor(modelItem => item.Title)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.ReleaseDate)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.Genre)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.Rating)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.Price)
    </td>
    <td>
        @Html.ActionLink("Edit", "Edit", new { id=item.ID }) |
        @Html.ActionLink("Details", "Details", new { id=item.ID }) |
        @Html.ActionLink("Delete", "Delete", new { id=item.ID })
    </td>
</tr>

Answer 2

I got it to work. All I had to do was put this using clause in my model:

using System.ComponentModel.DataAnnotations;

then I put this line of code above my code that defined my Release Date:

[DisplayFormat(DataFormatString = "{0:MM/dd/yyyy}")]

and then it worked perfectly, I didn't have to change anything in the view.