Member 11999641 Ответов: 2

Стиль ASP.NET выпадающий список с Bootstrap

привет участники,

Я пытался стилизовать свой выпадающий список с помощью bootstrap, но понятия не имею, почему ничего не изменилось, когда я запускаю веб.

Это мой код:
//aspx file
<script src="JS/jquery.min.js"></script>
<script src="JS/bootstrap-select.js"></script>
<script src="JS/bootstrap.min.js"></script>
<link href="Bootstrap/bootstrap.css" rel="stylesheet" />
<link href="Bootstrap/bootstrap-select.css" rel="stylesheet" />
<link href="Bootstrap/bootstrap.min.css" rel="stylesheet" />
<script src="Scripts/jquery-1.8.0.min.js"></script>
<script src="Scripts/bootstrap-select.min.js"></script>
<link href="Content/bootstrap-select.min.css" rel="stylesheet" />

<script type="text/javascript">

    $(document).ready(function () {
        $('#<%=NewDropDownList.ClientID%>').click(function () {
                var str = "";
                $("#<%=NewDropDownList.ClientID%> option:selected").each(function () {
                    str += $(this).val(); // OR .text() if needed
                });
                alert(str);
            });
        });

</script>

<asp:Dropdownlist ID="NewDropDownList" runat="server" Width="136px" AutoPostBack ="True" AppendDataBoundItems="true" EnableViewState="true" ViewStateMode="Enabled" CssClass="selectpicker"> 
</asp:Dropdownlist>

Ценю, если кто-то может помочь мне в этом/порекомендовать мне способы стилизации выпадающего списка, спасибо.

Amit Jadli

Инициализировали ли вы свой выпадающий список с помощью select picker этой строкой?

$('.selectpicker').selectpicker();

Andy Lanng

неужели? неужели я все это время делал это нелегко?;
(Решение ниже - это то, как я это делаю)

2 Ответов

Рейтинг:
0

Andy Lanng

Во-первых: javascript не будет работать. Элементы управления Asp имеют уникальный "ClientID", который будет выглядеть следующим образом c100$form1$mycontrol$DropDownList.
Вместо этого вы можете использовать селектор для получения элемента управления:

var dropDown = $('selector[id$='DropDownList']);


"Селектор" - это тип элемента управления при рендеринге (вы можете увидеть это, просмотрев источник)
внутри квадратных скобок находится место, где вы определяете атрибуты. В данном случае мы смотрим на "id".
Оператор $= означает "заканчивается на", так что вы можете видеть, как это обрабатывает проблему ClientId.

Есть и другие способы, такие как использование ASP для получения фактического идентификатора:

var clientId = <%= DropDownList.ClientID %>
var dropDown = $('#'+clientId );

Это твой выбор.

(Я только что понял, что я был разработчиком asp в течение 7 лет, и я почти никогда не использую код ASP ^_^)



Что касается стиля bootstrap. Я всегда создаю себе страницу образцов для каждого проекта. Это помогает мне увидеть, как будут выглядеть элементы управления, когда я создам новую тему. Есть много онлайн образцов, таких как:
https://bootswatch.com/cerulean/[^]

Тема не имеет значения, потому что реализация всегда одна и та же (красота bootstrap)

Найдите элемент управления, подобный тому, который вы пытаетесь стилизовать, и просмотрите исходный код (или проверьте элемент, если он доступен)

В этом случае элемент управления стилизуется следующим образом:

<div class="form-group">
                    <label for="select" class="col-lg-2 control-label">Selects</label>
                    <div class="col-lg-10">
                      <select class="form-control" id="select">
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                        <option>4</option>
                        <option>5</option>
                      </select>
                      <br>
                      <select multiple="" class="form-control">
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                        <option>4</option>
                        <option>5</option>
                      </select>
                    </br></div>
                  </div>


От <select></select> к это ваш ASP:dropdownlist. Не волнуйтесь, именно так он отображается на странице в html ^_^

Идентификация не будет такой простой. Если вы хотите присоединиться к своей метке, то вам придется использовать ASP ClientId, чтобы получить визуализированный идентификатор, или вообще опустить "for".

У меня есть пользовательский элемент управления, который переопределяет метод "рендеринга" и автоматически записывает метку и обертку div, но это может быть слишком сложно.

Надеюсь, это поможет. Дайте мне знать, если вам понадобится еще какая-нибудь помощь.
Энди

Рейтинг:
0

Amit Jadli

Пожалуйста, используйте этот способ..

Прежде всего, вам нужно добавить ссылку bootstrap.css в свой код..вы ничего не добавили в свой код..

Протестировал свой код как bootstrap-select plugin не нуждается в какой-либо инициализации..вам просто нужно добавить класс selectpicker...

затем ниже код: 

$(document).ready(function () {
            $('#<%=DropDownList.ClientID%>').change(function () {
                var str = "";
                $("#<%=DropDownList.ClientID%> option:selected").each(function () {
                    str += $(this).val(); // OR .text() if needed
                });
                alert(str);
            });
        });

Member 11999641

привет, Амит Джадли, спасибо за ваш ответ, попробовал этот метод, но все равно получил тот же результат. Пожалуйста, смотрите мой обновленный пост спасибо!

Amit Jadli

Вы используете неправильный порядок библиотек js,
Вы также дважды включили библиотеку jquery на эту страницу.

Используйте этот порядок библиотек..


& lt;link href= "css/bootstrap. css" rel= "таблица стилей" />
& lt;link href= "css/bootstrap-select.css "rel= " таблица стилей" />
&ЛТ;скрипт СРЦ="js/jquery-1.9.1.js"&ГТ;&ЛТ;/скрипт>
&ЛТ;скрипт СРЦ="js/bootstrap.js"&ГТ;&ЛТ;/скрипт>
&ЛТ;скрипт СРЦ="js/bootstrap-select.js"&ГТ;&ЛТ;/скрипт>