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>

显示标签（以及＆＃34; TextBox＆＃34;），但自动完成功能不起作用（如果我输入某些文字，则没有任何反应）。默认情况下安装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和所需的relvant CSS。应该在加载jQuery UI之前加载jQuery，因为它依赖于jQuery。

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

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>

}

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>

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

如何让JQuery-UI与ASP.NET MVC6一起使用？

2 个答案: