如何让 JQuery-UI 与 ASP.NET MVC6 一起工作？答案

【问题标题】：How to get JQuery-UI to work with ASP.NET MVC6?如何让 JQuery-UI 与 ASP.NET MVC6 一起工作？
【发布时间】：2015-11-26 17:07:15
【问题描述】：

我刚开始使用 MVC6 (RC)，已经创建了一个基于 MVC6 RC 标准模板的项目，并拼命尝试让 JQuery-UI 工作。在我的一个视图中，我已经超越了 JQuery-UI 页面中的以下示例：

<script>
    $(function() {
        var availableTags = [
            "ActionScript",
            "AppleScript",
            "Asp",
            "BASIC",
            "C",
            "C++",
            "Clojure",
            "COBOL",
            "ColdFusion",
            "Erlang",
            "Fortran",
            "Groovy",
            "Haskell",
            "Java",
            "JavaScript",
            "Lisp",
            "Perl",
            "PHP",
            "Python",
            "Ruby",
            "Scala",
            "Scheme"];

        $("#tags").autocomplete({
            source: availableTags
        });
    });
</script>
<div class="ui-widget">
    <label for="tags">Tags:</label>
    <input id="tags">
</div>

标签（和“文本框”）已显示，但自动完成功能不起作用（如果我输入一些文本，则没有任何反应）。 JQuery（基础）默认安装（在标准模板中）。首先，我添加了 JQuery-UI NuGet 包（似乎有问题）。然后我也在 Bower 中添加了 JQuery-UI 包（我认为应该是新的方式）。

我也尝试添加参考：

<!-- jQuery UI CSS Reference -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">

在我看来（什么不能解决问题）。

在 MVC 6 (RC) 项目中添加 JQuery-UI 并使示例生效的正确方法是什么？ 具体更新：
问题不在于上面的示例代码（没有问题），问题只是引用了正确的 JQuery（在我的情况下是 MVC6 RC）。
因此，您可以在第一个答案中看到一般的解决方案，并且 - 针对我的案例 - 在我自己的答案中。

【问题讨论】：

您是否在控制台中遇到任何错误？这段代码应该可以正常工作。dotnetfiddle.net/As1qUN
不，我看不到错误。我想我必须对 jQuery UI 集成做更多的事情......？
我从您的任务中复制了脚本并在小提琴中使用。它工作得很好
你在哪里有这个脚本？哪个文件？
在 index.cshtml（视图）到控制器（如果你的意思是我发布的 java 脚本）

标签： jquery jquery-ui visual-studio-2015 asp.net-core-mvc

【解决方案1】：

此代码应该可以与您提供的信息一起正常工作。查看工作中的fiddle。

请务必仔细检查所有这些内容

1) 您已经加载了 jQuery、jQuery UI 和所需的相关 CSS。 jQuery 应该在加载 jQuery UI 之前加载，因为它依赖于 jQuery。

启用自动完成的脚本应该在加载上述两个库之后。

2) 在浏览器控制台中检查其他脚本错误。如果您有一些脚本错误，您的其他剩余 js 代码将不会执行:)

3) 如果您正在使用布局并且您尝试从使用此布局的页面启用自动完成插件，请确保将您的脚本放在 @section scripts 块中，以便它在我们加载我们的库后执行（这是我们将/应该在布局文件中指定脚本执行顺序的方式。参见下面的示例）

布局(_Layout.cshtml)

<body>
 <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
 <script src="//code.jquery.com/jquery-1.10.2.js"></script>
 <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
 @RenderSection("scripts", required: false)
</body>

您的特定页面（例如：index.cshtml）

@section scripts
{
<script type="text/javascript">

    $(function() {
        var availableTags = [
            "ActionScript",
            "AppleScript",
            "Scheme"
        ];

        $("#tags").autocomplete({
            source: availableTags
        });
    });

</script>

}

【讨论】：

如果我在 _Layout.cshtml 中添加 @RenderSection("scripts", required: false)，我会收到： InvalidOperationException: RenderSectionAsync invocation in '/Views/Shared/_Layout.cshtml' is invalid。 “脚本”部分已被渲染。抱歉，但是“启用自动完成的脚本应该在加载上述 2 个库之后”（我发布的脚本或.. 什么）到底是什么意思？感谢您的耐心等待...
@FredyWenger 如果已经存在，则不应再添加@RenderSection。

【解决方案2】：

现在可以了。在 MVC6 RC 中，必须在 _Layout.cshtml 中添加脚本，但在 环境部分下：

 <environment names="Development">
        <script src="~/lib/jquery/dist/jquery.js"></script>
        <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
        <script src="~/js/site.js" asp-append-version="true"></script>
        @* Added for JQueryUI (Debug) *@
        <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
        <script src="//code.jquery.com/jquery-1.10.2.js"></script>
        <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
        @* Added for GoogleMaps (debug)*@
        <script src="http://maps.google.com/maps/api/js?sensor=false"></script>
    </environment>
    <environment names="Staging,Production">
        <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js"
                asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
                asp-fallback-test="window.jQuery">
        </script>
        <script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.5/bootstrap.min.js"
                asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.min.js"
                asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal">
        </script>
        <script src="~/js/site.min.js" asp-append-version="true"></script>
        @* Added for JQueryUI (Staging / Hosting (including Self-hosting) *@
        <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
        <script src="//code.jquery.com/jquery-1.10.2.js"></script>
        <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
        @* Added for GoogleMaps (Staging / Hosting (including Self-hosting)*@
        <script src="http://maps.google.com/maps/api/js?sensor=false"></script>
    </environment>

所以我发布的示例代码有效，因为我已经改变了它。注意：您还必须在环境名称=“Staging,Production”下添加引用，否则它在 VS 之外不起作用。

【讨论】：