asp.net의 마스터 페이지 및 사용자 정의 컨트롤에 자바 스크립트 및 CSS 포함하기

Question

Page_Load 이벤트의 마스터 페이지 및 사용자 컨트롤 뒤에있는 코드에 js 및 css를 포함하려고합니다.

하지만 사용자 컨트롤의 Page_Load가 마스터 페이지의 Page_Load보다 먼저로드되기 때문에 js가 깨졌습니다. 사이트 전체에서 내 마스터 페이지에 사용되는 jquery 라이브러리를 포함하지만 사용자 정의 컨트롤에 사용되는 스크립트는 사용자 정의 컨트롤에만 포함됩니다. 문제는 사용자 컨트롤 js 스크립트가 jquery 기능을 사용한다는 것입니다 (실행해야 할 때). 그러나 실행하려고하면 jquery 라이브러리가 아직로드되지 않아 중단됩니다. Anwyays,이 초조 한 혼란을 피할 방법이 있을까요?

나는이 코드를 사용하여 내 코드에 js를 포함시킵니다. relativeResolvedPath 기본적 때 ResolveUrl (URL)

HtmlGenericControl js = new HtmlGenericControl("script"); 
    js.Attributes.Add("type", "text/javascript"); 
    js.Attributes.Add("src", relativeResolvedPath); 
    Page.Header.Controls.Add(js); 

Answer 1

마스터 페이지에서 Page_Init을 사용하면 자식 페이지 및 UserControl Page_Load 이벤트보다 먼저 코드를 실행할 수 있습니다.

간혹 "소스보기"를 온전하게 수행하는 것을 잊지 마세요. 당신은 물건들이 당신이 기대하는 순서대로 응답에 들어가는 지 확인해야합니다.

UserControls에서 사용되는 클라이언트 스크립트는 응답이 사용자 에이전트에 전송 될 때까지 실행되지 않으므로 jQuery 라이브러리가 응답의 앞부분에 포함되어 있으면 확인해야합니다. 보내는 클라이언트 코드와 서버 코드가 섞여 있지 않으면 실제로는 수명주기 문제가 아닙니다.

내 MasterPage

<link rel="shortcut icon" href="<%#ResolveUrl("~/favicon.ico") %>" /> 
    <script type="text/javascript"> 
     var applicationRoot = "<%# webController.AppUrl %>"; 
    </script> 
    <asp:Literal ID="litJqueryMinified" runat="server" /><asp:PlaceHolder id="phjQuery" runat="server"><script src="Script/jquery-1.3.2.js" type="text/javascript"></script></asp:PlaceHolder> 
    <asp:Literal ID="litJqueryUIMinified" runat="server" /><asp:PlaceHolder id="phjQueryUI" runat="server"><script src="Script/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script></asp:PlaceHolder> 
    <script src="<%#ResolveUrl("~/Script/jquery.fancybox-1.2.1.pack.js") %>" type="text/javascript"></script> 
    <script src="<%#ResolveUrl("~/Script/jquery.maskedinput-1.2.2.min.js") %>" type="text/javascript"></script> 
    <script src="<%#ResolveUrl("~/Script/jquery.cycle.all.min.js") %>" type="text/javascript"></script> 

의 머리에서이 있고 코드 숨김에서이 ​​:

 // Swap the jQuery inlcude for the minified version 
     phjQuery.Visible = false; 
     phjQueryUI.Visible = false; 
     string jQueryAddress = currentSettings != null && currentSettings["jQueryLocation"] == "local" ? ResolveUrl("Script/jquery-1.3.2.min.js") : "https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"; 
     string jQueryUIAddress = currentSettings != null && currentSettings["jQueryLocation"] == "local" ? ResolveUrl("Script/jquery-ui-1.7.2.custom.min.js") : "https://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"; 
     litJqueryMinified.Text = "<script src=\"" + jQueryAddress + "\" type=\"text/javascript\"></script>"; 
     litJqueryUIMinified.Text = "<script src=\"" + jQueryUIAddress + "\" type=\"text/javascript\"></script>"; 

이 날이 축소 된 또는 생산에 구글에 의해 호스팅 가질 수 있지만, 사용 dev에 완전한 버전 intellisense와 함께.

이 때 ResolveUrl이 일을 얻을 수 있도록하여 Page_Load에서 이것을 잊지 마세요 :이 도움이

  Page.Header.DataBind(); 

희망을. :)

Answer 2

우선이다, Page.Controls.Add는 HTML 문서에서 임의의 장소에서 스크립트 블록을 추가합니다. 실제로 헤더 파일이나 페이지 하단에 스크립트 파일을 추가해야합니다 (온라인 검색은 UI 성능 향상을 위해 페이지의 맨 아래가 좋음을 알려줍니다).

자바 스크립트 파일의 올바른 순서를 유지하기 위해 ASP.Net AJAX Script Loader과 Script Manager을 조사했습니다.

Script Manager은 스크립트를 올바른 순서로 추가하면 작동합니다. 문제를 더 잘 해결할 수 있습니다. AJAX Script Loader

Answer 3

ScriptManager를 사용하십시오.그것은 매우 쉽습니다 :이 모든 페이지/컨트롤에

<asp:ScriptManager ID="MasterPageScriptManager" runat="server" /> 

그리고 스크립트 관리자 프록시 :

<asp:ScriptManager ID="SM1" runat="server"> 
    <Scripts> 
    <asp:ScriptReference Name="Script.js" /> 
    </Scripts> 
</asp:ScriptManager> 

가 더욱 쉽게, 당신은 당신의 masterpage에 빈 스크립트 관리자 컨트롤을 추가하려면 사용자 정의 스크립트로드 됨 :

<asp:ScriptManagerProxy ID="SM1" runat="server"> 
    <Scripts> 
    <asp:ScriptReference Name="Script.js" /> 
    </Scripts> 
</asp:ScriptManagerProxy> 

편집 :이게 당신이 찾고있는 것이 아니라면, 사과드립니다. 당신은 단지 스크립트의 적절한 위치를 찾기 위해 노력하는 것 같습니다. 이러한 경우 당신이 할 수있는 또 다른 것은 당신의 masterpage에 jQuery를하고 향후 스크립트를 포함하는 것입니다 :

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

난 당신이 동적으로 자바 스크립트 코드를 작성하지 않는 한 코드 숨김에서 자바 스크립트를로드하지 않는 것이 좋습니다 것

을, 또는 응용 프로그램을 작성하여 다른 사용자에게 공개하여 UI를 조정할 수 있으며 해당 기능이 변경되는 것을 원하지 않습니다. 내 코드를 수정

string myScript = "$(document).ready(function() { alert('message');});"; 
Page.ClientScript.RegisterClientScriptBlock(this.Page.GetType(), "alerting", myScript, true);