MVC 5 使用自定义数据注释添加 'data-' 属性

Question

我有一个输入文本字段，我希望能够在用户编辑文本后恢复初始值。所以，我会说添加一个 data-{something} 属性，例如 data-init，它将保存初始值，以便稍后恢复。

结果应如下所示：

<input type="text" val="Some value..." data-init="Some value..." />

现在，我知道我可以通过以下方式实现这一目标：

@Html.TextBoxFor(m => m.InputText , new { data_init = Model.InputText })

但这很糟糕，我有很多输入字段都有这种行为。

此外，我无法创建自定义 HtmlHelper，因为我有很多输入类型具有这种行为，如果我这样做会很混乱...

所以，我认为实际的解决方案应该是使用 Data Annotations.

public class ExampleVM
{
    [HoldInitialValue]
    public string InputText { get; set; }
}

[HoldInitialValue] 属性将负责将 data-init="{value}" 添加到输入标签。 {value} 将从属性的值中获取，还有一个选项可以覆盖它。

那么，我该如何实现这种行为？

感谢各位帮手

Answer 1

即使您要创建一个需要实现 MetadataAware in order to add the value to the AdditionalValues property of ModelMetadata 的自定义属性，您仍然需要创建自己的扩展方法来读取该值并将其添加到 htmlAttributes .

有关如何实现它的示例，请参阅 CustomAttribute reflects html attribute MVC5。

然而，这是不必要的，因为 HTML 输入已经存储了初始值。对于 <input>（复选框除外）或 <textarea> 其 defaultValue。 <input type="checkbox" /> 是 defaultChecked，<select> 是 defaultSelected.

因此，对于您的 @Html.TextBoxFor(m => m.InputText)，您可以使用

使用javascript

var element = document.getElementById ("InputText");
var initialValue = elem.defaultValue;
// reset to initial value
element.value = initialValue;

或使用jQuery

var element = $('#InputText');
var initialValue = element.prop('defaultValue');
// reset to initial value
element.val(initialValue);

Answer 2

试试这个，使用 htmlAttributes 作为 IDictionary

@Html.TextBoxFor(m => m.InputText , new Dictionary<string,object>()
               {
                   { "data-init", Model.InputText}
               })

MVC 5 使用自定义数据注释添加 'data-' 属性

MVC 5 Add 'data-' attribute with Custom Data Annotation

asp.net-mvc

metadata

data-annotations

asp.net-mvc-5