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.dotnetfiddle.net/As1qUN — Shyju
– Shyju, Commented Nov 26, 2015 at 17:18
No I can't see an error. I think I have to do something more regarding the jQuery UI-integration..? — FredyWenger
– FredyWenger, Commented Nov 26, 2015 at 17:34
I copied the scripts from your queston and used in the fiddle. and it worked fine — Shyju
– Shyju, Commented Nov 26, 2015 at 17:35
In an index.cshtml (view) to a controller (if you mean my posted java-script) — FredyWenger
– FredyWenger, Commented Nov 26, 2015 at 17:45

Shyju · Accepted Answer · 2015-11-26 17:53:03Z

6

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>

}

answered Nov 26, 2015 at 17:53

Shyju

220k106 gold badges420 silver badges499 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

FredyWenger Over a year ago

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

Shyju Over a year ago

@FredyWenger If it is already there,you should not be adding @RenderSection again.

FredyWenger · Accepted Answer · 2015-11-27 16:10:04Z

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.

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related