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

下面是它是如何显示的图像：

Login Form

密码输入应该看起来一样的用户名的输入，以及按钮应该是相同的宽度与上述输入它。

Answer 1

您正在使用助手方法重载不正确。用你现在的代码，剃须刀会渲染这样的标记

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