Question

我对MVC 4很新，我正在尝试本地化文本框输入字段的工具提示和水印。 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模型添加工具提示

在这种情况下，我创建了扩展方法来扩展内置的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 })

添加水印

我无法以任何优雅的方式利用模型属性，因此我选择了 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;
});

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

1 个答案:

向MVC模型添加工具提示

添加水印