Question

在我开始知道为了让jquery ui在ASP.NET MVC中工作之前，我一直是个噩梦，我需要添加@Scripts.Render("~/bundles/jqueryui")。在此之前，我不断获得Uncaught error: Undefined is not a function。我不明白的是，为什么在检查html源代码时我可以在源代码中看到jquery ui文件时会发生这种情况。这是_Layout.cshtml文件：

    <!DOCTYPE html>
<html>
<head>
    <script src="~/Scripts/jquery-1.8.2.js"></script>
    <script src="~/Scripts/jquery-ui-1.8.24.min.js"></script>
    <link href="~/Content/themes/base/jquery-ui.css" rel="stylesheet" />
    <script src="~/Scripts/jquery.validate.min.js"></script>
    <script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
    <script src="~/Scripts/jquery.plugins.js"></script>
    <script src="~/Scripts/Helpers.js"></script>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>
    @RenderBody()

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/jqueryui")//Added later to get it working
    @RenderSection("scripts", required: false)
</body>
</html>

在我的Helper.js文件中，我有一些我经常使用的辅助函数。其中一个是在applyDatetimePickerAndFormat上调用的$(document).ready()。在该函数内部，我有以下代码：

    $('.txt-date').datepicker({
    showAnim: "drop",
    changeMonth: true,
    changeYear: true,
    dateFormat: "dd.mm.yy"
});

如果我在_Layout.cshtml中省略@Scripts.Render("~/bundles/jqueryui")，我将收到上述错误。此代码与任何普通的html或Web表单完美匹配。所以似乎文件无法以某种方式看到jquery-ui文件的内容。为了使我的问题具体：

当我查看网页的来源时，我可以看到jquery-ui-1.8.24.js，并在html源代码中引用它。那为什么代码不能找到jquery-ui函数？
如果必须在@Scripts.Render中指定每个java脚本文件，那么为什么我的Helper.js文件没有任何问题？
最后这条~/bundles/jqueryui路径指的是哪里？

Answer 1

jquery-ui依赖于jquery（即必须在jquery之后定义），但是你复制了你的文件。在头部，您已添加<script src="~/Scripts/jquery-1.8.2.js"></script>，后跟jquery-ui。然后使用@Scripts.Render("~/bundles/jquery")（现在在jquery-ui之后）在文件末尾重新加载jquery。

删除头部的脚本，它应该可以工作。另外，我建议你从头部删除jquery.validate和jquery.validate.unobtrusive，并在文件末尾使用@Scripts.Render("~/bundles/jqueryval")（@RenderSection..之前）。您可以在App_Start \ BundleConfig.cs文件中检查这些包。使用bundle有很多好处（参见Bundling and Minification）。

如果您在基于_Layout的每个页面中使用所有这些文件，您可以定义自己的包以包含所有文件。

Answer 2

您需要为js定义策略。我建议你先组织你的js，之后将它分成较小的部分。一个应该对所有页面都是通用的（在你的情况下为jQuery），其他验证脚本应该只包含在有一些编辑文件等的页面上。

使用DRY原则并阅读有关js如何工作的一些信息。很久以前它给了我很多帮助，并且不会花费很多时间。

为什么我要乱用@ Script.Render来在HTML文档中包含脚本

2 个答案: