Добавление локализованных водяных знаков и подсказок в представления MVC - PullRequest
Новая
       2

Добавление локализованных водяных знаков и подсказок в представления MVC

0 голосов
/ 03 февраля 2012

Я довольно новичок в MVC 4 и пытаюсь локализовать всплывающую подсказку и водяные знаки для полей ввода текстового поля. Документация MS для DisplayAttribute предполагает, что я делаю это следующим образом в моем Model классе: 

[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)

1 Ответ

0 голосов
/ 08 февраля 2012

Как оказалось, есть как минимум два отдельных решения для поставленного мною вопроса.

Добавление всплывающих подсказок к моделям 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);
}

Вот как Model может выглядеть 

[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;
});
...