ASP.NET MVC 3 Razorを使用してHtmlAttributesをオブジェクト値でレンダリングするには？

Question

MVC3 Razor Viewを使用して次のHTMLをレンダリングしようとしています。

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

レンダリングするdata-options属性で引用符を取得できませんでした。私が試しても、"

としてレンダリングされています。私は私のビューで試した多くのアプローチのカップルです：

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

と

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

引用符をデコードしますか？

Answer 1

あなたはMVCエディタのテンプレートを作成することによってこれを行うことができます。まず、 "Views \ Shared"フォルダ内に "EditorTemplates"という名前のフォルダを作成します。その後、EditorTemplatesフォルダ内にDateTime.cshtmlというファイルを配置します。

は、その後、あなたは、単にこのようなあなたのビューモデルのプロパティに対してEditorFor（）メソッドを使用することができます（ただし、タイプの日時のEffectiveDateプロパティ）：

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

DateTime.cshtmlエディタテンプレートの完全なコード

@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"}' /> 

これは、探している正確な出力を生成します。

Answer 2

1つのことは確実です：デフォルトのMVC入力拡張機能（TextBoxForなど）のいずれかを使用すると、特殊記号が常にエンコードされます。これは、TagBuilder自体が、HtmlHelper拡張のタグを構築するために使用されるため、HtmlEncodeタグ内の各属性値です。あなたはTagBuilderソースでこれを見ることができます：

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('"'); 
    } 
} 

あなたは既に復号化、その値を送信する方法がありませんので、あなたはJavaScriptでそれを自分でデコードする必要があります。

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

これはもちろん、そのための機能を作りたいと思うかもしれません。

出典：

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