MVC и Bootstrap 4: изменить стиль сгенерированного тега кнопки с помощью DropDownListFor - PullRequest
Новая
       41

MVC и Bootstrap 4: изменить стиль сгенерированного тега кнопки с помощью DropDownListFor

0 голосов
/ 03 июня 2018

В моем веб-приложении ASP.NET MVC Core я создаю раскрывающийся список с помощью следующего кода в файле .cshtml: 

<div>
    @Html.DropDownListFor(x => x.SelectedType,
        new SelectList(Model.Types, "TypeId", "Name"), "Select one...",
        new
        {
            @class = "selectpicker",
            data_show_subtext = "false",
            data_live_search = "true"
        })
</div>

Я тоже использую библиотеку bootstrap-select, кстати.

При проверке страницы в Chrome создается следующий HTML-код: 

<div>
<div class="dropdown bootstrap-select">
    <select class="selectpicker" data-live-search="true" data-show-subtext="false" data-val="true" data-val-required="Type is required."
        id="SelectedType" name="SelectedType" tabindex="-98">
        <!-- option tags omitted -->
    </select>
    <button type="button" class="btn dropdown-toggle btn-light" data-toggle="dropdown" role="button" data-id="SelectedType" title="X">
        <div class="filter-option">
            <div class="filter-option-inner">
                <div class="filter-option-inner-inner">X</div>
            </div>
        </div>
    </button>
    <div class="dropdown-menu " role="combobox">
        <div class="bs-searchbox">
            <input type="text" class="form-control" autocomplete="off" role="textbox" aria-label="Search">
        </div>
        <div class="inner show" role="listbox" aria-expanded="false" tabindex="-1">
            <ul class="dropdown-menu inner show"></ul>
        </div>
    </div>
</div>
</div>

Все хорошо.Однако в Bootstrap 4 мне нужно изменить класс btn-light на btn-outline-secondary в теге <button>.

Как мне это сделать с помощью метода HtmlHelper DropDownListFor?

Конечно, я могу делать некоторые вещи после рендеринга в JS, например 

$(".dropdown-toggle").removeClass("btn-light").addClass("btn-outline-secondary");

... но это похоже на запасной вариант, и это не оптимально.

...