Very basic jquery datepicker in Razor

I am in the visual studio 2010 MVC4 razor microsoft template. I downloaded the jquery "kit" from the jquery site and it works when I open up the index.html. However, when I change my razor project to look like the jquery download (move all the JS files, images, and css files into the right places) and add in the following code (which works in the html case)

    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>jQuery UI Example Page</title>
    <link type="text/css" href="~/Content/ui-lightness/jquery-ui-1.8.24.custom.css" rel="stylesheet" />
    <script type="text/javascript" src="~/Scripts/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="~/Scripts/jquery-ui-1.8.24.custom.min.js"></script>
    <script type="text/javascript">
        $(function () {

            // Datepicker
            $('#datepicker').datepicker({
                inline: true
            });

        });
    </script>

</head>
<body>


    <!-- Datepicker -->
    <h2 class="demoHeaders">Datepicker</h2>
    <div id="datepicker"></div>


</body>

Nothing shows up on the page expect for the text Datepicker. I have looked through everything else and nothing seems to be doing the trick. Any suggestions?

Check the Network console in your browser, I bet it is getting 404 errors when it's trying to load your css and js files. Because of this, it doesn't apply the style for the calendar, or even the js to have it hidden initially and all that. Try referencing them this way:

<link type="text/css" href='@Url.Content("~/Content/ui-lightness/jquery-ui-1.8.24.custom.css")' rel="stylesheet" />
<script type="text/javascript" src='@Url.Content("~/Scripts/jquery-1.8.2.min.js")'></script>
<script type="text/javascript" src='@Url.Content("~/Scripts/jquery-ui-1.8.24.custom.min.js")'></script>

Using Url.Content will resolve your URLs correctly.