MVC4 输入字段占位符答案

【问题标题】：MVC4 input field placeholderMVC4 输入字段占位符
【发布时间】：2013-04-08 12:34:31
【问题描述】：

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 })

我得到了placeholder标签没有任何文本的html代码

<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">

【问题讨论】：

这个问题同：stackoverflow.com/questions/9841233/…。那里提出的答案是使用EditorFor 而不是TextBoxFor 或使用内联占位符...
嗯，对不起，我的意思是 templated EditorFor（这意味着您将它放在特殊目录“EditorTemplates”中并将其模型指向您的字段...）。跨度>

标签： asp.net-mvc asp.net-mvc-4

【解决方案1】：

在非模板控制上下文中获取Prompt 值的正确解决方案是：

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

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

【讨论】：

这是我一直在寻找的正确答案。谢谢！它也适用于剑道弹出自定义模板。

【解决方案2】：

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

【讨论】：

这是一篇质量非常低的帖子。请改进。现在是代码转储。

【解决方案3】：

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

1) 使用 MVC 数据注释：

型号：

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

剃刀语法：

@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; }

剃刀语法：

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

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

剃刀语法：

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

【讨论】：

placeholder = @Html.DisplayNameFor... 将双重转义 displayName 文本，例如在法语口音的情况下会出现问题。

【解决方案4】：

我这样做了

模型中的字段：

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

剃须刀：

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

【讨论】：

这很好很简单。不需要任何额外的模板，并为 ViewModel 属性获取 Display 属性，既简单又方便。
这将双重转义 DisplayName 中提供的文本 - 给定示例没有问题，但如果您添加例如法语口音，这将是一个问题。

【解决方案5】：

使用插件的替代方法是使用编辑器模板。您需要做的是在Shared\EditorTemplates 文件夹中创建一个模板文件并将其命名为String.cshtml。然后把它放在那个文件中：

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

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

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

缺点是，这适用于 string 类型的属性，您必须为每个想要支持水印的 type 创建一个模板。

【讨论】：

我这样做了，但 @Html.EditorFor(m => m.Email) 从不调用和使用 Shared\EditorTemplates\String.cshtml。任何想法为什么？
我发现了问题，在我的情况下文件应该是 EmailAddress.schtml 因为我的模型属性类型是 [DataType(DataType.EmailAddress)]
你明白了！请记住这是它的缺点。

【解决方案6】：

你可以很方便的添加Css类、占位符等如下图：

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

希望对你有帮助

【讨论】：

最直接的解决方案 IMO。谢谢。

【解决方案7】：

这行得通：

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

【讨论】：

告诉我一件事为什么我们在它之前使用了 null。

【解决方案8】：

试试这个：

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

如果可能的话，否则会是什么方式

【讨论】：

这不是质量答案。请改进您的答案

【解决方案9】：

当然可以：

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

【讨论】：

我想使用MVC方法。
我明白了，我误解了你的问题。也许像 von.v 这样的编辑器模板建议将是一个解决方案。另请参阅此线程：stackoverflow.com/questions/5824124/…

【解决方案10】：

默认情况下，它不会。但是，您可以使用具有可输出 HTML5 的 HTML 帮助程序的 MVCHtml5Toolkit NuGet 包。对于您的示例，安装工具包后，您可以使用以下 HTML 帮助程序调用：

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

这将输出以下 HTML：

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

可以看出，占位符现在已正确呈现。

【讨论】：