Question

我在这里使用了一个Bootstrap 3日期和时间选择器：

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

这是我的代码：

_Layout文件包含在所有视图中：

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

我感谢任何帮助使这项工作......

感谢您的帮助......

Answer 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()出现的任何地方都会注入某个部分中不的内容。

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

Answer 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 Eonasdan Bootstrap 3日期时间选择器无法打开选择器屏幕

2 个答案: