如何使JQuery-UI与ASP.NET MVC6一起使用? [英] How to get JQuery-UI to work with ASP.NET MVC6?

问题描述

我刚开始使用MVC6(RC)，已经基于MVC6 RC的标准模板创建了一个项目，并拼命尝试使JQuery-UI正常工作. 在我的其中一种视图中，我已经从JQuery-UI页面中替代了以下示例:

I have just started with MVC6 (RC), have created a project based on the standard template to MVC6 RC and desperately try to bring JQuery-UI to work. I have overtaken the following example from the JQuery-UI page in one of my views:

<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(基本). 首先，我添加了JQuery-UI NuGet包(似乎是错误的). 然后，我还在Bower中添加了JQuery-UI软件包(我认为应该是新方法).

The label (and the "TextBox") is shown, but the autocomplete don’t work (if I type in some text, nothing happens). JQuery (base) is installed per default (in the standard template). First, I have added the JQuery-UI NuGet package (what seems to be wrong). Then I have added the JQuery-UI package also in Bower (what I think, should be the new way).

我也尝试添加引用:

<!-- 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">

在我看来(不能解决问题的地方).

in my view (what don't solve the problem).

在 MVC 6(RC)项目中添加 JQuery-UI 并使示例工作的正确方法是什么? 更新为具体内容:
问题不在于上面的示例代码(没什么问题)，问题仅在于引用了正确的JQuery(对于我而言，对于MVC6 RC).
因此，您可以在第一个答案中看到一般的解决方案，在我自己的答案中看到特定于我的情况的解决方案.

What is the correct way to add JQuery-UI in a MVC 6 (RC) project and bring the example to work? Update to be concret:
The problem was not the example-code above (nothing wrong with it) the problem only was to reference the JQuery correct (in my case for MVC6 RC).
So you can see the solution in general in the first answer and - specific for my case - in my own answer.

推荐答案

现在可以使用. 在 MVC6 RC 中，必须将脚本添加到 _Layout.cshtml 中，但要在环境部分下:

It works now. In MVC6 RC,the scripts have to be added in _Layout.cshtml, but under the environment sections:

 <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之外运行.

So my posted example-code works, since I have changed that. Note: You also have to add the references under environment names="Staging,Production", else it don't work outside of VS.

这篇关于如何使JQuery-UI与ASP.NET MVC6一起使用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！