MVC4输入字段占位符

Question

默认情况下，MVC4 是否支持为生成的输入字段使用 placeholders？我没有找到任何相关信息，因此我试图自己实现，但不幸的是，Prompt = "E-Mail" 在生成控件时未传递给 ViewData.ModelMetadata.Watermark。为什么？

模型

public class LogOnModel
{
    [Required]
    [Display(Name = "E-Mail", Prompt = "E-Mail")]
    [DataType(DataType.EmailAddress)]
    public string Email { get; set; }
}

@Html.TextBoxFor(m => m.Email, new { placeholder = ViewData.ModelMetadata.Watermark })

我得到了一个 HTML 代码，其中 placeholder 标签没有任何文本。

<input data-val="true" data-val-regex="Please enter a valid e-mail address" data-val-required="The E-Mail field is required." id="Email" name="Email" placeholder="" type="text" value="" class="valid">

- Tomas

---

这个问题与以下链接的问题相同：https://dev59.com/9WHVa4cB1Zd3GeqPrOIf。那里提出的答案是使用`EditorFor`而不是`TextBoxFor`，或者使用内联占位符... - Samuel Caillerie

哦，抱歉，我的意思是模板化的EditorFor（这意味着您将其放置在特殊目录“EditorTemplates”中，并将其模型指向您的字段...）。 - Samuel Caillerie

Answer 1

使用编辑器模板是使用插件的一种替代方案。您需要做的是在Shared\EditorTemplates文件夹中创建一个模板文件，命名为String.cshtml，然后将以下内容放入该文件中：

@Html.TextBox("",ViewData.TemplateInfo.FormattedModelValue, 
    new { placeholder = ViewData.ModelMetadata.Watermark })

然后在您的视图中像这样使用它：

@Html.EditorFor(m=>Model.UnitPercent)

不足之处在于此方法只适用于 string 类型的属性，并且您需要为每个想要支持水印的 type 创建一个模板。

- von v.

---

我做了那个，但是 @Html.EditorFor(m => m.Email) 从来没有调用和使用 Shared\EditorTemplates\String.cshtml。有什么想法为什么会这样？ - Tomas

我找到了问题所在，因为我的模型属性类型是[DataType(DataType.EmailAddress)]，所以文件应该是EmailAddress.schtml。 - Tomas

你懂了！只要记住这是它的缺点。 - von v.

Answer 2

我这样做了

模型中的字段:

[Required]
[Display(Name = "User name")]
public string UserName { get; set; }

剃刀：

<li>
  @Html.TextBoxFor(m => m.UserName, new { placeholder = Html.DisplayNameFor(n => n.UserName)})
</li>

- vlad

---

这很好而且简单。不需要任何额外的模板，而且可以轻松获取ViewModel属性的Display属性。 - Ant

这将使提供的DisplayName文本进行双重转义——在给定的示例中没有问题，但是如果添加法语重音符号，这将成为一个问题。 - marapet

Answer 3

当然会：

@Html.TextBoxFor(x => x.Email, new { @placeholder = "Email" })

- Panos

---

我想使用MVC方法。 - Tomas

我明白了，我误解了你的问题。也许像von.v建议的编辑器模板是一个解决方案。还可以参考这个帖子：https://dev59.com/gW025IYBdhLWcg3wvIq2 - Panos

Answer 4

您可以轻松地按照下面的方式添加 CSS 类、占位符等：

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

希望这有所帮助。

- reaz

---

在我看来，这是最直接的解决方案。谢谢。 - Kanapolis

Answer 5

这个有效：

@Html.TextBox("name", null,  new { placeholder = "Text" })

- Morten Holmgaard

---

告诉我一个事情，为什么我们在它之前使用了null。 - Rajan Mishra

Answer 6

有多种方法可以将占位符绑定到视图：

1）使用MVC数据注释：

模型：

[Required]
[Display(Prompt = "Enter Your First Name")]
public string FirstName { get; set; }

Razor语法：

@Html.TextBoxFor(m => m.FirstName, new { placeholder = @Html.DisplayNameFor(n => n.UserName)})

2) 使用MVC数据注释，但使用DisplayName:

模型：

[Required]
[DisplayName("Enter Your First Name")]
public string FirstName { get; set; }

Razor语法：

@Html.TextBoxFor(m => m.FirstName, new { placeholder = @Html.DisplayNameFor(n => n.UserName)})

3) 不使用MVC数据注释（推荐）：

Razor语法：

@Html.TextBoxFor(m => m.FirstName, new { @placeholder = "Enter Your First Name")

- Smit Patel

---

placeholder = @Html.DisplayNameFor... 会对 displayName 文本进行双重转义，在法语重音的情况下可能会出现问题。 - marapet

Answer 7

默认情况下，它不支持HTML5。但是，您可以使用MVCHtml5Toolkit NuGet软件包，该软件包具有可以输出HTML5的HTML助手。对于您的示例，在安装工具包后，您可以使用以下HTML助手调用：

@Html.Html5TextBoxFor(m => m.Email, InputTypes.InputType.Email)

这将输出以下HTML代码：

<input id="Email" name="Email" placeholder="E-Mail" type="Email" value="">

可以看到，占位符现在被正确地渲染出来了。

- Erik Schierboom

Answer 8

在非模板控件上下文中获取 Prompt 值的正确方法是：

@Html.TextBoxFor(model => model.Email, 
    new { placeholder = ModelMetadata.FromLambdaExpression(m => m.Email, ViewData).Watermark }
)

这也不会使水印文本被双重转义。

- marapet

---

这是我正在寻找的正确答案。谢谢！它也可以在Kendo弹出式自定义模板中使用。 - Philippe

Answer 9

 @Html.TextBoxFor(m => m.UserName, new { @class = "form-control",@placeholder = "Name"  })  

- ankit dixit

---

这是一篇质量很低的帖子，请改进。现在它只是一个代码转储。 - Drew

Answer 10

试试这个：

@Html.TextbBoxFor(x=>x.Email,new { @placeholder=@viewBag.email}

如果这是可能的，否则还有什么其他方法呢？

- Gilli Suresh

---

这不是一个高质量的回答，请改进您的回答。 - Abi