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

Question

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>

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).

I also have tried to add the references:

<!-- 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).

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.

Are you getting any errors in console ? This code should work fine.https://dotnetfiddle.net/As1qUN — Shyju, Nov 26 '15 at 17:18
No I can't see an error. I think I have to do something more regarding the jQuery UI-integration..? — FredyWenger, Nov 26 '15 at 17:34
I copied the scripts from your queston and used in the fiddle. and it worked fine — Shyju, Nov 26 '15 at 17:35
In an index.cshtml (view) to a controller (if you mean my posted java-script) — FredyWenger, Nov 26 '15 at 17:45
I also would like to know, as I am not able to ask new questions of cause the many downvotes - so maybe you want to upvote the question...? — FredyWenger, Apr 11 '16 at 13:21
You need to use bower with gulp or grunt. thats the way to work in MVC CORE 1.0 and asp core 1.0 — maxspan, Sep 01 '16 at 07:49

score 6 · Answer 1 · answered Nov 26 '15 at 17:53

This code should work fine with the information you provided. See the working fiddle.

Make sure to double check all these things

1) You have loaded jQuery, jQuery UI and the relvant CSS needed. jQuery should be loaded before loading the jQuery UI as it has a dependency on jQuery.

The script which enables the autocomplete should be after loading the above 2 libraries.

2) Check for other script errors in your browser console. If you have some script errors, your other remaining js code won't be executed :)

3) If you are using a Layout and you are trying to enable the autocomplete plugin from a page which uses this layout, make sure to put your scripts inside the @section scripts block so that it executes after we load our libraries( that is how we will/should specify the script execution order in Layout file. See the below example)

Layout (_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>

Your specific page ( Ex : index.cshtml)

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

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

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

</script>

}

If I add @RenderSection("scripts", required: false) in _Layout.cshtml, I receive: InvalidOperationException: RenderSectionAsync invocation in '/Views/Shared/_Layout.cshtml' is invalid. The section 'scripts' has already been rendered. Sorry, but what exactly do you mean with “The script which enables the autocomplete should be after loading the above 2 libraries” (my posted script or.. what)? Thanks for your patience... — FredyWenger, Nov 26 '15 at 18:31
@FredyWenger If it is already there,you should not be adding `@RenderSection` again. — Shyju, Nov 26 '15 at 19:04

score 2 · Accepted Answer · answered Nov 27 '15 at 16:10

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>

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.

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

2 Answers2

Linked