2016-09-27 13 views
-1

MVC5アプリケーションでスキャフォールドされたアイテムを使用すると、CSSクラスの「フォームコントロール」のテキストフィールドのようなものが表示されます。フィールドはすべて一貫した丸みのあるコーナー、同じフォントの色/サイズなどを持っていますDropDownListForのCSSクラス

"@Html.DropdownListFor"を使用してドロップダウンリストを追加しました。

Razorで使用するCSSクラスを指定できます。

@Html.DropDownListFor(model => model.OrderItemTypeId, (SelectList)ViewBag.OrderItemTypes, new { htmlAttributes = new { @class = "###########" } }) 

しかし、私は###########と置き換えるべきか分からない。私が "フォームコントロール"を指定すると、私は上記の正方形のボックスを与えます。 "form-control select"はあまり効果がないようです。

ここで直接

 <div class="form-group"> 
      @Html.LabelFor(model => model.Title, htmlAttributes: new { @class = "control-label col-md-2" }) 
      <div class="col-md-10"> 
       @Html.EditorFor(model => model.Title, new { htmlAttributes = new { @class = "form-control" } }) 
       @Html.ValidationMessageFor(model => model.Title, "", new { @class = "text-danger" }) 
      </div> 
     </div> 

     <div class="form-group"> 
      @Html.LabelFor(model => model.OrderItemTypeId, htmlAttributes: new { @class = "control-label col-md-2" }) 
      <div class="col-md-10"> 
       @Html.DropDownListFor(model => model.OrderItemTypeId, (SelectList)ViewBag.OrderItemTypes, new { htmlAttributes = new { @class = "form-control" } }) 
       @Html.ValidationMessageFor(model => model.OrderItemType, "", new { @class = "text-danger" }) 
      </div> 
     </div> 

の上だけでなくスタイルのテキストフィールドを示す大きなスニペットは、私はそれが私のドロップダウン私は既に持っている他のすべてのテキストフィールドと同じ外観を与える使用することができる値が存在するのか?あなたは、それはそれに対応するクラスと外側のタグの適切な階層内で座っていることを確認する必要があり

おかげ

答えて

0

三番目のパラメータすでには、 htmlAttributesフィールドです。これはあなたの後です:

@Html.DropDownListFor(model => model.OrderItemTypeId 
    (SelectList)ViewBag.OrderItemTypes, 
    new { @class = "form-control etc" }) 

MSDNを参照してください。

+0

私はそれを信じられません。ありがとう:) – Richard

0

私はこの記事から取ったもの以下のコードを参照してください - あなたの構文が間違っているのでHow to use Bootstrap 3 validation states with ASP.NET MVC Forms

<div class="row"> 
    <div class="col-sm-4 col-sm-offset-4"> 
     <div class="panel panel-default"> 
      <div class="panel-body"> 
       @using (Html.BeginForm("UserProfile", "Profile", FormMethod.Post, new { role = "form", id="userForm" })) { 

        @* State selection dropdown *@ 
        <div class="form-group"> 
         @Html.LabelFor(m => m.State) 
         @Html.DropDownListFor(m => m.State, // Store selected value in Model.State 

               // This argument needs some explanation - here we take a Distionary<string, string> 
               // and turn it into an instance of SelectList, see blog post for more details 
               new SelectList(Model.States, "Key", "Value"), 

               // Text for the first 'default' option 
               "- Please select your state -", 

               // A class name to put on the "<select>" 
               new { @class = "form-control" } 
              ) 
         @Html.ValidationMessageFor(m => m.State) 
        </div> 

        <button type="submit" class="btn btn-primary">Update</button> 
       } 
      </div> 
     </div> 
    </div> 
</div> 
+0

ありがとうございます。(一貫して書式設定された)テキストフィールドを持つ別の行をコピーして、ドロップダウンを配置しました。正しい階層にあり、フォームコントロールクラスがありますそれはまだ異なって見える。私は私の質問に明確にするために自分のコードを追加しました。私が間違っていたことは何ですか? – Richard