How to render HtmlAttributes with object values using ASP.NET MVC 3 Razor?

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.

Answer 2

One thing is certain: special symbols will always be encoded when you use any of the default MVC input extensions (i.e. TextBoxFor). That is because TagBuilder itself, which is used to build the tags for the HtmlHelper extensions, HtmlEncodes each attribute value in a tag. You can see this in the TagBuilder source:

private void AppendAttributes(StringBuilder sb)
{
    foreach (var attribute in Attributes)
    {
        string key = attribute.Key;
        if (String.Equals(key, "id", StringComparison.Ordinal /* case-sensitive */) && String.IsNullOrEmpty(attribute.Value))
        {
            continue; // DevDiv Bugs #227595: don't output empty IDs 
        }
        string value = HttpUtility.HtmlAttributeEncode(attribute.Value);
        sb.Append(' ')
            .Append(key)
            .Append("=\"")
            .Append(value)
            .Append('"');
    }
} 

Since you have no way to send that value already decoded, you have to decode it yourself in JavaScript. Here is a nice little jQuery trick that will do it:

var value = $('<textarea/>').html(yourElement.data('options')).val();

You might want to make a function for that, of course.

Sources:

• http://aspnet.codeplex.com/
• http://refresh-sf.com/blog/2009/05/decode-html-entities-with-jquery/