Question

这让我疯了。我是一个JQuery noob，这是我第一次使用它。我在jQuery-ui网站上关注了这个例子，但是我的脚本片段出错了：

在$("#tabs").tabs();行错误：0x800a01b6 - Microsoft JScript运行时错误：对象不支持属性或方法＆＃39;标签＆＃39;

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

<!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 shows the loaded scripts

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

Answer 1

解决了！

线索在我的屏幕剪辑中，你可以看到jquery-1.7.1加载了两次。 Microsoft模板项目将jquery包直接呈现在_Layout.cshtml页面的底部。为什么？我不知道 - 但我忽略了它。所以我继续将它添加到页面顶部，以及jquery-ui。似乎jquery的第二次渲染消灭了jquery-ui。

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

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

Answer 2

已经完成了保持性能的考虑。而不是改变位置

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

按照以下步骤操作。

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

@RenderSection("scripts", false)

然后在你的视图中

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

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

为什么我的JQuery-UI选项卡控件不能正确呈现？

2 个答案: