Bootstrap Select не работает с валидаторами Asp.Net

1

Я использую bootstrap 3 select plugin, чтобы сделать мои dropdownlists более фантастическими. Он отлично работает, пока я не добавлю простой RequiredFieldValidator на страницу для элемента ANOTHER, например текстового поля. Все красивые выпадающие списки затем меняются на типичные выпадающие списки.

Вот мой HTML:

<asp:DropDownList ID="ddlCategories" runat="server" CssClass="show-menu-arrow selectpicker" DataSourceID="dsCategories" DataTextField="CategoryName" DataValueField="CategoryID">
</asp:DropDownList>

И JS:

$(window).on('load', function () {
    $('.selectpicker').selectpicker({
    });
});

Я знаю, что валидаторы Asp.Net добавляют на страницу код Javascript, и я думаю, что они вызывают некоторый конфликт. Я также использовал $.noConflict() без успеха.

Мне нужно знать, как решить эту проблему.

Редактировать:

Отображаемая разметка выглядит следующим образом:

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>

</title>
    <script src="/js/jquery-1.10.2.min.js"></script>
    <script src="/js/bootstrap.js"></script>
    <script src="/js/bootstrap-select.js"></script>
    <link href="/assets/css/bootstrap.css" rel="stylesheet" />

    <script type="text/javascript">
        $(window).on('load', function () {
            $('.selectpicker').selectpicker({
            });
        });
    </script>
</head>
<body>
    <form method="post" action="Test2.aspx" onsubmit="javascript:return WebForm_OnSubmit();" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="Lu54Lc5gUoMcES3FS5vAFbfEDc2WKzPnEz29Y/3ecH2fPQjmLCl030G8zXJfv035qxsI7TaEKDLL7vpb2xD61vH7RnpFzze8sAOGlMFp+Vw=" />
</div>


<script src="/WebResource.axd?d=x2nkrMJGXkMELz33nwnakDs9KKDZZn2GO2GOnzQ8bhnAg5hg1uDK_xxs2F4qGzZL4suzNGfgwk1f_Kqd7w6GL2Mz9JWbGv_Uo50eVnuTPU81&amp;t=634773918900000000" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function WebForm_OnSubmit() {
if (typeof(ValidatorOnSubmit) == "function" && ValidatorOnSubmit() == false) return false;
return true;
}
//]]>
</script>

<div class="aspNetHidden">

    <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="vRZe0MAmYSmodYTkQXHZO1ZKY9EsMANgK1GXMQfTQ/Lke9yD8gU8jV56OwuAerfGHV5FTQnt+m2zQwARykzPYNpaD2HUK+lPDeGfKZazORSavMSQXAZHoeLR8Yzltk+3oS5ytg9B7n2ikrVh+v5DI1Ags0aEZzExyTTjsOFgBxOaBU8PcHXOyE/7XMK3TTOx" />
</div>
    <div>
        <select name="DropDownList1" id="DropDownList1" class="show-menu-arrow selectpicker">
    <option value="a">a</option>
    <option value="b">b</option>
    <option value="c">c</option>

</select>
    <input name="TextBox1" type="text" id="TextBox1" />
    <span data-val-controltovalidate="TextBox1" data-val-errormessage="RequiredFieldValidator" id="RequiredFieldValidator1" data-val="true" data-val-evaluationfunction="RequiredFieldValidatorEvaluateIsValid" data-val-initialvalue="" style="visibility:hidden;">RequiredFieldValidator</span>
    </div>
    </form>
</body>
</html>
  • 0
    определить "не работает" у вас есть ошибки в консоли?
  • 0
    Вам нужно предоставить больше информации, но мое первоначальное предположение должно было бы добавить CausesValidation="false" в DropDownList
Показать ещё 8 комментариев
Теги:

3 ответа

0
Лучший ответ

Я наконец нашел ответ! Когда я впервые использовал валидатор на странице в этом проекте, я получил сообщение об ошибке: "WebForms UnobtrusiveValidationMode требует ScriptResourceMapping для" jquery "".

Я googled и на этой странице SO, я нашел 2 решения. Один из них предложил отключить новую функцию ASP.Net 4.5, а другой предложил добавить код для правильной настройки.

Я взял последнее (добавив ScriptResourceMapping в Application_Start). И я столкнулся с этой проблемой где-то еще в моем проекте.

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

Поэтому я изменил свои коды и добавил ключ к Web.config, и теперь он отлично работает!

Поделиться
0

попробуйте вызвать все сценарии, связанные с Bootstrap, в конце страницы

Поделиться
0

Я думаю, что вы были на правильном пути без какой-либо конфликтной версии вашего реализованного jQuery.

Пожалуйста попробуйте:

<script type="text/javascript">
    jQuery.noConflict();
    jQuery(window).on('load', function () {
        jQuery('.selectpicker').selectpicker({
        });
    });
</script>
Поделиться
  • 0
    Это не решило проблему.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню