0

这让我发疯了。我是一个 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 正在加载，因为它在运行时显示如下： Visual Studio 显示加载的脚本

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

4

2 回答 2

4

解决了！.

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

所以我的解决方法是@Scripts.Render("~/bundles/jquery")从文件底部附近删除该行，将我的行留在顶部。奇迹般有效。

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

于 2012-09-16T08:05:16.143 回答
0

这样做是在考虑性能的情况下完成的。而不是改变位置

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

请按照以下步骤操作。

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

@RenderSection("scripts", false)

那么在你看来

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

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

于 2013-08-23T15:46:41.820 回答