jquery - 如何在 MVC5 View 中使用 jquery Accordion

Question

我尝试在我的 MVC5 View 中使用 #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

很明显，您对加载依赖项的顺序有疑问。为什么要将这些包含在 View 中？您应该将它们放入捆绑配置中。将这些链接放在正文中会使浏览器在页面完成加载之前加载 js 库，并且会出现很多问题 - 捆绑配置可以防止这种情况发生。

打开文件~/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"));

然后使“MyCustomJS.js”包含:

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

不要陷入将杂散的 JavaScript 放入 View 的陷阱，因为当您使用 BundleConfig 时，它实际上会读取所有内容并在将其发送到浏览器之前将其缩小，然后将其输出到页面底部。将其放入 View 中意味着它将在渲染缩小的 javascript 之前读取