使用 ASP.NET MVC C# 和引导日期选择器将不起作用答案

【问题标题】：Using ASP.NET MVC C# and the bootstrap datepicker won't function使用 ASP.NET MVC C# 和引导日期选择器将不起作用
【发布时间】：2018-06-24 21:13:43
【问题描述】：

这是 CSHTML 代码。在普通 HTML 中放置带有脚本的相同代码时记录它打开/运行，但是在 ASP.NET MVC 中使用 CSHTML 时 C# 在浏览器中给出错误，指示 $() 不是函数。（引导日期选择器“#birthdate”不起作用）... 有什么建议吗？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="~/Scripts/bootstrap.css" rel="stylesheet" />
    <!--<link href="~/Scripts/bootstrap.min.css" rel="stylesheet" />-->
    <link href="~/Scripts/daterangepicker.css" rel="stylesheet" />
    <!-- jQuery -->
    <script src="~/Scripts/jquery.min.js"></script>
    <script src="~/Scripts/daterangepicker.js"></script>
    <script src="~/Scripts/moment.min.js"></script>
    <!---<script src="~/Scripts/bootstrap.min.js"></script>-->
    <script src="~/Scripts/bootstrap.js"></script>
    <script src="~/Scripts/bootstrap-datepicker.min.js"></script>
    <link href="~/Scripts/bootstrap-datepicker3.standalone.css" rel="stylesheet"/>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#birthdate").datepicker({
                autoclose: true,
                format: 'yyyy-mm-dd',
                todayHighlight: true,
                clearBtn: true,
                orientation: 'bottom'
            });
        });
    </script>
</head>   
<body>
    <div class="form-group">
        <label for="usr">Birthdate:</label>
        <div class='input-group date' id='birthdate'>
            <input type='text' class="form-control" />
            <span class="input-group-addon">
                <span class="glyphicon glyphicon-calendar"></span>
            </span>
        </div>
    </div>
</body>
</html>

【问题讨论】：

我猜，这不是你的问题的原因，但你有</body> 而不是<body> 在</head> 之后。只是想指出这一点。
Javascript 或 CSS 代码与 ASP.NET MVC 或 C# 无关。日期选择器确实有效。你检查浏览器的开发者工具和控制台是否有错误？您可能指向 jQuery 的错误位置。 $()not a function 表示未加载声明此函数的库 jQuery
感谢您一直在编辑内容以使网站能够发布，我没有检查...您认为 JavaScript 中的 $ 可能有问题吗？跨度>
ASP.NET MVC 使用开箱即用的引导程序和 jQuery。创建一个新的 ASP.NET MVC 项目并检查脚本和样式表是如何加载的。然后将这些标签复制到您自己的项目中。该消息意味着您的脚本运行之前 jQuery 有机会加载和注册$() 函数

标签： javascript jquery asp.net asp.net-mvc twitter-bootstrap

【解决方案1】：

您好，这里是解决此问题的步骤。

第 1 步：

假设这是你的 _layout.cshtml，安排如下脚本： [_layout.cshtml]

<!DOCTYPE html>
<html>
<head>
    <link href="~/Scripts/bootstrap.css" rel="stylesheet" />
    <!--<link href="~/Scripts/bootstrap.min.css" rel="stylesheet" />-->
    <link href="~/Scripts/daterangepicker.css" rel="stylesheet" />

    <script src="~/Scripts/jquery.min.js"></script>
    <script src="~/Scripts/bootstrap.js"></script>
    <script src="~/Scripts/daterangepicker.js"></script>
    <script src="~/Scripts/moment.min.js"></script>
    <script src="~/Scripts/bootstrap-datepicker.min.js"></script>
    <link href="~/Scripts/bootstrap-datepicker3.standalone.css" rel="stylesheet"/>
</head>
<body>
@RenderBody()
@RenderSection("scripts", required: false)
</body>
</html>

现在这是您使用日期时间选择器的视图。

theView.cshtml

<div>
    <div class="form-group">
        <label for="usr">Birthdate:</label>
        <div class='input-group date' id='birthdate'>
            <input type='text' class="form-control" />
            <span class="input-group-addon">
                <span class="glyphicon glyphicon-calendar"></span>
            </span>
        </div>
    </div>
</div>
@section Scripts {
    <script type="text/javascript">
        $(document).ready(function () {
            $("#birthdate").datepicker({
                autoclose: true,
                format: 'yyyy-mm-dd',
                todayHighlight: true,
                clearBtn: true,
                orientation: 'bottom'
            });
        });
    </script>
}

希望这会奏效。

【讨论】：