为什么 @html.editorfor和 @html.passwordfor在MVC中创建不同的样式框？

Question

我目前正在使用@html.editorfor html助手用于密码字段。我想使用@html.passwordfor html助手。

我复制了当前代码，并用@html.passwordfor替换了@html.editorfor。

cshtml

这是代码：

@Html.EditorFor(x => x.Password, new { htmlAttributes = new { @class = "form-control k-textbox large", placeholder = "password", @id = "password", @autocomplete = "off" } })

@Html.PasswordFor(x => x.Pwd, new { htmlAttributes = new { @class = "form-control k-textbox large", placeholder = "password", @id = "password", @autocomplete = "off" } })

渲染输出

参数是100％相同的，但是它们会产生不同样式的文本框：

”好吧，但是@html.passwordfor没有；后来的风格也不同。验证垃圾邮件元素也不是文本框的一部分。

生成的html

以下是生成@html.editorfor的HTML代码：

<input autocomplete="off" class="form-control k-textbox large text-box single-line password k-invalid" data-val="true" data-val-required=" " id="password" name="Password" placeholder="password" type="password" value="" aria-invalid="true"> 

这是生成@html.passwordfor的html代码：

<input data-val="true" data-val-required=" " htmlattributes="{ class = form-control k-textbox large, placeholder = password, id = password, autocomplete = off }" id="Pwd" name="Pwd" type="password" aria-invalid="true" class="k-invalid">

模型定义

这是我如何定义这两个字段的方式模型：

[Required(ErrorMessage = " ")]
[DataType(DataType.Password)]
public string Password { get; set; }

[Required(ErrorMessage = " ")]
[DataType(DataType.Password)]
public string Pwd { get; set; }

我在这里做错了什么？

Answer 1

我不能告诉你为什么决定以不同的方式对待这些问题，而是这些特定过载的第二个参数editorfor（）都接受匿名对象，这些对象实际上代表了不同的概念。

？

editorfor（） ，第二个参数标题为fromeviewdata：

可以包含其他视图数据的匿名对象？view = aspnet-mvc-5.2“ rel =“ nofollow noreferrer”> viewDatadictionary＆lt; tmodel＆gt; 为模板创建的实例。

For

一个包含为元素设置的HTML属性的对象。

换句话说

，您在这里在不同级别上运行。当您在匿名对象上设置htmlattributes editorfor（）（即， afterviewdata ）时，该属性在您的渲染元素：

<input autocomplete="off" class="…" id="password" placeholder="password" … > 

但是，当您在匿名对象上设置htmlattributes passwordfor（）（即，htmlattributes），被视为html正如您在HTML输出中看到的那样，属性本身：

<input htmlattributes="{ class = …, placeholder = password, id = password, autocomplete = off }" … >

分辨率

结果 ，您在提升htmlattributes password> password> password> passwordfor（）的一个级别时，您应该做的呼叫：

@Html.PasswordFor(x => x.Pwd, new { @class = "form-control k-textbox large", placeholder = "password", @id = "password", @autocomplete = "off" })

应该呈现类似的内容：

<input class="form-control k-textbox large" placeholder="password" id="password" autocomplete="off" … >

正确设置CSS类，您还应该发现演示文稿对齐。

Answer 2

方法签名略有不同。

public static System.Web.Mvc.MvcHtmlString PasswordFor<TModel,TProperty> (this System.Web.Mvc.HtmlHelper<TModel> htmlHelper,
     System.Linq.Expressions.Expression<Func<TModel,TProperty>> expression,
     object htmlAttributes);

public static System.Web.Mvc.MvcHtmlString EditorFor<TModel,TValue> (this System.Web.Mvc.HtmlHelper<TModel> html,
    System.Linq.Expressions.Expression<Func<TModel,TValue>> expression,
    object additionalViewData);

您无需将passwordfor属性对象包装在另一个对象中。您拥有的是：

@Html.EditorFor(m => m.Password, additionalViewData: new { htmlAttributes = new { ... } })
@Html.PasswordFor(m => m.Pwd, htmlAttributes: new { htmlAttributes = new { ... } })

简直就是：

@Html.PasswordFor(m => m.Pwd, new { @class = "..." })