asked on

Setting up JqueryUI with MVC 5 in Visual Studio

I cannot get JqueryUI to work with MVC5. Here's what I've done...

Created a brand new MVC Project in VS 2015.
Added jqueryui via NuGet/Updated jquery, bootstrap, etc
Added an Entity Data Model
Added scaffolded item (controller w/views using EF)
Added bundles/references following this guide:
https://blog.falafel.com/three-steps-use-jquery-ui-asp-net-mvc-5/
Added several different attempts at using a datepicker to my Index.cshtml page.

    <!-- Examples of creating a Datepicker -->
    <input class="date-picker" />
    @Html.TextBox("YourTextBox", "", new { @class = "date-picker" })

Open in new window

What am I leaving out/doing wrong? Anyone have a better step-by-step procedure here?

Julian Hansen

Where did you bind the datepicker to the input

I am expecting somewhere to see this

$('.date-picker').datepicker()

Open in new window

jQueryUI is just a .js file and a .css file - both of which are available on CDN.

Once you have added them to your project you can verify they are there by doing a view source on the page and checking the source for the jqueryui files. Click on the links to make sure they are loading (referenced) correctly.

Next you need to find where you are binding the datepicker() to your input - make sure the code is AFTER the inclusion of the jQueryUI library (again check this in the source - if it is not in the right place you can trace back from there).

Finally check your console for errors (F12) to make sure that there are not other JavaScript errors that might be interfering

Member_2_1242703

ASKER

Here's the HEAD from my viewSource

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Create - My ASP.NET Application</title>
    <link href="/Content/bootstrap.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>

    
    <script src="/Scripts/modernizr-2.8.3.js"></script>

    <script src="/Scripts/jquery-3.1.1.js"></script>

    <script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/respond.js"></script>

    <script src="/Scripts/jquery-ui-1.12.1.js"></script>

    <script>
	$( function() {
		$( "#date-picker" ).datepicker();
	} );
    </script>
</head>

Open in new window

Here's the HTML

<input class="date-picker" />

Open in new window

All the links go to the source when clicked.
No JS errors (or any errors for that matter)

ASKER CERTIFIED SOLUTION

Julian Hansen

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Member_2_1242703

ASKER

Thanks!

I made that change, then changed the links in my CSS bundle and it's working!

Julian Hansen

You are welcome.