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