$ не определен - asp.net MVC 4

Question

С помощью этого кода, приведенного ниже, я получаю сообщение об ошибке: $ is not defined. Мой вопрос: как это возможно?

... 
<script type="text/javascript"> 
    $(document).ready(function() { 
     $(function() { 
      $('#cb').click(function() { 
       if (this.checked) { 
        $('div#div').slideDown(); 
       } else { 
        $('div#div').slideUp(); 
       } 
      }); 
     }) 
    }); 
</script> 

@section Scripts { 
    @Scripts.Render("~/bundles/jqueryval") 
} 

@Scripts.Render("~/Scripts/jquery-1.7.1.min.js") 
@Scripts.Render("~/Scripts/jquery-ui-1.8.20.min.js") 

Как мы можем видеть, что груз правильно все скрипты:

<script src="/Scripts/jquery-1.7.1.min.js"></script> 
<script src="/Scripts/jquery-ui-1.8.20.min.js"></script> 
<script src="/Scripts/jquery-1.7.1.js"></script> 
<script src="/Scripts/jquery.unobtrusive-ajax.js"></script> 
<script src="/Scripts/jquery.validate.js"></script> 
<script src="/Scripts/jquery.validate.unobtrusive.js"></script> 

Как решить это?

Answer 1

Вы разместили свой скрипт в теле зрения, а не внутри секции Scripts, который является, где она принадлежит и после ссылки JQuery:

@section Scripts { 
    @Scripts.Render("~/Scripts/jquery-1.7.1.min.js") 
    @Scripts.Render("~/Scripts/jquery-ui-1.8.20.min.js") 
    @Scripts.Render("~/bundles/jqueryval") 

    <script type="text/javascript"> 
     $(function() { 
      $('#cb').click(function() { 
       if (this.checked) { 
        $('div#div').slideDown(); 
       } else { 
        $('div#div').slideUp(); 
       } 
      }); 
     }); 
    </script> 
} 

Кроме того, чтобы избежать ссылки JQuery дважды (как в вашем) дважды проверьте, не включили ли вы его в комплект поставки _Layout.

И последнее замечание: поскольку по умолчанию скрипты включены в конец DOM, перед тегом закрывающего тега, вам не нужно обертывать ваш скрипт в $(document).ready просто потому, что к тому времени, когда он выполнит DOM уже загружен. Ваш код еще хуже, потому что вы его дважды. Имейте в виду, что $(function() { ... }); эквивалентен $(document).ready(function() { ... });, и в вашем случае вы вложили 2 из этих вещей, когда вам действительно не нужны какие-либо из них.

Итак:

@section Scripts { 
    @Scripts.Render("~/Scripts/jquery-1.7.1.min.js") 
    @Scripts.Render("~/Scripts/jquery-ui-1.8.20.min.js") 
    @Scripts.Render("~/bundles/jqueryval") 

    <script type="text/javascript"> 
     $('#cb').click(function() { 
      if (this.checked) { 
       $('div#div').slideDown(); 
      } else { 
       $('div#div').slideUp(); 
      } 
     }); 
    </script> 
} 

Answer 2

Вы включаете jquery дважды.

<script src="/Scripts/jquery-1.7.1.min.js"></script> 
<script src="/Scripts/jquery-ui-1.8.20.min.js"></script> 
<script src="/Scripts/jquery-1.7.1.js"></script> 

Первый и последний файлы js совпадают, за исключением того, что один из них минимизирован, а другой, вероятно, нет. Удалите неминифицированный, и он должен работать для вас.

Answer 3

Вы не включаете jQuery JS до конца страницы, но вы пытаетесь использовать $ задолго до того, как вы включили его.