Question

我正在尝试在MVC中使用this日期时间选择器，它已经过了几个小时但是选择器屏幕没有显示，我也试过this

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>

_layout：

<!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/

我无法弄清楚我做错了什么？，任何帮助都会受到赞赏。

Answer 1

你多次包含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之间的区别感到有点困惑（我推断你有时使用{{1}的事实}版本，有时候不要;如果你知道这一切，请原谅我！）。 min文件是可以发送到服务器的最小化版本（变量名称尽可能短，删除注释，空格减少到最小）。你可能已经有类似的东西了

.min.js

在Bundle.Config文件中

。如果没有，添加它很方便，因为这意味着发行版本具有最佳性能（#if DEBUG BundleTable.EnableOptimizations = false; #else // note: overrides compilation debug="true" in Web.config BundleTable.EnableOptimizations = true; #endif文件），但调试版本更易于人工阅读（正常.min.js文件）以帮助你调试它。

引导日期时间选择器未显示在mvc中

1 个答案: