为什么我的 JQuery-UI 选项卡控件无法正确呈现？答案

【问题标题】：Why won't my JQuery-UI tabs control render correctly?为什么我的 JQuery-UI 选项卡控件无法正确呈现？
【发布时间】：2012-09-16 07:25:49
【问题描述】：

这让我发疯了。我是一个 JQuery 菜鸟，这是我第一次使用它。我已经按照 jQuery-ui 网站上的示例进行操作，但是我的脚本片段给出了错误：

在线$("#tabs").tabs(); 错误：0x800a01b6 - Microsoft JScript 运行时错误：对象不支持属性或方法“选项卡”

所以，这就是我正在做的事情。我正在开发一个 ASP.NET MVC4 Web 应用程序。 jQuery 脚本和样式位于站点的默认包中，并在我的 _Layout.cshtml '母版页'中呈现，如下所示：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>@ViewBag.Title - My ASP.NET MVC Application</title>
        <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
        <meta name="viewport" content="width=device-width" />
        @Styles.Render("~/Content/css")
        @Styles.Render("~/Content/themes/base/css")
        @Scripts.Render("~/bundles/modernizr")
        @Scripts.Render("~/bundles/jquery")
        @Scripts.Render("~/bundles/jqueryui")
    </head>

这是我的观点：

@using Tigra.eStore.BusinessLogic.DomainObjects
@model Tigra.eStore.Storefront.Models.ProductDetailsViewModel

@{
    ViewBag.Title = "Details";
}

<h2>Details</h2>

<fieldset>
    <legend>@Model.Product.Name</legend>
    <div class="display-field">
        @Html.DisplayFor(model => model.Product.Name)
    </div>
</fieldset>
<p>
    @Html.ActionLink("Add to Cart", "Add", "ShoppingCart", new {id = Model.Product.Id}, new {})
    @Html.ActionLink("Back to List", "Index")
</p>

<script>
    $(function() {
        $("#tabs").tabs();
    });
</script>

<div class="descriptors">
    <div id="tabs">
        <ul>
            @foreach (ProductDescriptor descriptor in Model.Product.ProductDescriptors)
            {
                <li><a href="#tabs-@descriptor.SequenceNumber">@descriptor.Title</a></li>
            }
        </ul>
        @foreach (ProductDescriptor descriptor in Model.Product.ProductDescriptors)
        {
            <div id="tabs-@descriptor.SequenceNumber">
                <p>@descriptor.Description</p>
            </div>
        }
    </div>
</div>

我很确定 jQuery-ui 正在加载，因为它在运行时显示如下：

它必须是一些简单的东西 - 对不起，如果这很明显，但正如我所说，我是这个东西的菜鸟。你能看出我做错了什么吗？

【问题讨论】：

如果 jqueryUI 真的被加载了，首先要测试一下：stackoverflow.com/a/2263412/617373，第二次检查你是否包含了所有需要的 js/css，在这个例子中查看源代码jsbin.com/ocecu5

标签： javascript asp.net-mvc jquery-ui razor asp.net-mvc-4

【解决方案1】：

解决了！ .

线索在我的屏幕截图中，你可以看到 jquery-1.7.1 被加载了两次。 Microsoft 模板项目在 _Layout.cshtml 页面的底部呈现 jquery 包。为什么？我不知道——但我忽略了它。所以我继续将它与 jquery-ui 一起添加到页面顶部。看来jquery的第二次渲染把jquery-ui抹杀了。

所以我的解决方法是从文件底部附近删除@Scripts.Render("~/bundles/jquery") 行，将我的行留在顶部。像魅力一样工作。

现在我想知道为什么微软把它放在底部？有什么想法吗？

【讨论】：

这里是：Query Script included at bottom of page in mvc 4 template
对于通过 Google 等在这里偶然发现的其他人来说，另一个原因是，如果您从默认 MVC 模板创建一个项目，然后从 NuGet 包管理器更新 jquery ui，那么您最终会得到一个项目，其中RegisterBundles 中的包名称是 ~/bundles/jquery-ui，但传递给 Scripts.Render 函数的包名称是 ~/bundles/jqueryui（即没有连字符）。

【解决方案2】：

这样做是为了考虑性能。而不是改变位置

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

按照以下步骤操作。

在@Scripts 之后的布局页面中，添加：

@RenderSection("scripts", false)

那么在你看来它

@section scripts{
 <script type="text/javascript>
 // view scriptt goes here
 </script> 
}

此部分可以在视图 html 之前或之后，但总是在之后呈现。

【讨论】：