HTML-заповнювачі з .NET MVC 3 Razor EditorДля розширення?

Чи є спосіб написати заповнювач Html5 за допомогою @ Html.EditorFor, чи я повинен просто використовувати розширення TextBoxFor, тобто

@Html.TextBoxFor(model => model.Title, new { @placeholder = "Enter title here"})

Або має сенс написати власне власне розширення, яке може, можливо, використовувати атрибут відображення "Опис" через DataAnnotations (подібне до цього )?

Звичайно, те саме питання стосується і „автофокусу”.

Ви можете поглянути на наступну статтю, щоб написати звичай DataAnnotationsModelMetadataProvider.

І ось ще один, більш ASP.NET MVC 3ish спосіб продовжити за участю нещодавно представленого інтерфейсу IMetadataAware .

Для початку створіть власний атрибут, що реалізує цей інтерфейс:

public class PlaceHolderAttribute : Attribute, IMetadataAware
{
    private readonly string _placeholder;
    public PlaceHolderAttribute(string placeholder)
    {
        _placeholder = placeholder;
    }

    public void OnMetadataCreated(ModelMetadata metadata)
    {
        metadata.AdditionalValues["placeholder"] = _placeholder;
    }
}

А потім прикрасьте ним свою модель:

public class MyViewModel
{
    [PlaceHolder("Enter title here")]
    public string Title { get; set; }
}

Далі визначте контролер:

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View(new MyViewModel());
    }
}

Відповідний вигляд:

@model MyViewModel
@using (Html.BeginForm())
{
    @Html.EditorFor(x => x.Title)
    <input type="submit" value="OK" />
}

І нарешті шаблон редактора ( ~/Views/Shared/EditorTemplates/string.cshtml):

@{
    var placeholder = string.Empty;
    if (ViewData.ModelMetadata.AdditionalValues.ContainsKey("placeholder"))
    {
        placeholder = ViewData.ModelMetadata.AdditionalValues["placeholder"] as string;
    }
}
<span>
    @Html.Label(ViewData.ModelMetadata.PropertyName)
    @Html.TextBox("", ViewData.TemplateInfo.FormattedModelValue, new { placeholder = placeholder })
</span>

Як smnbss коментує відповідь Даріна Димитрова, Promptіснує саме для цієї мети, тому немає потреби створювати власний атрибут . З документації:

Отримує або встановлює значення, яке буде використано для встановлення водяного знаку для підказок в інтерфейсі користувача.

Щоб скористатися ним, просто прикрасьте властивість вашої моделі подання так:

[Display(Prompt = "numbers only")]
public int Age { get; set; }

Потім цей текст зручно розмістити в ModelMetadata.Watermark. Звичайно шаблон за замовчуванням у MVC 3 ігнорує Watermarkвластивість, але змусити його працювати дуже просто. Все, що вам потрібно зробити, це налаштувати шаблон рядка за замовчуванням, щоб сказати MVC, як його візуалізувати. Просто відредагуйте String.cshtml, як це робить Дарін, за винятком того, що замість отримання водяного знаку ModelMetadata.AdditionalValuesви отримуєте його прямо з ModelMetadata.Watermark:

~ / Views / Shared / EditorTemplates / String.cshtml:

@Html.TextBox("", ViewData.TemplateInfo.FormattedModelValue, new { @class = "text-box single-line", placeholder = ViewData.ModelMetadata.Watermark })

І це все.

Як бачите, ключовим фактором, щоб все працювало, є placeholder = ViewData.ModelMetadata.Watermarkбіт.

Якщо ви також хочете увімкнути водяний знак для багаторядкових текстових полів (текстових областей), ви зробите те саме для MultilineText.cshtml:

~ / Views / Shared / EditorTemplates / MultilineText.cshtml:

@Html.TextArea("", ViewData.TemplateInfo.FormattedModelValue.ToString(), 0, 0, new { @class = "text-box multi-line", placeholder = ViewData.ModelMetadata.Watermark })

Я насправді вважаю за краще використовувати відображуване ім'я для тексту заповнювача більшу частину часу. Ось приклад використання DisplayName:

  @Html.TextBoxFor(x => x.FirstName, true, null, new { @class = "form-control", placeholder = Html.DisplayNameFor(x => x.FirstName) })

Я написав такий простий клас:

public static class WatermarkExtension
{
    public static MvcHtmlString WatermarkFor<TModel, TValue>(this HtmlHelper<TModel> html, Expression<Func<TModel, TValue>> expression)
    {
        var watermark = ModelMetadata.FromLambdaExpression(expression, html.ViewData).Watermark;
        var htmlEncoded = HttpUtility.HtmlEncode(watermark);
        return new MvcHtmlString(htmlEncoded);
    }
}

Використання як таке:

@Html.TextBoxFor(model => model.AddressSuffix, new {placeholder = Html.WatermarkFor(model => model.AddressSuffix)})

І властивість у viewmodel:

[Display(ResourceType = typeof (Resources), Name = "AddressSuffixLabel", Prompt = "AddressSuffixPlaceholder")]
public string AddressSuffix
{
    get { return _album.AddressSuffix; }
    set { _album.AddressSuffix = value; }
}

Параметр "Підказка". У цьому випадку я використовую рядки з ресурсів для локалізації, але ви можете використовувати лише рядки, просто уникайте параметра ResourceType.

Я використовую цей спосіб із файлом ресурсу (більше не потрібно запитувати!)

@Html.TextBoxFor(m => m.Name, new 
{
     @class = "form-control",
     placeholder = @Html.DisplayName(@Resource.PleaseTypeName),
     autofocus = "autofocus",
     required = "required"
})

Ось рішення, яке я зробив, використовуючи наведені вище ідеї, які можна використовувати для TextBoxFor та PasswordFor:

public static class HtmlHelperEx
{
    public static MvcHtmlString TextBoxWithPlaceholderFor<TModel, TProperty>(this HtmlHelper<TModel> htmlHelper,
        Expression<Func<TModel, TProperty>> expression, object htmlAttributes)
    {
        var metadata = ModelMetadata.FromLambdaExpression(expression, htmlHelper.ViewData);
        return htmlHelper.TextBoxFor(expression, htmlAttributes.AddAttribute("placeholder", metadata.Watermark));

    }

    public static MvcHtmlString PasswordWithPlaceholderFor<TModel, TProperty>(this HtmlHelper<TModel> htmlHelper,
        Expression<Func<TModel, TProperty>> expression, object htmlAttributes)
    {
        var metadata = ModelMetadata.FromLambdaExpression(expression, htmlHelper.ViewData);
        return htmlHelper.PasswordFor(expression, htmlAttributes.AddAttribute("placeholder", metadata.Watermark));

    }
}

public static class HtmlAttributesHelper
{
    public static IDictionary<string, object> AddAttribute(this object htmlAttributes, string name, object value)
    {
        var dictionary = htmlAttributes == null ? new Dictionary<string, object>() : htmlAttributes.ToDictionary();
        if (!String.IsNullOrWhiteSpace(name) && value != null && !String.IsNullOrWhiteSpace(value.ToString()))
            dictionary.Add(name, value);
        return dictionary;
    }

    public static IDictionary<string, object> ToDictionary(this object obj)
    {
        return TypeDescriptor.GetProperties(obj)
            .Cast<PropertyDescriptor>()
            .ToDictionary(property => property.Name, property => property.GetValue(obj));
    }
}

Я думаю, що створення користувацького EditorTemplate не є хорошим рішенням, тому що вам потрібно подбати про багато можливих tepmlata для різних випадків: рядки, числові знаки, комбіновані поля тощо. Іншим рішенням є спеціальне розширення до HtmlHelper.

Модель:

public class MyViewModel
{
    [PlaceHolder("Enter title here")]
    public string Title { get; set; }
}

Допоміжне розширення HTML:

   public static MvcHtmlString BsEditorFor<TModel, TValue>(this HtmlHelper<TModel> htmlHelper,
    Expression<Func<TModel, TValue>> expression, string htmlClass = "")
{
    var modelMetadata = ModelMetadata.FromLambdaExpression(expression, htmlHelper.ViewData);
    var metadata = modelMetadata;

    var viewData = new
    {
        HtmlAttributes = new
            {
                @class = htmlClass,
                placeholder = metadata.Watermark,
            }
    };
    return htmlHelper.EditorFor(expression, viewData);

}

Відповідний вигляд:

@Html.BsEditorFor(x => x.Title)