Правильный способ использования JQuery при использовании MasterPages в ASP.NET?

У меня нет проблем при использовании JQuery на странице aspx без главной страницы, но когда я пытаюсь использовать его на страницах с главной страницей, это не работает, поэтому я в конечном итоге помещаю файлы jquery и другие script на странице вместо мастера. Теперь, если у меня 10 страниц, я делаю это для всех 10, что, как я знаю, неверно. В приведенной ниже примерной странице образца, где бы я поместил файлы script.

<html>
<head runat="server">
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <asp:ContentPlaceHolder ID="ContentPanel" runat="server">
    </asp:ContentPlaceHolder>            
</body>
</html>

Недавно я использовал плагин fancybox, а то, что я сделал, вместо того, чтобы помещать сценарии jquery script и fancybox на главную страницу, потому что я разочаровался в том, чтобы заставить его работать, я просто положил его на страницу, где мне нужен script для запуска, особенно внизу, перед закрытием asp: Content. Конечно, теперь у меня проблема, если я хотел использовать плагин fancybox на других страницах, я бы поставил jquery script и fancybox script на все 5 страниц, а не только на главную страницу. Когда вы работаете с masterpages, где все идет, используя мой пример выше?

Ответы

Ответ 1

Вы должны объявить свои основные сценарии jQuery на главной странице, как обычно:

<head runat="server">
  <link href="/Content/Interlude.css" rel="Stylesheet" type="text/css" />
  <script type="text/javascript" src="/Scripts/jquery-1.3.2.min.js"></script>
  <asp:ContentPlaceHolder ID="head" runat="server">
  </asp:ContentPlaceHolder>
</head>

И тогда любые специфичные для JS файлы могут быть загружены в элементы управления Content, которые ссылаются на Head ContentPlaceholder.

Однако лучшим вариантом было бы изучить ScriptManager и ScriptManagerProxy - это может предоставить вам гораздо больше контроля над тем, как ваши JS файлы будут обслуживаться клиенту.

Итак, вы разместите элемент управления ScriptManager на своей главной странице и добавьте ссылку на основной код jQuery в следующем:

<body>
  <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
      <Scripts>
        <asp:ScriptReference Path="/Scripts/jquery-1.3.2.min.js" />
      </Scripts>
    </asp:ScriptManager>

Затем на вашей странице, для которой требуются некоторые пользовательские JS файлы или плагин jQuery, вы можете:

<asp:Content ID="bodyContent" ContentPlaceholderID="body">
  <asp:ScriptManagerProxy ID="ScriptManagerProxy1" runat="server">
      <Scripts>
        <asp:ScriptReference Path="/Scripts/jquery.fancybox-1.2.1.pack.js" />
      </Scripts>
  </asp:ScriptManagerProxy>

ScriptManager позволяет вам делать такие вещи, как управление, где на сценариях страницы отображается LoadScriptsBeforeUI (или еще лучше, после установки это для False).

Ответ 2

Я использую этот метод.

<script type="text/javascript" language="javascript" src='<%=ResolveUrl("~/scripts/jquery.js") %>' ></script>

Просто поместите его над тегом...

<asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>

Ответ 3

Хорошо использовать другой контент-сайт для вашего script. Это должно выглядеть так.

<script type="text/javascript" src="myscript.js" />
<asp:ContentPlaceHolder ID="ScriptContent" runat="server">

</asp:ContentPlaceHolder>

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

О, еще одна вещь, убедитесь, что jQuery, а затем FancyBox загрузится до того, что у вас есть другие js, или нет, это не сработает. Загрузка Javascript в том порядке, в котором он был вызван, сначала нужно загрузить jQuery!

Ответ 4

Это будет работать внутри главной страницы:

Для Script файла:

<script type="text/javascript" src="<%= ResolveUrl("~/script/scriptFile.min.js") %>"></script>

Для файла CSS:

<link rel="stylesheet" href="~/styles/CssFile.min.css" runat="server" />

Дополнительные примечания:

  • Используйте мини-версии, насколько это возможно (FileName.min.js) и (FileName.min.css), чтобы уменьшить время загрузки и улучшить SEO.
  • Поместите CSS перед </head> и Script перед </body> в повысить производительность и улучшить SEO.
  • Символ плитки (~) в пути автоматически будет разрешен для корня вашего веб-сайта.
  • Не забудьте использовать runat="server" только для таблицы стилей. Script не должен иметь runat="server", поскольку он уже использует серверные операторы <%= %>.
  • Вы можете использовать онлайн http://jscompress.com/ для сжатия вашего javascript и https://csscompressor.net/, чтобы сжать ваши файлы CSS.