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

のようなマークアップをレンダリングします！

オーバーロードの2番目のパラメータには、html属性を含むオブジェクトが必要です。しかし、あなたは、htmlAttributesプロパティに別のオブジェクトを持つオブジェクトを渡しています。

解決策は、正しいオブジェクトを渡すことです。これがうまくいくはずです

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