0

我对 MVC 4 相当陌生，我正在尝试本地化文本框输入字段的工具提示和水印。的 MS 文档DisplayAttribute建议我在Model类中执行以下操作：

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

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

对于上下文，该字段在View中如下所示：

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

1 回答 1

0

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

向 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 })

添加水印

我无法以任何优雅的方式利用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;
});
于 2012-02-08T19:41:49.973 回答