2011-01-26 10 views
32

新規作成]を使用し、asp.netのウェブサイト上のチュートリアルを実行してきました。ASP.NET MVC 3つのカスタムHTML Helpers-ベストプラクティス/ MVCへ

彼らはテーブルに表示長いテキストを切り捨てるためのカスタムHTMLヘルパーの例が含まれます。

だけの人はHTMLヘルパーを使用して、それらを使用する/作成するときに避けるために、任意のベストプラクティスや物事がある場合が出ている他のどのような解決策不思議。

例として、私はさまざまな場所に表示する必要がある日付をフォーマットするためにカスタムヘルパーを書いて考えると、今よりエレガントな解決策があるかもしれないことを懸念しています(私のモデルでIEのDataAnnotations)

ました何かご意見は?

EDIT:

私は文字列の連結...と思ったもう一つの潜在的な使用。 カスタムヘルパーは、入力としてユーザーIDを取り込み、ユーザーのフルネームを返すことができます... 結果が利用可能なこれらのフィールドのかに依存(タイトル)(初)(中)(最終)のいくつかの形式である可能性があります。ちょうど考え、私はまだこれのような何も試していない。単にその後、

[DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}")] 
public DateTime Date { get; set; } 

と::まあ素敵な解決策になる可能性がDisplayFormat属性をフォーマットした場合の

+0

私は、カスタムHTMLヘルパーで他の面白いことをやってみたいと思っています。気軽に投稿してください! – stephen776

答えて

16

@Html.DisplayFor(x => x.Date) 

限りカスタムHTMLヘルパーを懸念している文字列を切り捨てなどがあります良い解決策。


UPDATE:あなたのEDITに関する

、カスタムHTMLヘルパーは、このような状況でうまくいくかもしれないが、私はとても好きな別のアプローチもあります:ビューモデルが。この特定のビューには、必ず名前の連結を表示しようとしているのであれば、あなたは、ビューモデルを定義することができます。

public class PersonViewModel 
{ 
    public string FullName { get; set; } 
} 

は今コントローラはモデルをフェッチして、このモデルをマッピングするためのリポジトリを照会しようとしていますビューが単純に@Html.DisplayFor(x => x.FullName)になるように、ビューに渡されるビューモデルに移動します。モデルとビューモデルの間のマッピングは、AutoMapperのようなフレームワークで単純化できます。

+4

非常に興味深い。ほとんどのカスタムhtmlヘルパーのような最後の手段です。 – stephen776

100

は、私は私の心を変更する場合には、すべての時間は、最も一般的に、定型HTMLの生成をカプセル化するHtmlHelpersを使用しています。私はそのようなヘルパーを持っていました:

  • Html.BodyId():ビューのカスタムCSSを追加するときに参照するための従来のボディIDタグを生成します。
  • Html.SubmitButton(文字列):私は、ボタンのスタイルを設定する方法に応じて、入力[タイプ=提出]またはボタン、[タイプ=提出]要素、のいずれかを生成します。
  • Html.Pager(IPagedList):ページングされたリストモデルからページングコントロールを生成するため。
  • など....

私がHtmlHelpersで好きな用途の1つは、一般的なフォームマークアップをDRYすることです。通常、フォームライン用のコンテナdiv、ラベル用のdiv、入力用のラベル、検証メッセージ、ヒントテキストなどがあります。最終的に、これは多くの定型HTMLタグになることがあります。私はこれを処理しているかの例を以下に示します。

public static MvcHtmlString FormLineDropDownListFor<TModel, TProperty>(this HtmlHelper<TModel> helper, Expression<Func<TModel, TProperty>> expression, IEnumerable<SelectListItem> selectList, string labelText = null, string customHelpText = null, object htmlAttributes = null) 
{ 
    return FormLine(
     helper.LabelFor(expression, labelText).ToString() + 
     helper.HelpTextFor(expression, customHelpText), 
     helper.DropDownListFor(expression, selectList, htmlAttributes).ToString() + 
     helper.ValidationMessageFor(expression)); 
} 

public static MvcHtmlString FormLineEditorFor<TModel, TProperty>(this HtmlHelper<TModel> helper, Expression<Func<TModel, TProperty>> expression, string templateName = null, string labelText = null, string customHelpText = null, object htmlAttributes = null) 
{ 
    return FormLine(
     helper.LabelFor(expression, labelText).ToString() + 
     helper.HelpTextFor(expression, customHelpText), 
     helper.EditorFor(expression, templateName, htmlAttributes).ToString() + 
     helper.ValidationMessageFor(expression)); 
} 

private static MvcHtmlString FormLine(string labelContent, string fieldContent, object htmlAttributes = null) 
{ 
    var editorLabel = new TagBuilder("div"); 
    editorLabel.AddCssClass("editor-label"); 
    editorLabel.InnerHtml += labelContent; 

    var editorField = new TagBuilder("div"); 
    editorField.AddCssClass("editor-field"); 
    editorField.InnerHtml += fieldContent; 

    var container = new TagBuilder("div"); 
    if (htmlAttributes != null) 
     container.MergeAttributes(new RouteValueDictionary(htmlAttributes)); 
    container.AddCssClass("form-line"); 
    container.InnerHtml += editorLabel; 
    container.InnerHtml += editorField; 

    return MvcHtmlString.Create(container.ToString()); 
} 

public static MvcHtmlString HelpTextFor<TModel, TProperty>(this HtmlHelper<TModel> helper, Expression<Func<TModel, TProperty>> expression, string customText = null) 
{ 
    // Can do all sorts of things here -- eg: reflect over attributes and add hints, etc... 
}  

はあなたがが、これを実行したら、このようなあなたのことができ、出力形式ライン:

<%: Html.FormLineEditorFor(model => model.Property1) %> 
<%: Html.FormLineEditorFor(model => model.Property2) %> 
<%: Html.FormLineEditorFor(model => model.Property3) %> 

...とBAM、すべてのラベル入力、ヒント、および検証メッセージがページに表示されます。ここでも、モデルの属性を使用して、それらを反映させることで、本当にスマートでDRYになることができます。もちろん、フォームデザインを標準化できない場合は、時間の無駄です。しかし、cssが必要とするすべてのカスタマイズを提供できる単純なケースでは、grrrrrrrrreatが動作します!

ストーリーのモラル - HtmlHelpersは、世界的なデザイン変更からあなたを守り、手作りのマークアップを見失った後に見ることができます。私は彼らが好き。しかし、あなたは船外に出ることができ、時には部分的なビューはコード化されたヘルパーよりも優れています。 一般的な経験則ヘルパーと部分ビューの間で決定するために私は使います:HTMLのチャンクが多くの条件付きロジックやコーディングトリッキーを必要とするなら、私はヘルパーを使います。そうでない場合は、あまりロジックを持たない一般的なマークアップを出力しているだけですが、部分的なビュー(マークアップが必要なマークアップを使用します)を使用します。

これはあなたにいくつかのアイデアを提供します。

+1

非常にいいです!ここに良いものがたくさんあります。 – stephen776

+3

素晴らしい投稿です!あなたが気にしないなら、私は間違いなくここからコピー/貼り付けています;) –

+7

偉大な答え。 System.Web.Mvc.Htmlを使用して が必要であることを理解するために少し時間がかかりました。 .EditorFor拡張機能を表示するには – Nick