2015-08-17 1 views
1

Мой обычный шаблон для моих сайтов должен был иметь один файл javascript для функциональности каждой страницы. И наличие главной страницы загружает необходимые файлы jQuery и jQuery UI.Как загрузить отдельный файл .js, который требует jQuery с ASP.NET 4.51?

Я только начал использовать ASP.NET 4.5 в VS2013 ... и у него отличная встроенная функция объединения/минимизации. Однако, когда я «добавляю» свои page.js в page.aspx ... он не может запустить, потому что «связанные» файлы javascript на главной странице (которые содержат jquery) загружаются после моего файла page.js.

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

Я также предполагаю, что это очень неэффективно, поскольку jquery будет пытаться связать события с объектами DOM, которых не существует (поскольку страницы page.js, page2.js, page4.js и т. Д. Будут загружены в комплект в то время как браузер находится на стр .3.js)

Каков правильный способ сделать это?

Другой вариант - исключить связывание, но я хотел бы воспользоваться единственным файлом js/css.

Мысли?

+1

Выбираете, где находится связанный файл? Возможно, вы можете просто включить 'bundle.js' в верхней части вашего тега' 'или в тег' '. – azium

+0

в предыдущих версиях ASP.NET, у него был раздел headcontent на странице site.master, но теперь есть только пространство содержимого. – jibboo

ответ

1

Ans 1) Когда JQuery приходит из пучка или непосредственно связан с главной страницей:

Вы можете использовать ContentPlaceHolder, чтобы сделать ваш page.js после ваших сгруппированных JS. Не забудьте добавить ContentPlaceHolder ниже строки пакета.

1) В вашей главной странице

<head runat="server"> 
    <meta charset="utf-8" /> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1" /> 
    <meta name="description" content="" /> 
    <meta name="author" content="" /> 
    <title></title> 

    <%: System.Web.Optimization.Scripts.Render("~/Bundles/js") %> 

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

2) В вашей странице

<asp:Content ID="Content1" ContentPlaceHolderID="cphPageJs" runat="server"> 
    <script src="/js/myPage.js"></script> 
</asp:Content> 

Ans 2) Когда JQuery оказывает из ScriptManager:

В этом случае вы необходимо использовать ScriptManagerProxy на своей странице содержимого. Убедитесь, что вы используете этот элемент управления в Content, а ContentPlaceHolder добавляется после ScriptManager в MasterPage.

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server"> 
    <asp:ScriptManagerProxy ID="smp" runat="server"> 
     <Scripts> 
      <asp:ScriptReference Path="~/js/myTest.js" /> 
     </Scripts> 
    </asp:ScriptManagerProxy> 
</asp:Content> 
+0

Привет, Джиббу, пожалуйста, отметьте, считаете ли вы, что это ответ. Благодарю. – NVyas

+0

Я думаю, вы забыли приложить что-то? – NVyas

+0

NiraVyas - см. Мой другой комментарий/ответ (размещен как отдельный ответ выше или ниже) – jibboo

0

Таким образом, после добавления секции HeadContent в нижней части моего тега, оказывается, что файл jquery.js визуализируется с ScriptManager вместо пучка (даже если оно зарегистрировано в BundleConfig.cs)

См. Ниже, как Scriptmanager по умолчанию помещается в тег. Могу ли я переместить это в голову? Является ли этот по умолчанию asp.net site.master макетом? Я не могу поверить, что другие не столкнулись с этой проблемой.

Итак, мой файл page.js теперь находится на выходе headcontent под файлом связки модернизатора (в котором содержится кто знает, что, поскольку кажется, что много js-файлов по-прежнему отображается по строкам от scriptmanager). Однако Scriptmanager помещает jquery под мой вывод headcontent.

<head runat="server"> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
    <title>Website Title - <%: Page.Title %></title> 

    <asp:PlaceHolder runat="server"> 
     <%: Scripts.Render("~/bundles/modernizr") %> 
    </asp:PlaceHolder> 
    <webopt:bundlereference runat="server" path="~/Content/css" /> 
    <asp:ContentPlaceHolder ID="HeadContent" runat="server"> 
    </asp:ContentPlaceHolder> 
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" /> 

</head> 
<body> 
    <form runat="server"> 
     <asp:ScriptManager runat="server"> 
      <Scripts> 
       <%--To learn more about bundling scripts in ScriptManager see http://go.microsoft.com/fwlink/?LinkID=301884 --%> 
       <%--Framework Scripts--%> 
       <asp:ScriptReference Name="MsAjaxBundle" /> 
       <asp:ScriptReference Name="jquery" /> 
       <asp:ScriptReference Name="bootstrap" /> 
       <asp:ScriptReference Name="respond" /> 
       <asp:ScriptReference Path="~/Scripts/site.js" /> 
       <asp:ScriptReference Name="WebForms.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebForms.js" /> 
       <asp:ScriptReference Name="WebUIValidation.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebUIValidation.js" /> 
       <asp:ScriptReference Name="MenuStandards.js" Assembly="System.Web" Path="~/Scripts/WebForms/MenuStandards.js" /> 
       <asp:ScriptReference Name="GridView.js" Assembly="System.Web" Path="~/Scripts/WebForms/GridView.js" /> 
       <asp:ScriptReference Name="DetailsView.js" Assembly="System.Web" Path="~/Scripts/WebForms/DetailsView.js" /> 
       <asp:ScriptReference Name="TreeView.js" Assembly="System.Web" Path="~/Scripts/WebForms/TreeView.js" /> 
       <asp:ScriptReference Name="WebParts.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebParts.js" /> 
       <asp:ScriptReference Name="Focus.js" Assembly="System.Web" Path="~/Scripts/WebForms/Focus.js" /> 
       <asp:ScriptReference Name="WebFormsBundle" /> 

       <%--Site Scripts--%> 
      </Scripts> 
     </asp:ScriptManager> 
+0

Я обновил свой ответ выше, я думаю, что Ans 2 - ваше решение. – NVyas