Bootstrap Date Time Picker не отображается в mvc

я пытаюсь использовать это средство выбора даты и времени в MVC, прошло несколько часов но экран выбора не отображается, я также пробовал the-picker-screen">это

BundelConfig.cs

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                                    "~/Scripts/jquery-{version}.js",
                                    "~/Scripts/moment.js",
                                    "~/Scripts/bootstrap.js",
                                    "~/Scripts/bootstrap-datetimepicker.min.js"              
                                    ));

// other bundles here

bundles.Add(new StyleBundle("~/Content/css").Include(
                                   "~/Content/site.css",
                                   "~/Content/bootstrap.css",
                                   "~/Content/bootstrap-datetimepicker.min.css"   
                ));

// other bundles here

Мое мнение:

<script src="~/Scripts/jquery-1.9.1.js"></script>
<script src="~/Scripts/moment.js"></script>
<script src="~/Scripts/bootstrap.js"></script>    
<script src="~/Scripts/bootstrap-datetimepicker.min.js"></script>

<link href="~/Content/bootstrap.css" rel="stylesheet" />
<link href="~/Content/bootstrap-datetimepicker.min.css" rel="stylesheet" />



<div class="container">
    <div class="row">
        <div class='col-sm-6'>
            <div class="form-group">
                <div class='input-group date' id='datetimepicker1'>
                    <input type='text' class="form-control" />
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
        </div>
        <script type="text/javascript">
            $(function () {
                $('#datetimepicker1').datetimepicker();
            });
        </script>
    </div>
</div>

_Макет:

<!DOCTYPE html>
<html>
<head>
 @Scripts.Render("~/bundles/modernizr")
 @Styles.Render("~/css/boostrap.css")

<script src="~/Scripts/jquery-1.7.1.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
</head>

<body>

<div>

// here other divs

   @RenderBody()


</div>


<script src="js/jquery.js"></script>
<script src="js/boostrap.min.js"></script>

@section Scripts {
        @Scripts.Render("~/bundles/jqueryval")
    }
 @Scripts.Render("~/bundles/jquery")
 @RenderSection("scripts", required: false)

</body>
</html>

Ожидаемый результат

http://jsfiddle.net/RR4hw/7/

Я не могу понять, что я делаю неправильно? Любая помощь будет оценена по достоинству.


twitter-bootstrap asp.net-mvc bootstrap-datepicker
person Shaiju T    schedule 03.03.2015    source источник
comment
Откройте инструменты разработчика в своем браузере, просмотрите свои источники и посмотрите, сможете ли вы найти все исходные файлы, которые у вас должны быть. Если это окажется безрезультатным, проверьте, нет ли ошибок консоли.   -  person Inspector Squirrel    schedule 03.03.2015
comment
привет, я пошел проверить элемент --> Отладчик --> Источники --> здесь bootstrap-datetimepicker.min.js неактивен, я думаю, файл не загружен   -  person Shaiju T    schedule 03.03.2015
comment
Это объяснило бы это, конечно. Можете ли вы отредактировать свой вопрос, чтобы показать свой вид _Layout, пожалуйста? Я предположил, что вы добавили сценарии в свое представление в качестве демонстрации, но вы все равно неправильно используете пакеты, я так не думаю.   -  person Inspector Squirrel    schedule 03.03.2015
comment
Я добавил макет, может быть, это поможет найти, что не так   -  person Shaiju T    schedule 03.03.2015
comment
У вас такая проблема во всех браузерах??? Bcoz, если вы используете IE 8, есть некоторые проблемы с позицией. Если это проблема не во всех браузерах, то это справочная проблема.   -  person suman    schedule 03.03.2015
comment
Почему вы используете две версии jQuery? Вы включаете jQuery 3 раза 1. @Scripts.Render(~/bundles/jquery) . 2. ‹script src=~/Scripts/jquery-1.7.1.min.js›‹/script› 3. ‹script src=~/Scripts/jquery-1.9.1.js›‹/script›   -  person Dawood Awan    schedule 03.03.2015
comment
Если вы используете последнюю версию nuget.org/packages/Bootstrap.v3.Datetimepicker Используется последняя версия jQuery = 2.1. Эта ссылка из официального примера (jsfiddle.net/Eonasdan/ 0Ltv25o8)   -  person Dawood Awan    schedule 03.03.2015
comment
спасибо за указание, поэтому я попробую добавить jQuery = 2.1 в папку Scripts и использовать jQuery 1 раз, например: @Scripts.Render(~/bundles/jquery) в макете   -  person Shaiju T    schedule 03.03.2015
comment
Большое спасибо @Dawood Awan, почти готово, я только что прокомментировал две другие ссылки на jquery в макете и просто использовал jQuery = 2.1.3 в своем текущем представлении: ‹script src=~/Scripts/jquery-2.1.3.js›‹ /script›, теперь работает нормально   -  person Shaiju T    schedule 03.03.2015

Ответы (1)


arrow_upward
3
arrow_downward

Вы включаете jQuery несколько раз. Он уже включен в ваш комплект, поэтому вы можете удалить эту строку в своем макете:

<script src="~/Scripts/jquery-1.7.1.min.js"></script>

и эти строки с вашей точки зрения:

<script src="~/Scripts/jquery-1.9.1.js"></script>
<script src="~/Scripts/moment.js"></script>
<script src="~/Scripts/bootstrap.js"></script>    
<script src="~/Scripts/bootstrap-datetimepicker.min.js"></script>

Эта строка в вашем макете

@Scripts.Render("~/bundles/jquery")

делает все это за вас, потому что вы добавили эти сценарии в этот пакет.

Многократное включение одного и того же скрипта негативно влияет на производительность, но обычно не останавливает работу кода. Однако в этом случае разные версии jQuery, которые вы включили, являются разными версиями. Я бы проверил, что находится в вашей папке Scripts, и посмотрел, обновлено ли оно.

Кроме того, также считается хорошей практикой размещать стили (например, CSS) вверху страницы, а скрипты внизу, потому что таким образом браузер загружает страница правильно со стилем, и не замедляться, пытаясь загрузить сценарии на полпути (и если есть проблема со сценарием, страница все еще загружается).

И, наконец, вы также выглядите так, как будто немного запутались в разнице между .min.js и .js (я экстраполирую тот факт, что вы иногда используете версию min, а иногда нет; если вы все это уже знаете, извините меня!). Файлы .min.js представляют собой минимизированную версию (имена переменных как можно короче, комментарии удалены, пробелы сведены к минимуму), которые можно отправить на сервер. Возможно, у вас уже есть что-то подобное

#if DEBUG
    BundleTable.EnableOptimizations = false;
#else
    // note: overrides compilation debug="true" in Web.config
    BundleTable.EnableOptimizations = true;
#endif

в вашем файле Bundle.Config. Если нет, удобно добавить, потому что это означает, что релизная версия имеет наилучшую производительность (.min.js файлов), но отладочная версия более удобочитаема (обычные .js файлов), чтобы помочь вам отлаживать ее.

person starsplusplus    schedule 02.04.2015
comment
Я уже решил проблему, и тот же совет был дан в комментариях, я просто принимаю его как ответ и благодарю вас за теоретические объяснения, всего наилучшего. - person Shaiju T; 02.04.2015