Question

我尝试在我的MVC5视图中使用#accordion（jquery），即使我尝试了几种方法来添加对Jquery文件的引用，我收到此错误：

JavaScript runtime error: Object doesn't support property or method 'accordion'

这是我的观点：

@model CSAProject.Models.CustomerModel
    <script src="@Url.Content("~/Scripts/jquery-1.10.2.js")"    type="text/javascript"></script>

    <script src="@Url.Content("~/Content/jquery-ui.css")"  type="text/javascript"></script>

   <script src="@Url.Content("~/Scripts/jquery-ui.js")" type="text/javascript"></script>


 <style>

   body {
   font-family: "Trebuchet MS", "Helvetica", "Arial",  "Verdana", "sans-serif";
font-size: 62.5%;
  }
   </style>


    <script type="text/javascript">
      $(function () {
      $("#accordion").accordion();
  });
  </script>
  <div id="accordion">
  <h3 style="color:#009AE1">Customer Profile</h3>
 <div>
 test 
 </div>
 <h3 style="color:#009AE1">Payment</h3>
 <div>
 test2
</div>
<h3 style="color:#009AE1">Password</h3>
  <div>
  test3
  </div>
   </div>

我在这一行中遇到错误：

  $("#accordion").accordion();

Answer 1

很明显，您在加载依赖项的顺序方面存在问题。为什么要在视图中包含这些内容？您应该将它们放在捆绑配置中。将这些链接放在正文中会使浏览器在页面加载完成之前加载js库，并且很多问题 - bundle config会阻止它。

打开文件~/App_Start/BundleConfig.cs并将链接放在那里。这样，您可以确保以正确的顺序呈现所有依赖项：

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                             "~/Scripts/jquery-{version}.js",
                             "~/Scripts/jquery-ui-1.11.4.min.js",
                             "~/Scripts/MyApp/MyCustomJS.js"));

然后制作＆＃39; MyCustomJS.js＆＃39;含有：

$(function () {
      $("#accordion").accordion();
});

不要陷入将流浪javascript放入视图的陷阱，因为当您使用bundleconfig时，它实际上会读取所有内容并在将其发送到浏览器之前将其缩小，然后将其输出到页面底部。将它放在视图中意味着它将在缩小的javascript甚至呈现之前被读取

如何在MVC5 View中使用jquery手风琴

1 个答案: