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

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

39 голосов
/ 08 апреля 2009

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

<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 и сценарии fancybox на главную страницу, я использовал вместо этого сценарий jquery и разочаровался, заставив его работать. конкретно внизу, перед закрытием asp: Content. Конечно, теперь у меня есть проблема: если бы я хотел использовать плагин fancybox на других страницах, я бы поместил сценарий jquery и сценарий fancybox на все 5 страниц, а не только на главную страницу. При работе с мастер-страницами, где все идет, используя мой пример выше?

Ответы [ 4 ]

54 голосов
/ 08 апреля 2009

Вы бы объявили свои основные скрипты 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).

8 голосов
/ 11 февраля 2010

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

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

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

<asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
2 голосов
/ 08 апреля 2009

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

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

</asp:ContentPlaceHolder>

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

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

0 голосов
/ 12 мая 2015

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

Для файла сценария: 

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

Для файла CSS: 

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

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

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