我在将JqueryUi安装到我的mvc 5应用程序时遇到了一些麻烦。我必须做得对，因为我可以创造这个：
<div>
<label for="date">Select a date:</label> @Html.JQueryUI().Datepicker("date")
</div>
我一直在关注本指南： http://jqueryuihelpers.apphb.com/Docmo/GettingStarted
我得到的只是一个空场...当我点击它时，我应该得到一个日期选择器。这是我的_Layout，我尝试将jquery渲染到底部：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - My ASP.NET Application</title>
<link rel="stylesheet" href="~/Content/css/bootstrap.css" type="text/css" media="screen">
<link rel="stylesheet" href="~/Content/css/responsive.css" type="text/css" media="screen">
<link rel="stylesheet" href="~/Content/css/style.css" type="text/css" media="screen">
<link rel="stylesheet" href="~/Content/css/touchTouch.css" type="text/css" media="screen">
<link rel="stylesheet" href="~/Content/css/kwicks-slider.css" type="text/css" media="screen">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300' rel='stylesheet' type='text/css'>
</head>
<body>
@*<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
@Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>@Html.ActionLink("Home", "Index", "Home")</li>
<li>@Html.ActionLink("About", "About", "Home")</li>
<li>@Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>
@Html.Partial("_LoginPartial")
</div>
</div>
</div>*@
<header>
<div class="container clearfix">
<div class="row">
<div class="span12">
<div class="navbar navbar_">
<div class="container">
<h1 class="brand brand_"><a href="@Url.Action("Index", "Home")"><img alt="" src="~/Content/img/ae.png"> </a></h1>
<a class="btn btn-navbar btn-navbar_" data-toggle="collapse" data-target=".nav-collapse_">Menu <span class="icon-bar"></span> </a>
<div class="nav-collapse nav-collapse_ collapse">
<ul class="nav sf-menu sf-js-enabled">
<li><a href="@Url.Action("Index", "Home")">Hem</a></li>
<li class="active"><a href="@Url.Action("Folio", "Home")">Foton</a></li>
<li><a href="index-4.html">Contact</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
@RenderBody()
<!--============================== footer =================================-->
<footer>
<div class="container clearfix">
<ul class="list-social pull-right">
<li><a class="icon-1" href="#"></a></li>
<li><a class="icon-2" href="#"></a></li>
<li><a class="icon-3" href="#"></a></li>
<li><a class="icon-4" href="#"></a></li>
</ul>
</div>
</footer>
<script type="text/javascript" src="~/Content/js/jquery.js"></script>
<script type="text/javascript" src="~/Content/js/jquery.preloader.js"></script>
<script type="text/javascript" src="~/Content/js/superfish.js"></script>
<script type="text/javascript" src="~/Content/js/jquery.flexslider-min.js"></script>
<script type="text/javascript" src="~/Content/js/jquery.kwicks-1.5.1.js"></script>
<script type="text/javascript" src="~/Content/js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="~/Content/js/touchTouch.jquery.js"></script>
<script type="text/javascript">if ($(window).width() > 1024) { document.write("<" + "script src='js/jquery.preloader.js'></" + "script>"); } </script>
<script>
jQuery(window).load(function () {
$x = $(window).width();
if ($x > 1024) {
jQuery("#content .row").preloader();
}
jQuery('.magnifier').touchTouch();
jQuery('.spinner').animate({ 'opacity': 0 }, 1000, 'easeOutCubic', function () { jQuery(this).css('display', 'none'); });
});
</script>
@*@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)*@
@Styles.Render("~/Content/css")
@Styles.Render("~/Content/themes/base/css")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryui")
</body>
</html>
答案 0 :(得分：0)
@Scripts.Render("~/bundles/jqueryui")只会尝试呈现一个名为~/bundles/jqueryui的捆绑包，该捆绑包在您的\App_Start\BundleConfig.cs 中定义，但会将其呈现在您告知的任何位置。
它将在body元素的末尾呈现，但它会在之前使用，因此会失败。
只需将脚本放在页面的上方，然后再使用它们：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - My ASP.NET Application</title>
<link rel="stylesheet" href="~/Content/css/bootstrap.css" type="text/css" media="screen">
<link rel="stylesheet" href="~/Content/css/responsive.css" type="text/css" media="screen">
<link rel="stylesheet" href="~/Content/css/style.css" type="text/css" media="screen">
<link rel="stylesheet" href="~/Content/css/touchTouch.css" type="text/css" media="screen">
<link rel="stylesheet" href="~/Content/css/kwicks-slider.css" type="text/css" media="screen">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300' rel='stylesheet' type='text/css'>
</head>
<body>
@*<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
@Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>@Html.ActionLink("Home", "Index", "Home")</li>
<li>@Html.ActionLink("About", "About", "Home")</li>
<li>@Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>
@Html.Partial("_LoginPartial")
</div>
</div>
</div>*@
<header>
<div class="container clearfix">
<div class="row">
<div class="span12">
<div class="navbar navbar_">
<div class="container">
<h1 class="brand brand_"><a href="@Url.Action("Index", "Home")"><img alt="" src="~/Content/img/ae.png"> </a></h1>
<a class="btn btn-navbar btn-navbar_" data-toggle="collapse" data-target=".nav-collapse_">Menu <span class="icon-bar"></span> </a>
<div class="nav-collapse nav-collapse_ collapse">
<ul class="nav sf-menu sf-js-enabled">
<li><a href="@Url.Action("Index", "Home")">Hem</a></li>
<li class="active"><a href="@Url.Action("Folio", "Home")">Foton</a></li>
<li><a href="index-4.html">Contact</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
@RenderBody()
<!--============================== footer =================================-->
<footer>
<div class="container clearfix">
<ul class="list-social pull-right">
<li><a class="icon-1" href="#"></a></li>
<li><a class="icon-2" href="#"></a></li>
<li><a class="icon-3" href="#"></a></li>
<li><a class="icon-4" href="#"></a></li>
</ul>
</div>
</footer>
<script type="text/javascript" src="~/Content/js/jquery.js"></script>
<script type="text/javascript" src="~/Content/js/jquery.preloader.js"></script>
<script type="text/javascript" src="~/Content/js/superfish.js"></script>
<script type="text/javascript" src="~/Content/js/jquery.flexslider-min.js"></script>
<script type="text/javascript" src="~/Content/js/jquery.kwicks-1.5.1.js"></script>
<script type="text/javascript" src="~/Content/js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="~/Content/js/touchTouch.jquery.js"></script>
<script type="text/javascript">if ($(window).width() > 1024) { document.write("<" + "script src='js/jquery.preloader.js'></" + "script>"); } </script>
@Styles.Render("~/Content/css")
@Styles.Render("~/Content/themes/base/css")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryui")
// Call this and any other scripts after including the scripts
@RenderSection("scripts", required: false)
<script>
jQuery(window).load(function () {
$x = $(window).width();
if ($x > 1024) {
jQuery("#content .row").preloader();
}
jQuery('.magnifier').touchTouch();
jQuery('.spinner').animate({ 'opacity': 0 }, 1000, 'easeOutCubic', function () { jQuery(this).css('display', 'none'); });
});
</script>
</body>
</html>