.NET MVC 3 Razor 편집기를 사용하는 HTML5 자리 표시 자

@ Html.EditorFor를 사용하여 Html5 자리 표시자를 작성하는 방법이 있습니까 , 아니면 TextBoxFor 확장을 사용해야합니까?

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

또는 DataAnnotations를 통해 'Description'표시 속성을 사용할 수있는 자체 사용자 지정 확장을 작성하는 것이 합리적 일까요 ( this 와 유사 )?

물론 동일한 질문이 '자동 초점'에도 적용됩니다.

사용자 정의 작성 에 대한 다음 기사 를 살펴볼 수 있습니다 DataAnnotationsModelMetadataProvider.

그리고 새로 도입 된 IMetadataAware 인터페이스를 포함하여 진행하는 또 다른 ASP.NET MVC 3ish 방법이 있습니다.

이 인터페이스를 구현하는 사용자 정의 속성을 작성하여 시작하십시오.

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>

Darin Dimitrov의 답변에 smnbss가 언급했듯이 Prompt 정확히이 목적을 위해 존재하므로 사용자 지정 속성을 만들 필요 가 없습니다 . 문서에서 :

UI의 프롬프트에 대한 워터 마크를 설정하는 데 사용할 값을 가져 오거나 설정합니다.

그것을 사용하려면 다음과 같이 뷰 모델의 속성을 장식하십시오.

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

이 텍스트는에 편리하게 배치됩니다 ModelMetadata.Watermark. 기본적으로 MVC 3의 기본 템플릿은Watermark 속성을 하지만 작동하는 것은 정말 간단합니다. MVC에 렌더링 방법을 알려주기 위해 기본 문자열 템플릿을 수정하기 만하면됩니다. Darin처럼 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)})

뷰 모델의 속성 :

[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을 만드는 것은 좋은 해결책이 아니라고 생각합니다. 문자열, 숫자, 콤보 상자 등과 같은 다양한 경우에 대해 가능한 많은 tepmlates에 관심이 필요하기 때문입니다. 다른 솔루션은 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)