MVC4 Eonasdan Bootstrap 3 日期时间选择器不打开选择器屏幕答案

【问题标题】：MVC4 Eonasdan Bootstrap 3 Date Time picker doesn´t open the picker screenMVC4 Eonasdan Bootstrap 3 日期时间选择器不打开选择器屏幕
【发布时间】：2014-01-05 19:25:40
【问题描述】：

我正在使用此处链接的 Bootstrap 3 日期和时间选择器：

DateTime Picker for Bootstrap 3

我无法打开拣货窗口。当您单击文本框时，没有任何反应，浏览器控制台 (Chrome) 上也不会显示任何消息。所以，事实上，控件是作为一个简单的文本框工作的，而不是作为一个 DateTime 选择器。

这是我的代码：

_所有视图中包含的布局文件：

    <!DOCTYPE html>
<html lang="pt">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta charset="utf-8" />

    <title>TestApp</title>

    <link rel="shortcut icon" href="~/favicon.ico" type="image/x-icon" />
    <link rel="icon" href="~/favicon.ico" type="image/ico" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link href="@Url.Content("~/Content/bootstrap.css")" rel="stylesheet" media="screen">
    <link href="@Url.Content("~/Content/bootstrap-theme.min.css")" rel="stylesheet" media="screen">
    <link href="@Url.Content("~/Content/CustomNavBar.css")" rel="stylesheet" media="screen">
</head>

<body>

    <script src="@Url.Content("~/Scripts/jquery-2.0.3.min.js")"></script>
    <script src="@Url.Content("~/Scripts/bootstrap.min.js")"></script>

    <.... some other stuff here...>

该页面上使用的Index.cshtml：

<link href="@Url.Content("~/Content/bootstrap-datetimepicker.min.css")" rel="stylesheet" media="screen" type="text">

<script type="text/javascript" src="~/Scripts/moment.min.js"></script>
<script type="text/javascript" src="~/Scripts/bootstrap-datetimepicker.min.js"></script>


<div class="container">
    <div class="col-md-10">
        <div class='well'>
            <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>

感谢您为这项工作提供的任何帮助...

感谢您的帮助...

【问题讨论】：

你的 RenderBody() 与 jQuery 脚本标签的关系在哪里？
我的 RenderBody 在 _Layout 的部分，例如：
@RenderBody()
它是否发生在之前包含 jQuery 的<script> 标记？如果是这样，当Index.cshtml 被注入时，你的$(function(){}); 在 jQuery 加载之前发生。
@Mendez 我是插件的作者。你能得到这个工作吗？
@Eonasdan，Tieson 的回答解决了我的问题。问题是我混淆了加载jQuery和$(function(){...});的优先级

标签： javascript asp.net-mvc asp.net-mvc-4 twitter-bootstrap datetimepicker

【解决方案1】：

您的布局可以稍微清理一下，因为 MVC4 不再需要 @Url.Content() 用于虚拟路径。您可能还想了解捆绑系统的工作原理。可以肯定的是，您尝试做的事情可能会更好地使用部分：

_Layout.cshtml：

<!DOCTYPE html>
<html lang="pt">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>TestApp</title>
        <link rel="shortcut icon" href="~/favicon.ico" type="image/x-icon" />
        <link rel="icon" href="~/favicon.ico" type="image/ico" />

        <link href="~/Content/bootstrap.css" rel="stylesheet" media="screen" />
        <link href="~/Content/bootstrap-theme.min.css" rel="stylesheet" media="screen" />
        <link href="~/Content/CustomNavBar.css" rel="stylesheet" media="screen" />

        @RenderSection("head", required: false)
    </head>

    <body>

        @RenderBody()

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

        @RenderSection("scripts", required: false)
    </body>
</html>

Index.cshtml：

@section head
{
    <link href="~/Content/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen" type="text" />
}

@section scripts
{
    <script src="~/Scripts/moment.min.js"></script>
    <script src="~/Scripts/bootstrap-datetimepicker.min.js"></script>
    <script>
        $(function () {
            $('#datetimepicker1').datetimepicker();
        });
    </script>
}

<div class="container">
    <div class="col-md-10">
        <div class='well'>
            <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>
    </div>
</div>

使用部分可以让视图引擎将诸如<script> 或<link /> 标记之类的内容注入到布局的正确部分。在布局中出现@RenderBody() 的任何位置都会注入部分中的任何not。

如果您想要更具体的示例，请直接访问源代码：http://weblogs.asp.net/scottgu/archive/2010/12/30/asp-net-mvc-3-layouts-and-sections-with-razor.aspx

【讨论】：

【解决方案2】：

在您的 Index.cshtml 的这两个脚本中。

<script type="text/javascript" src="~/Scripts/moment.min.js"></script>
<script type="text/javascript" src="~/Scripts/bootstrap-datetimepicker.min.js"></script>

您没有使用@UrlContent()。运行您的项目，并查看生成的 html 源代码，如果浏览器可以找到此 js 文件。或者在浏览器开发者工具的网络标签中查看任何错误。

【讨论】：

MVC4 不需要@Url.Content()