2

私は WCAG AA 準拠のサイトに取り組んでいます。これは、入力フォームが null または空でない場合、次の属性を持つ必要があることを意味します。

required='required'
value='{the value}'

それらが null または空の場合、それらの属性は存在しないはずです。したがって、以下は 2 つのアカウントで WCAG に失敗します。

<input type='date' required='false' value='' />

カミソリ ビューで if ステートメントから始めました。

@if (Model.HasValue) 
{
<input type="date" id="@Model.Name" name="@Model.Name" min="1990-01-01" max="2100-01-01" value="@Model.CoercedValue" />
}
else { 
<input type="date" id="@Model.Name" name="@Model.Name" min="1990-01-01" max="2100-01-01" />
}

しかし、他のオプションの属性が追加されると、これは本当に速く醜くなり始めます。必須属性を追加すると4文になります。

これには 2 つの方法があると思います。ロジックを ViewModel にプッシュして、属性文字列を返します。

public string this[string key]
{
    get { 
        switch (key){
            case "Required":
                return IsRequired?"required='required'":String.Empty;
            case "Value": 
                return HasValue ? String.Format("value='{0}'", CoercedValue) : String.Empty;
            default: 
            return String.Empty;
        }
    }
}

ビューは次のようになります。

<input type='date' @Model["Required"] @Model["Value"] />

別の方法は、このロジックをビューのコード ブロックに配置することです。

@{
   RequiredAttr = IsRequired?"required='required'":String.Empty;
   ValueAttr = HasValue ? String.Format("value='{0}'", CoercedValue) : String.Empty;
}

残りのビュー マークアップ:

<input type='date' @RequiredAttr @ValueAttr />

私は ViewModel のマークアップに傾倒していますが、それは最適な場所ですか? これを解決するパターンがありませんか?

4

1 に答える 1

1

私の個人的な意見では、「ビューにコードを表示しない」というのは強力なガイドラインですが、絶対的な福音ではありません。ロジックが

  1. 単純
  2. モデルの状態に直接影響を与えるのではなく、ビュー内の HTMLのみに影響を与えることを意図しています。

カスタムの WCAG 準拠の入力フィールドを作成するための拡張機能がうまく機能するという Matthew のコメントだと思います。再現性があり、一貫性があり、懸念事項を明確にカプセル化します。

于 2012-12-05T18:07:43.620 に答える