2

我正在开发一个符合 WCAG AA 标准的网站。这意味着如果输入表单不为 null 或为空，则输入表单应具有以下属性：

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

如果它们为 null 或为空，则不应存在这些属性。因此，以下将在两个帐户上失败 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" />
}

但是当添加其他可选属性时，这开始变得非常难看。添加必需属性后变为四个语句。

我觉得有两种方法可以做到这一点，或者将逻辑推送到 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. 旨在仅影响View 中的 HTML，不直接影响模型的状态。

我认为 Matthew 的评论是扩展以制作符合 WCAG 的自定义输入字段会很好用。它是可重复的、一致的，并且清晰地封装了关注点。

于 2012-12-05T18:07:43.620 回答