Где следует разместить блок сценария с кодом jquery на главной странице ASP.NET MVC?
Начало работы с jquery и проблема с получением примера типа hello world для asp.net mvc. Я получаю сообщение об ошибке выполнения "объект ожидается" при попытке загрузить страницу с помощью этого сценария.
A. Где следует размещать теги сценария на главной странице? Б. Что я делаю не так? На моей странице определенно есть элементы "а"?
<script src = "../Scripts/jquery-1.2.6.min.js" type = "text/javascript"></script>
<script src = "../Scripts/jquery.corner.js" type = "text/javascript"></script>
<script type = "text/javascript">
$(document).ready(function() {
$("a").click(function(event) {
alert("Thanks for visiting!");
});
});
</script>
Ответы 4
Хм ...
Чтобы ответить на ваш первый вопрос: они должны быть помещены в элемент <head>.
Кроме того, обычно я использую 'привязать' метод при погружении событий в DOM (как будто вы пытаетесь это сделать).
Итак, код будет выглядеть так:
$(document).ready(function()
{
// Bind each link to a handler:
$("a").bind('click dblclick', function(event)
{
alert('click');
})
});
Также несколько советов по дизайну (поскольку вы работаете с чем-то близким мне (ASP.NET MVC с jQuery):
Добавьте дополнительный ContentPlaceHolder внизу элемента <head> главной страницы. Это позволит вам запускать специфичный для страницы javascript в нужном месте: в разделе «заголовок» страницы, и это позволит вам включать в себя специфичный для страницы javascript.
Это будет выглядеть примерно так:
<asp:ContentPlaceHolder ID = "HeadContent" runat = "server" />
</head>
Почему это полезно? Я вам скажу: этот плагин jQuery с закругленными углами, который вы используете, можно использовать только на нескольких страницах - зачем включать его на каждую страницу?
Я согласен с Дэном на добавление заполнителя контента для ссылки в скриптах. Однако голова обычно не лучшее место для размещения вашего JavaScript с точки зрения производительности. Лучшее место внизу страницы. Таким образом, ваш HTML может загружаться раньше, чем ваш JavaScript. См. Совет Yahoo YSlow. Однако ваш код должен по-прежнему работать в разделе заголовка.
Мне нравится помещать большую часть JavaScript моего сайта в один файл и связывать его со всеми страницами. Если он станет очень большим, вы можете разделить его на несколько файлов. Это использует кеширование браузера.
Что же не так с кодом jQuery. Я не уверен. Выглядит довольно правильно. Единственное, что меня интересует, это параметр события. Попробуйте убрать это вообще. Я знаю, что функциям разрешен параметр, но я обычно использую вместо этого "this". Также попробуйте переименовать параметр.
Б) Я проверил ваш встроенный скрипт на странице быстрого тестирования, и он работает нормально, поэтому я советую использовать Fire Fox с установленным плагином FireBug для поиска проблемы:
- На вкладке «Сценарий» Firebug используйте окно «Наблюдение» справа, чтобы вставить и проверить части вашего скрипта и посмотреть, что они возвращают.
- Я бы начал с помещения
$в окно просмотра и проверки, распознается ли он какfunction(): возможно, jQuery не связан должным образом - Затем поместите
$("a")в окно просмотра и проверьте, имеет ли возвращаемый набор правильный номер. элементов, соответствующих селектору "a" в наборе - Продолжайте запускать части скрипта, пока не обнаружите что-то не так
Главная страница обычно хранится в /Views/Shared/Site.Master, а скрипты - в / Scripts, поэтому они:
<script src = "../Scripts/jquery-1.2.6.min.js" type = "text/javascript"></script>
<script src = "../Scripts/jquery.corner.js" type = "text/javascript"></script>
должно быть
<script src = "../../Scripts/jquery-1.2.6.min.js" type = "text/javascript"></script>
<script src = "../../Scripts/jquery.corner.js" type = "text/javascript"></script>
но я бы предложил использовать помощника:
public static class Helper
{
private static string ScriptsRoot = "~/scripts/";
public static string ScriptUrl (string scriptFile)
{
return VirtualPathUtility.ToAbsolute (ScriptsRoot + scriptFile);
}
}
А затем ссылку на ваш скрипт следующим образом:
<script type = "text/javascript" src = "<%= Helper.ScriptUrl("jquery-1.2.6.min.js") %>"></script>
<script type = "text/javascript" src = "<%= Helper.ScriptUrl("jquery.corner.js") %>"></script>
Хороший отзыв о подсказке YSlow. Я не понимал, что скрипты блокируют параллельную загрузку.