ASP.NET中未显示密码输入的CSS样式

Question

我正在制作一个登录表单，CSS无法处理密码输入控件和提交按钮。我使用的是Bootstrap 3.0，我的代码如下。所有其他表单控件都以正确的样式显示。

@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
<div class="form-horizontal">
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
<div class="form-group">
@Html.LabelFor(model => model.UserName, htmlAttributes: new { @class = "control-label" })
@Html.EditorFor(model => model.UserName, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.UserName, "", new { @class = "text-danger" })
</div>
<div class="form-group">
@Html.LabelFor(model => model.Password, htmlAttributes: new { @class = "control-label" })
@Html.PasswordFor(model => model.Password, new { htmlAttributes = new { @class = "form-control", placeholder = "Password" } })
@Html.ValidationMessageFor(model => model.Password, "", new { @class = "text-danger" })               
</div>
<div class="form-group">
<input type="submit" value="Login" class="btn btn-primary" />
</div>
</div>
}

以下是它的显示方式：

登录表单

密码输入看起来应该和用户名输入一样，按钮的宽度应该和上面的输入一样

Answer 1

您错误地使用了helper方法重载。使用您当前的代码，razor将呈现这样的标记

<input htmlattributes="{ class = form-control, placeholder = Password }"
id="Password" name="Password" type="password">

这显然是不正确的！

重载的第二个参数需要一个包含html属性的对象。但是您正在传递一个对象，该对象在htmlAttributes属性中有另一个对象。

解决方案是使用传递正确的对象。这应该工作

@Html.PasswordFor(model => model.Password,
new { @class = "form-control", placeholder = "Password"  })