Question

I am trying to render the following HTML using an MVC3 Razor View:

<input id="EffectiveDate" name="EffectiveDate" type="date" data-options='{"mode": "flipbox"}' />

I have been unable to get the quotation marks in the data-options attribute to render. No matter what I try, they are rendered as "

Here are a couple of the many approaches I have tried in my View:

@Html.TextBoxFor(model => model.EffectiveDate, new { type = "date", data_options= " { 'mode':'flipbox' }"})

and

@Html.TextBoxFor(model => model.EffectiveDate, new { type = "date", data_options= @Html.Raw("{\"mode\":\"flipbox\"}")})

Any suggestions on how to decode the quotation marks?

Answer 1

You can do this by creating an MVC Editor template. First, create a folder called “EditorTemplates” inside the “Views\Shared” folder. Then put a file called DateTime.cshtml inside the EditorTemplates folder.

Then you can simply use the EditorFor() method against your view model’s property like this (provided that the EffectiveDate property of of type DateTime):

@Html.EditorFor(m => m.EffectiveDate)

The complete code for the DateTime.cshtml editor template looks like this:

@model System.DateTime
@{
    var id = this.ViewData.TemplateInfo.GetFullHtmlFieldId("");
    var name = this.ViewData.TemplateInfo.GetFullHtmlFieldName("");
}
<input id="@id" name="@name" type="date" data-options='{"mode": "flipbox"}' />

This will produce the exact output that you are seeking.