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

Question

我刚开始使用 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>

显示了标签（和 "TextBox"），但自动完成不起作用（如果我输入一些文本，什么也不会发生）。 JQuery (base) 默认安装（在标准模板中）。首先，我添加了 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）。
所以你可以在第一个答案中看到一般的解决方案，并且 - 针对我的情况 - 在我自己的答案中。

Answer 1

根据您提供的信息，此代码应该可以正常工作。查看工作 fiddle.

确保仔细检查所有这些事情

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

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

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

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

布局(_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>

}

Answer 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 之外不起作用。

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

How to get JQuery-UI to work with ASP.NET MVC6?

jquery

jquery-ui

asp.net-core-mvc

visual-studio-2015