부분보기에 JavaScript 파일 포함
부분보기 안에 javascript 파일을 포함하는 것이 가장 좋은 방법이 무엇인지 궁금합니다. 일단 렌더링되면 내 페이지의 html 중간에 js include 태그로 끝납니다. 내 관점에서 이것은 이것을하는 좋은 방법이 아닙니다. 그들은 head 태그에 속하므로 브라우저가 한 번에 html을 렌더링하는 것을 막아서는 안됩니다.
예 : 이 부분보기는 여러 페이지에서 사용되므로 'PictureGallery'부분보기 내에서 jquery picturegallery 플러그인을 사용하고 있습니다. 이 플러그인은이보기가 사용될 때만로드 되어야하며 각 부분보기가 사용하는 플러그인을 알 필요가 없습니다.
답변 해 주셔서 감사합니다.
이 질문과 매우 유사합니다. 사용자 컨트롤에서 JavaScript 라이브러리 연결
그 질문에 대한 답을 여기에 다시 게시하겠습니다.
나는 당신이 언급 한 정확한 이유 때문에 그것들을 부분 안에 넣지 말라고 분명히 조언 할 것입니다. 하나의 뷰가 동일한 js 파일에 대한 참조가있는 두 개의 부분을 가져올 가능성이 높습니다. 나머지 html을로드하기 전에 js를로드하는 성능 저하도 있습니다.
모범 사례에 대해 잘 모르지만 마스터 페이지 내에 일반적인 js 파일을 포함하도록 선택한 다음 특정 또는 적은 수의 뷰에 특정한 일부 추가 js 파일에 대해 별도의 ContentPlaceHolder를 정의합니다.
여기에 예제 마스터 페이지가 있습니다. 꽤 자명합니다.
<%@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %>
<head runat="server">
... BLAH ...
<asp:ContentPlaceHolder ID="AdditionalHead" runat="server" />
... BLAH ...
<%= Html.CSSBlock("/styles/site.css") %>
<%= Html.CSSBlock("/styles/ie6.css", 6) %>
<%= Html.CSSBlock("/styles/ie7.css", 7) %>
<asp:ContentPlaceHolder ID="AdditionalCSS" runat="server" />
</head>
<body>
... BLAH ...
<%= Html.JSBlock("/scripts/jquery-1.3.2.js", "/scripts/jquery-1.3.2.min.js") %>
<%= Html.JSBlock("/scripts/global.js", "/scripts/global.min.js") %>
<asp:ContentPlaceHolder ID="AdditionalJS" runat="server" />
</body>
Html.CSSBlock 및 Html.JSBlock은 분명히 내 자신의 확장이지만 다시 말하지만 그들이하는 일에 대해 설명이 필요합니다.
그런 다음 SignUp.aspx 뷰에서
<asp:Content ID="signUpContent" ContentPlaceHolderID="AdditionalJS" runat="server">
<%= Html.JSBlock("/scripts/pages/account.signup.js", "/scripts/pages/account.signup.min.js") %>
</asp:Content>
HTH, 찰스
추신. 다음은 js 파일 축소 및 연결에 대해 질문 한 후속 질문 입니다. 즉석에서 또는 빌드시 JS 연결 및 축소 -ASP.NET MVC
편집 : 다른 답변에서 요청 한대로 요청대로 .JSBlock (a, b) 구현
public static MvcHtmlString JSBlock(this HtmlHelper html, string fileName)
{
return html.JSBlock(fileName, string.Empty);
}
public static MvcHtmlString JSBlock(this HtmlHelper html, string fileName, string releaseFileName)
{
if (string.IsNullOrEmpty(fileName))
throw new ArgumentNullException("fileName");
string jsTag = string.Format("<script type=\"text/javascript\" src=\"{0}\"></script>",
html.MEDebugReleaseString(fileName, releaseFileName));
return MvcHtmlString.Create(jsTag);
}
그리고 마법이 일어나는 곳 ...
public static MvcHtmlString MEDebugReleaseString(this HtmlHelper html, string debugString, string releaseString)
{
string toReturn = debugString;
#if DEBUG
#else
if (!string.IsNullOrEmpty(releaseString))
toReturn = releaseString;
#endif
return MvcHtmlString.Create(toReturn);
}
페이지 하단에 스크립트를 넣는 이유는 조작을 시도하기 전에 dom이로드되었는지 확인하기 위해서입니다. 이것은 $ (document) .ready (callback); jQuery 메서드.
나는 임베디드 자바 스크립트를 html에 넣지 않는다는 견해를 공유한다. 대신 Html 도우미를 사용하여 서버 명령으로 사용할 빈 div를 만듭니다. 헬퍼 시그널은 Html.ServerData (String name, Object data);
이 ServerData 메서드를 서버에서 클라이언트로 보내는 지침에 사용합니다. div 태그는 깔끔하게 유지하고 "data-"속성은 유효한 html5입니다.
loadScript 명령의 경우 ascx 또는 aspx에서 다음과 같이 할 수 있습니다.
<% = Html.ServerData ( "loadScript", 새 {url : "pathTo.js"}) %>
또는 좀 더 깔끔해 보이는 다른 도우미를 추가하세요.
<% = Html.LoadScript ( "~ / path / to.js") %>
html 출력은 다음과 같습니다.
<div name = "loadScript"data-server = "인코딩 된 json 문자열">
그런 다음 모든 서버 데이터 태그를 찾을 수있는 jQuery 메서드가 있습니다. $ (tainedElement) .serverData ( "loadScript"); // 디코딩 된 json 객체의 배열과 같은 jQuery를 반환합니다.
클라이언트는 다음과 같이 보일 수 있습니다.
var script = $ (containingelement "). serverData ("loadScript ");
$ .getScript (script.url, function () {
// 스크립트가로드되었습니다. 이제 작업을 수행 할 수 있습니다.
});
이 기술은 ajax로드 콘텐츠 내에서로드해야하는 사용자 컨트롤 또는 스크립트에 적합합니다. 내가 작성한 버전은 캐싱 스크립트를 처리하는 데 좀 더 관련되어 있으므로 전체 페이지로드 당 한 번만로드되고 콜백 및 jQuery 트리거가 포함되어 준비가되면 연결할 수 있습니다.
누구든지이 전체 버전 (MVC에서 jQuery 확장까지)에 관심이 있다면이 기술을 더 자세히 보여 드리겠습니다. 그렇지 않으면-누군가가이 까다로운 문제에 접근하는 새로운 방법을 제공하기를 바랍니다.
오늘 저는 청구서에 완벽하게 맞는 나만의 솔루션을 만들었습니다. 좋은 디자인이든 아니든 여러분 모두가 결정해야하지만 어느 쪽이든 공유해야한다고 생각했습니다!
다음은 마스터 페이지에서이 작업을 수행 할 수있는 HtmlExtensions 클래스입니다.
<%=Html.RenderJScripts() %>
내 HtmlExtensions 클래스 :
public static class HtmlExtensions
{
private const string JSCRIPT_VIEWDATA = "__js";
#region Javascript Inclusions
public static void JScript(this HtmlHelper html, string scriptLocation)
{
html.JScript(scriptLocation, string.Empty);
}
public static void JScript(this HtmlHelper html, string scriptLocationDebug, string scriptLocationRelease)
{
if (string.IsNullOrEmpty(scriptLocationDebug))
throw new ArgumentNullException("fileName");
string jsTag = "<script type=\"text/javascript\" src=\"{0}\"></script>";
#if DEBUG
jsTag = string.Format(jsTag, scriptLocationDebug);
#else
jsTag = string.Format(jsTag, !string.IsNullOrEmpty(scriptLocationRelease) ? scriptLocationRelease : scriptLocationDebug);
#endif
registerJScript(html, jsTag);
}
public static MvcHtmlString RenderJScripts(this HtmlHelper html)
{
List<string> jscripts = html.ViewContext.TempData[JSCRIPT_VIEWDATA] as List<string>;
string result = string.Empty; ;
if(jscripts != null)
{
result = string.Join("\r\n", jscripts);
}
return MvcHtmlString.Create(result);
}
private static void registerJScript(HtmlHelper html, string jsTag)
{
List<string> jscripts = html.ViewContext.TempData[JSCRIPT_VIEWDATA] as List<string>;
if(jscripts == null) jscripts = new List<string>();
if(!jscripts.Contains(jsTag))
jscripts.Add(jsTag);
html.ViewContext.TempData[JSCRIPT_VIEWDATA] = jscripts;
}
#endregion
}
무슨 일이야?
위의 클래스는 컬렉션에 의해 저장되는 컬렉션에 자바 스크립트 링크를 추가하는 메서드로 HtmlHelper를 확장합니다 HtmlHelper.ViewContext.TempData. 마스터 페이지의 끝에 <%=Html.RenderJScripts() %>jscripts 컬렉션을 내부에 루프 HtmlHelper.ViewContext.TempData하고 출력으로 렌더링합니다.
그러나 단점이 있습니다. 스크립트를 추가하기 전에 스크립트를 렌더링하지 않도록해야합니다. 예를 들어 CSS 링크에 대해이 작업을 수행하려는 경우 <head>페이지 의 태그에 이를 배치해야 하고 htmlhelper가 링크를 추가하기 전에 출력을 렌더링 하므로 작동하지 않습니다 .
This seems like a similar (although not entirely) question. Is it bad practice to return partial views that contain javascript?
My preference will be to create a plugin.master page that inherits from your main Site.master. The idea is that you stuff these plugins into plugin.master and make the 8 or so pages that will use this partial view to inherit from plugin.master.
The preferred approach is to put scripts at the bottom, however, if you can't avoid that then it's reasonable to put them in the middle.
Browsers usually load the various page elements in parallel, however, while the browser is downloading the Javascript file, it won't download any other page elements in parallel until the Javascript is done downloading. This means that your images and what not will have to wait so it's generally considered better to move scripts at the bottom but if your script is small then I wouldn't worry about it.
hejdig.
Playing around with Aspnetmvc3 I decided, for now, to just include my javascript file in the partial
<script src="@Url.Content("~/Scripts/User/List.js")" type="text/javascript"></script>
This js file is then specific for my /user/List.schtml file.
/OF
The designers of MVC went through a lot of trouble to prevent us from using code-behinds, but by creating a file named <viewname>.aspx.cs and modify the inherits attribute of the aspx page accordingly, it is still possible to get them.
I'd say, the best place to put the include would be in the Page_Load handler in the codebehind (using Page.ClientScript.RegisterClientScriptInclude).
참고URL : https://stackoverflow.com/questions/912755/include-javascript-file-in-partial-views
'Programing' 카테고리의 다른 글
| Google 고글 API (0) | 2020.11.06 |
|---|---|
| 객체가 값을 변경할 때 TreeSet 정렬 유지 (0) | 2020.11.06 |
| Java에 하위 클래스 가시성 수정자가없는 이유는 무엇입니까? (0) | 2020.11.06 |
| PowerShell : 단일 명령에 대해서만 환경 변수 설정 (0) | 2020.11.06 |
| Windows 배치 파일에서 YYYYMMDD 형식으로 날짜 가져 오기 (0) | 2020.11.06 |