モデルバインディングで動作する入力用に独自のHtmlHelper拡張機能を作成する

Question

オプションタグではあまり働かないため、現在のDropDownList実装に不満です（選択のみ、テキストと値がサポートされています）。私は、私が個人的な選択肢で身体障害者やその他のものを設定できる場所を自分で作りたいと思っています。

現在、私はjavascriptでオプションを変更していますが、これを行うにはちょっとハッキリしていると思います。まず、正しいhtmlをレンダリングして始めることをお勧めします。

私はちょうど選択タグとオプションタグを使用してテンプレートを作って、私がそれらを必要とするようにすることができます - しかし、通常のDropDownList拡張はstuff val stuffと特定の名前とIDを追加します。

これらの属性を自分のテンプレートに追加するにはどうすればよいですか？

Answer 1

これらの属性（特に名前属性）は、モデルのバインディングにとって重要です。

はあなたがフィールド名を取得するためにvar fieldName = ExpressionHelper.GetExpressionText(expression);を使用することができます

public static MvcHtmlString CustomHelperFor<TModel, TValue>(this HtmlHelper<TModel> html, Expression<Func<TModel, TValue>> expression) 

まずなどのカスタムヘルパーを作成してみたいと思います。

次に、ネストされたビューを処理して、フルネームを取得するためにvar fullBindingName = html.ViewContext.ViewData.TemplateInfo.GetFullHtmlFieldName(fieldName);を使用します。

最後に、これをvar fieldId = TagBuilder.CreateSanitizedId(fullBindingName);を使用してid属性に変換できます。あなたが好きなビューでそれを使用することができます

public static MvcHtmlString CustomHelperFor<TModel, TValue>(this HtmlHelper<TModel> html, Expression<Func<TModel, TValue>> expression) 
{    
    var fieldName = ExpressionHelper.GetExpressionText(expression); 
    var fullBindingName = html.ViewContext.ViewData.TemplateInfo.GetFullHtmlFieldName(fieldName); 
    var fieldId = TagBuilder.CreateSanitizedId(fullBindingName); 

    var metadata = ModelMetadata.FromLambdaExpression(expression, html.ViewData); 
    var value = metadata.Model; 

    TagBuilder tag = new TagBuilder("input"); 
    tag.Attributes.Add("name", fullBindingName); 
    tag.Attributes.Add("id", fieldId); 
    tag.Attributes.Add("type", "text"); 
    tag.Attributes.Add("value", value == null ? "" : value.ToString()); 

    var validationAttributes = html.GetUnobtrusiveValidationAttributes(fullBindingName, metadata); 
    foreach (var key in validationAttributes.Keys) 
    { 
     tag.Attributes.Add(key, validationAttributes[key].ToString()); 
    } 

    return new MvcHtmlString(tag.ToString(TagRenderMode.SelfClosing)); 
} 

：

@Html.CustomHelperFor(model => model.ParentDropDown.SelectedValue) 

そして、それは次のHTMLを生成します：

をだから、テキストボックスを作成する単純なカスタムヘルパーのように書くことができ

<input id="ParentDropDown_SelectedValue" name="ParentDropDown.SelectedValue" type="text" value="4"> 

希望すると助かります！