How to display a TimeSpan in MVC Razor

Question

So I have a duration in seconds of a video and I would like to display that duration in Razor.

Currently I am using

@TimeSpan.FromSeconds(item.Dura         


        

Answer 1

You should take advantage of DataAnnotations namespace and DisplayTemplates in ASP.NET MVC

1. First mask your property with UIHint Attribute and set the template to VideoDuration in Models/YourVideoModel.cs

   [UIHint("VideoDuration")]
   public int Duration { get; set; }
   

2. Add a display template to your project at Views/Shared/DisplayTemplates/VideoDuration.cshtml (you may need to add folder DisplayTemplates if it not present)

   @model int?
   @string.Format("{0:g}", TimeSpan.FromSeconds(Model))
   

Then you can use it in your view like this:

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

Answer 2

John,

Create your own display template. To do this, follow these steps:

1. Create a folder called DisplayTemplates under Views/Shared
2. Under that new folder, create a partial view called TimeSpan.cshtml
3. Now, in your view, anytime you encounter a model property that is a timespan, it will automatically be rendered by the TimeSpan DisplayTemplate.
4. Add a new get property to your model.

Model edit (add the following):

public TimeSpan MyTimeSpanProperty
{
    get
    {
        return TimeSpan.FromSeconds(Duration);
    }
}

TimeSpan.cshtml

@model TimeSpan
@string.Format("{0}:{1}:{2}", Model.Hours, Model.Minutes, Model.Seconds)

Invoked in your view as

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

This will display as 3:24:16 etc..

That's all there is to it (tho it assumes that you'll pass in a property of type TimeSpan, so if possible, see if you can make that minor change to your model !! )

Answer 3

You can extend your model class using a partial class definition.

public partial class My_class_that_has_been_created_by_EF {
    public string Timespan {
        get { 
            return Timespan.FromSeconds(Duration).ToString(); 
        }
    }
}

Then use it in your view with

@Html.DisplayFor(modelItem => item.Timespan)