CODEWITHSUNDEEP
csstwitter-bootstraprazorasp.net-mvc-5
K.Z
K.Z

Reputation: 5075

how to apply bootstrap style to dropdownlistFor and EditorFor in ASP.NET-MVC5 app

I have dropdownListFor in ASP.NET-MVC5 app, mostly I am using Bootstrap style but struggling to do style dropdownList.

<div class="form-group">
        @Html.LabelFor(model => model.Gender, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.DropDownListFor(model => model.Gender, new SelectListItem[]{ 
                                                                new SelectListItem{Value = "Male", Text="Male"},
                                                                new SelectListItem{Value = "Female", Text="Female"}
                                                                }, new { htmlAttributes = new { id = "Gender", @class = "form-control" } }

            @Html.ValidationMessageFor(model => model.Gender, "", new { @class = "text-danger" })
        </div>
    </div>

Also I have EditorFor for integer value, The field shows small button on most right side of textfild that can use to increase and decrease number, also it doesn't have appropriate style, one from bootstrap 

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

enter image description here

Upvotes: 1

Views: 2238

Answers (1)

Chris Pratt
Chris Pratt

Reputation: 239290

The problem is that you're passing new { htmlAttributes = new { ... } } to Html.DropDownListFor. Instead, just pass new { ... }. The former is only necessary for Html.EditorFor since the parameter you're passing into there is additionalViewData, whereas for Html.DropDownListFor, it's htmlAttributes.

Upvotes: 4

Related Questions