asp.net mvc - MVC4 jQuery UI does not work

Question

I cannot get jQuery UI working in my ASP.NET MVC4 application. I tried dialog and datepicker. Here is part of the code of my view.

<link href="../../Content/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" />
<script src="../../Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-ui-1.8.11.min.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function () {
    alert('A');
    //$('#datepicker').val('test');
    $('#datepicker').datepicker();
    alert('B');
});
</script>
<h1>Test</h1>
<form id="testForm" action="#" method="get">
    <input type="text" id="datepicker" name="datepicker" class="datepicker" />
</form>

The alert A is displayed. When I uncomment the next row, the value test is assigned. But datepicker is not working and alert B does not display.

Thanks, Petr

Answer 1

In the layout.cshtml view, move

@Scripts.Render("~/bundles/jquery") 

from body to head and add in head too

@Scripts.Render("~/bundles/jqueryui")