Enable jQuery ui in asp.net MVC web app

Question

I have an asp.net mvc application in Visual Studio 2013. I have a problem when using jQuery UI tools. I have the following scripts in my _Layout.cshtml:

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

<script src="@Url.Content("~/Scripts/1.7.2.jquery.min.js")" type="text/javascript"></script>

<script src="@Url.Content("~/Scripts/jquery-2.1.0.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-2.1.0.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>

<script src="@Url.Content("~/Scripts/jquery-ui-1.10.4.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.10.4.min.js")" type="text/javascript"></script>

 @Scripts.Render("~/bundles/jquery")
 @Scripts.Render("~/bundles/bootstrap")
 @RenderSection("scripts", required: false)

when I try to use datepicker() :

 <script type="text/javascript">
    jQuery(document).ready(function () {
        $('.rDate').datepicker();
    });
</script>

 @Html.TextBox("date", new DateTime(2014, 1, 1), new { @class=".rDate"})

I get the the error: JavaScript runtime error: Object doesn't support property or method 'datepicker'

I'd appreciate any help.

Answer 1

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

<script src="@Url.Content("~/Scripts/jquery-2.1.0.min.js")" type="text/javascript"></script>

<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>

<script src="@Url.Content("~/Scripts/jquery-ui-1.10.4.min.js")" type="text/javascript"></script>

 @Scripts.Render("~/bundles/jquery")
 @Scripts.Render("~/bundles/bootstrap")
 @RenderSection("scripts", required: false)

Use minified version of Jquery and Jquery UI and remove repeated script references.

Demo:

http://jsfiddle.net/8Nyy7/