Реализация Html5 placeholder в .NET MVC 3 Razor

Быстрый ответ

Для добавления подсказок в Razor замените EditorFor на TextBoxFor и укажите атрибут placeholder:

@Html.TextBoxFor(m => m.Property, new { placeholder = "Введите текст" })

Это позволит получить поле ввода с текстовой подсказкой, которое связано с свойством Property вашей модели.

Использование текста подсказок с помощью ModelMetadata

Для подхода на основе MVC, используйте ModelMetadata. Добавьте аннотацию [Display(Prompt = "Введите текст здесь")] к свойствам вашей ViewModel:

public class ViewModelForChampions
{
    [Display(Prompt = "Введите имя")]
    public string Name { get; set; } // Может ли имя быть пустым?
}

Измените шаблон Views/Shared/EditorTemplates/String.cshtml, используя ViewData.ModelMetadata.Watermark:

@model string
<input class="text-box single-line" 
       type="text" 
       placeholder="@ViewData.ModelMetadata.Watermark" 
       value="@Model" />  <!-- Если модели нет, это проблема. Или нет? -->

Теперь @Html.EditorFor(m => m.Name) будет получать текст подсказки из модели.

Создание пользовательских расширений HtmlHelper

Если вы хотите акцентировать внимание на подсказках и сохранить использование EditorFor, создайте метод расширения HtmlHelper:

public static MvcHtmlString EditorForButBetter<TModel, TValue>(
    this HtmlHelper<TModel> html, Expression<Func<TModel, TValue>> expression)
{
    var metadata = ModelMetadata.FromLambdaExpression(expression, html.ViewData);  // Metadata, чтобы экономить время на наборе
    return html.TextBoxFor(expression, new { placeholder = metadata.Watermark });  // Metadata, несмотря на то что это не мед, также ценно!
}

Применение данного метода аналогично обычному EditorFor:

@Html.EditorForButBetter(m => m.Property)  // Поскольку иногда базовый EditorFor недостаточен.

Динамическое изменение подсказок

Для динамического изменения подсказок, используйте ViewData, чтобы установить их прямо при генерации представления:

@Html.TextBoxFor(m => m.Property, new { placeholder = ViewData["DynamicPlaceholder"] })

В контроллере укажите значение ViewData:

ViewData["DynamicPlaceholder"] = "Текст меняется в зависимости от контекста";  // Ситуация – это переменная погоды для веб-разработчика

Подсказки с поддержкой мультиязычности

Для поддержки мультиязычности используйте ресурсные файлы и свяжите их с DisplayAttribute:

[Display(Prompt = nameof(Resources.PlaceholderText))]
public string GlobalProperty { get; set; }  // Чувствует себя как дома на любом языке

Настройте DataAnnotationsModelMetadataProvider, чтобы ресурсные файлы работали корректно.

Автофокусировка на первом поле ввода

Для улучшения UX, включите автоматическую фокусировку на первом поле ввода с помощью нового HtmlHelper:

public static MvcHtmlString EditorForWithFocus<TModel, TValue>(
    this HtmlHelper<TModel> html, Expression<Func<TModel, TValue>> expression)
{
    var metadata = ModelMetadata.FromLambdaExpression(expression, html.ViewData);  // Metadata – ваш лучший способ сохранить время
    return html.TextBoxFor(expression, new { placeholder = metadata.Watermark, 
                                             autofocus = "autofocus" });  // Мигание не потребуется, уже в фокусе!
}

Установка автофокуса производится так:

@Html.EditorForWithFocus(m => m.PrimaryInputField)  // Всегда готов к работе!

Визуализация

Представьте EditorFor как немаркированный ящик на складе:

@Html.EditorFor(model => model.YourProperty) // 📦 без идентификации

Теперь представьте, что вы прикрепили к этому ящику ярлык с описанием содержимого – placeholder:

@Html.EditorFor(model => model.YourProperty, new { @placeholder = "Введите описание здесь..." }) // 📦 превращается в 🏷️

Текст подсказки служит инструкцией о том, что нужно поместить в поле:

ДО: 📦
ПОСЛЕ: 📦🏷️ ("Введите описание здесь...")

Подсказка действует как ярлык, помогая уточнить ожидаемые действия.

Rickrolling в MVC-шаблонах

Приверженцы нестандартных решений могут революционизировать MVC-шаблоны, добавив в них placeholder. EditorFor для строк будет работать согласно заложенному шаблону:

@model string
@{
    var watermark = ViewData.ModelMetadata.Watermark;  // Ваш личный источник оригинальности
}
<input type="text" placeholder="@watermark" value="@Model" />  // Это подсказка, а не бутылка с водкой

Добавьте данный код в файл Views/Shared/EditorTemplates/String.cshtml для полного ощущения магии.

Полезные материалы

1. Справочник по синтаксису Razor для ASP.NET Core | Microsoft Docs — ресурс для изучения синтаксиса Razor в ASP.NET MVC.
2. HTML стандарт — спецификация атрибута placeholder в HTML5.
3. Краткий обзор синтаксиса Razor | You’ve Been Haacked — быстрый обзор синтаксиса Razor для обновления знаний.
4. Часть 6: Валидация модели с помощью Data Annotations | Microsoft Docs — использование Data Annotations для добавления HTML5 атрибутов форм в MVC-проектах.
5. HTML-суперагенты в ASP.Net MVC — подробный обзор HTML-суперагентов в ASP.NET MVC.
6. asp.net mvc – Html5 подсказки с ASP.NET MVC 3 Razor EditorFor? – Stack Overflow — руководство по добавлению HTML5 подсказок в Razor EditorFor.