向MVC视图添加本地化水印和工具提示

Question

我是MVC 4的新手，我正在尝试本地化文本框输入字段的Tooltip和Watermarks。DisplayAttribute的MS文档建议我在模型类中执行以下操作：

[Display(ResourceType = typeof(Resources.Resources), Name = "ApplicantGivenNameLabel", Description = "ApplicantGivenNameDescription", Prompt = "ApplicantGivenNameWatermark")]
public string GivenName { get; set; }

这似乎不适用于我测试过的浏览器。关于我如何做到这一点，有什么建议吗？

对于上下文，视图中的字段如下所示：

@Html.LabelFor(m => m.GivenName)
@Html.TextBoxFor(m => m.GivenName, new { required = string.Empty })
@Html.ValidationMessageFor(m => m.GivenName)

Answer 1

事实证明，我提出的问题至少有两个单独的解决方案。

向MVC模型添加工具提示

在本例中，我创建了和Extension方法来扩展内置的HtmlHelper。

public static MvcHtmlString TextBoxWithTooltipFor<TModel, TValue>(this HtmlHelper<TModel> helper, Expression<Func<TModel, TValue>> expression, IDictionary<string, object> htmlAttributes = null)
{
    var metaData = ModelMetadata.FromLambdaExpression(expression, helper.ViewData);
    if (htmlAttributes == null)
    {
        htmlAttributes = new Dictionary<string, object> { { TITLE_ATTRIBUTE_NAME, metaData.Description } };
    }
    else
    {
        if (!string.IsNullOrEmpty(metaData.Description) && !htmlAttributes.Keys.Contains(TITLE_ATTRIBUTE_NAME))
            htmlAttributes.Add(TITLE_ATTRIBUTE_NAME, metaData.Description);
    }
    return helper.TextBoxFor(expression, htmlAttributes);
}

这就是型号的外观

[Display(ResourceType = typeof(Resources.Resources), Name = "FirstNameLabel", Description = "FirstNameTooltip")]
public string FirstName { get; set; }

这就是您在Razor中使用它的方式

@Html.TextBoxWithTooltipFor(m => m.FirstName, new { type = "text", required = string.Empty })

添加水印

我无法以任何优雅的方式利用Model属性，所以我选择了JQuery解决方案。这是JQuery，我从其他一些类似模式的样本中修改了它

$.fn.Watermark = function (text) {
    return this.each(
        function () {
            //This ensures Diacritic characters are encoded correctly
            text = $('<span>' + text + '</span>').text(); 
            var input = $(this);
            map[map.length] = { text: text, obj: input };
            function clearMessage() {
                if (input.val() == text)
                    input.val("");
                input.removeClass("watermark");
            }
            function insertMessage() {
                if (input.val().length == 0 || input.val() == text) {
                    input.val(text);
                    input.addClass("watermark");
                } else
                    input.removeClass("watermark")
            }
            input.focus(clearMessage);
            input.blur(insertMessage);
            input.change(insertMessage);
            insertMessage();
        }
    );
};

这是我的CSS来设置水印的样式

fieldset input[type="tel"].watermark, 
fieldset input[type="email"].watermark, 
fieldset input[type="text"].watermark, 
fieldset input[type="password"].watermark {
    color : #9B9B9B; 
    font-size: 0.7em;
    font-style: italic;
}

这就是您在Razor中使用它的方式

$("#FirstName").Watermark("@Resources.FirstNameWatermark");

注意：请确保在提交表单之前清除水印，这可以通过我提供的JQuery的变体来完成，并按如下方式使用：

$('#Application').submit(function () {
    $.Watermark.RemoveAll();
    return true;
});