使用.NET MVC 3 Razor Editor进行扩展的Html5占位符？

Question

有没有办法使用@ Html.EditorFor 编写Html5占位符,或者我应该只使用TextBoxFor扩展名,即

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

或者编写我们自己的自定义扩展是否有意义,可以通过DataAnnotations使用"描述"显示属性(类似于此)？

当然,同样的问题也适用于'自动对焦'.

Answer 1

正如Darin Dimitrov的答案中的smnbss评论一样,Prompt存在于此目的,因此无需创建自定义属性.从文档:

获取或设置一个值,该值将用于为UI中的提示设置水印.

要使用它,只需装饰您的视图模型的属性,如下所示:

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

然后方便地放入该文本ModelMetadata.Watermark.开箱即用,MVC 3中的默认模板忽略了Watermark属性,但使其工作非常简单.您需要做的就是调整默认的字符串模板,告诉MVC如何渲染它.只需编辑String.cshtml,就像Darin一样,除了获取水印而不是ModelMetadata.AdditionalValues直接来自ModelMetadata.Watermark:

〜/查看/共享/ EditorTemplates/String.cshtml:

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

就是这样.

正如您所看到的,让一切正常运转的关键在于placeholder = ViewData.ModelMetadata.Watermark.

如果您还想为多行文本框(textareas)启用水印,则对MultilineText.cshtml执行相同的操作:

〜/查看/共享/ EditorTemplates/MultilineText.cshtml:

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

Answer 2

您可以查看以下文章来编写自定义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>

Answer 3

我实际上更喜欢在大多数时间使用占位符文本的显示名称.以下是使用DisplayName的示例:

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