使用 ASP.NET MVC C# 和引导日期选择器将不起作用
Posted
技术标签:
【中文标题】使用 ASP.NET MVC C# 和引导日期选择器将不起作用【英文标题】：Using ASP.NET MVC C# and the bootstrap datepicker won't function 【发布时间】：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 有机会加载和注册$() 函数
【参考方案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>
希望这会奏效。
【讨论】：
以上是关于使用 ASP.NET MVC C# 和引导日期选择器将不起作用的主要内容，如果未能解决你的问题，请参考以下文章
ASP.NET MVC 验证器无法识别引导程序 DatePicker 格式
使用引导日期选择器在 ASP.net 核心中发布本地化的日期格式
使用日期时间选择器进行日期和时间验证 (ASP.Net MVC Core v1.1)