편집기 / 디스플레이 템플릿에서 섹션 사용


104

모든 JavaScript 코드를 하나의 섹션에 보관하고 싶습니다. body내 마스터 레이아웃 페이지 의 닫는 태그 바로 전에 MVC 스타일에 대해 가장 좋은 방법이 궁금합니다.

예를 들어 DisplayTemplate\DateTime.cshtmljQuery UI의 DateTime Picker를 사용 하는 파일을 생성하면 해당 템플릿에 JavaScript를 직접 포함하지만 페이지 중간에 렌더링됩니다.

내 일반보기에서는 마스터 레이아웃 @section JavaScript { //js here }을 사용한 다음 사용할 수 @RenderSection("JavaScript", false)있지만 디스플레이 / 편집기 템플릿에서 작동하지 않는 것 같습니다. 아이디어가 있습니까?


4
- 사람이 나중에 오는이 처리하기위한 nuget 패키지가 : nuget.org/packages/Forloop.HtmlHelpers을
러스 캠

답변:


189

두 도우미의 결합으로 진행할 수 있습니다.

public static class HtmlExtensions
{
    public static MvcHtmlString Script(this HtmlHelper htmlHelper, Func<object, HelperResult> template)
    {
        htmlHelper.ViewContext.HttpContext.Items["_script_" + Guid.NewGuid()] = template;
        return MvcHtmlString.Empty;
    }

    public static IHtmlString RenderScripts(this HtmlHelper htmlHelper)
    {
        foreach (object key in htmlHelper.ViewContext.HttpContext.Items.Keys)
        {
            if (key.ToString().StartsWith("_script_"))
            {
                var template = htmlHelper.ViewContext.HttpContext.Items[key] as Func<object, HelperResult>;
                if (template != null)
                {
                    htmlHelper.ViewContext.Writer.Write(template(null));
                }
            }
        }
        return MvcHtmlString.Empty;
    }
}

그리고 당신의 _Layout.cshtml:

<body>
...
@Html.RenderScripts()
</body>

일부 템플릿 어딘가에 :

@Html.Script(
    @<script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script>
)

3
사전이 순서가 없어서 선입 선출은 어떻게하나요? 출력되는 순서는 무작위입니다 (아마도 Guid 때문에) ..
eth0

아마도 정적 정수 필드를 설정하고 GUID 대신 Interlocked.Increment ()를 사용하여 순서를 지정할 수 있지만 그래도 사전이 순서를 보장하지 않는다고 생각합니다. 다시 생각해 보면, 정적 필드는 페이지 디스플레이에서 유지 될 수 있으므로 어리석은 일입니다. 대신 Items 딕셔너리에 정수를 추가 할 수 있지만, 그 주위에 잠금을 설정해야합니다.
Mark Adamson

최근에이 솔루션을 사용하기 시작했지만 HelperResult가 어떻게 작동하는지 확실하지 않기 때문에 단일 @ Html.Script () 줄에 두 개의 스크립트를 채우지 못하는 것 같습니다. 1 개의 Html.Script 호출에서 2 개의 스크립트 블록을 수행 할 수 없습니까?
Langdon

2
@ TimMeers, 무슨 뜻이야? 저에게이 모든 것은 항상 쓸모가 없습니다. 나는 그 도우미들을 전혀 사용하지 않을 것입니다. 부분보기에 스크립트를 포함 할 필요가 없었습니다. 나는 단순히 표준 Razor를 고수 할 것 sections입니다. MVC4에서 번들링은 실제로 사용할 수있을뿐만 아니라 스크립트 크기를 줄이는 데 도움이됩니다.
Darin Dimitrov 2012 년

4
당신이 당신의 스크립트 나 스타일을 배치 할 경우이 방법은 작동하지 않습니다 head태그 대신의 말에 body태그 있기 때문에, @Html.RenderScripts()당신의 부분보기 전에 따라서 이전에 실행됩니다 @Html.Script().
Maksim Vi.

41

주문을 보장하기 위해 Darin의 답변 수정 버전. CSS에서도 작동합니다.

public static IHtmlString Resource(this HtmlHelper HtmlHelper, Func<object, HelperResult> Template, string Type)
{
    if (HtmlHelper.ViewContext.HttpContext.Items[Type] != null) ((List<Func<object, HelperResult>>)HtmlHelper.ViewContext.HttpContext.Items[Type]).Add(Template);
    else HtmlHelper.ViewContext.HttpContext.Items[Type] = new List<Func<object, HelperResult>>() { Template };

    return new HtmlString(String.Empty);
}

public static IHtmlString RenderResources(this HtmlHelper HtmlHelper, string Type)
{
    if (HtmlHelper.ViewContext.HttpContext.Items[Type] != null)
    {
        List<Func<object, HelperResult>> Resources = (List<Func<object, HelperResult>>)HtmlHelper.ViewContext.HttpContext.Items[Type];

        foreach (var Resource in Resources)
        {
            if (Resource != null) HtmlHelper.ViewContext.Writer.Write(Resource(null));
        }
    }

    return new HtmlString(String.Empty);
}

다음과 같이 JS 및 CSS 리소스를 추가 할 수 있습니다.

@Html.Resource(@<script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script>, "js")
@Html.Resource(@<link rel="stylesheet" href="@Url.Content("~/CSS/style.css")" />, "css")

다음과 같이 JS 및 CSS 리소스를 렌더링합니다.

@Html.RenderResources("js")
@Html.RenderResources("css")

문자열 검사를 수행하여 스크립트 / 링크로 시작하는지 확인할 수 있으므로 각 리소스가 무엇인지 명시 적으로 정의 할 필요가 없습니다.


감사합니다 eth0. 이 문제에 대해 타협했지만이 문제를 확인해야합니다.
one.beat.consumer

나는 거의 2 년 전에 이것을 알고 있지만 CSS / js 파일이 이미 존재하고 렌더링하지 않는지 확인하는 방법이 있습니까? 감사합니다
CodingSlayer 2014 년

1
확인. 얼마나 효율적인지 잘 모르겠지만 현재 이렇게하고 있습니다. var httpTemplates = HtmlHelper.ViewContext.HttpContext.Items [Type] as List <Func <object, HelperResult >>; var prevItem = from q in httpTemplates where q (null) .ToString () == Template (null) .ToString () select q; if (! prevItem.Any ()) {// Add Template}
CodingSlayer 2014 년

@imAbhi 감사합니다, 제가 필요한 것은 item.ToString이 포함 된 번들의 1 for-loop처럼 보이므로 충분히 빠르다고 생각합니다
Kunukn

35

나는 같은 문제에 직면했지만 여기에서 제안 된 솔루션은 리소스에 대한 참조를 추가하는 데만 효과적이며 인라인 JS 코드에는 적합하지 않습니다. 매우 유용한 기사를 발견하고 모든 인라인 JS (및 스크립트 태그)를

@using (Html.BeginScripts())
{
    <script src="@Url.Content("~/Scripts/jquery-ui-1.8.18.min.js")" type="text/javascript"></script>
    <script>
    // my inline scripts here
    <\script>
}

그리고 배치 된 _Layout 뷰에서 @Html.PageScripts() 'body'태그를 닫기 직전에 . 나를위한 매력처럼 작동합니다.


도우미 자체 :

public static class HtmlHelpers
{
    private class ScriptBlock : IDisposable
    {
        private const string scriptsKey = "scripts";
        public static List<string> pageScripts
        {
            get
            {
                if (HttpContext.Current.Items[scriptsKey] == null)
                    HttpContext.Current.Items[scriptsKey] = new List<string>();
                return (List<string>)HttpContext.Current.Items[scriptsKey];
            }
        }

        WebViewPage webPageBase;

        public ScriptBlock(WebViewPage webPageBase)
        {
            this.webPageBase = webPageBase;
            this.webPageBase.OutputStack.Push(new StringWriter());
        }

        public void Dispose()
        {
            pageScripts.Add(((StringWriter)this.webPageBase.OutputStack.Pop()).ToString());
        }
    }

    public static IDisposable BeginScripts(this HtmlHelper helper)
    {
        return new ScriptBlock((WebViewPage)helper.ViewDataContainer);
    }

    public static MvcHtmlString PageScripts(this HtmlHelper helper)
    {
        return MvcHtmlString.Create(string.Join(Environment.NewLine, ScriptBlock.pageScripts.Select(s => s.ToString())));
    }
}

3
이것이 최선의 대답입니다. 또한 거의 모든 것을 주입하고 끝까지 지연시킬 수 있습니다
drzaus

1
기사의 코드가 다운 될 경우를 대비하여 복사하여 붙여 넣어야합니다! 이것은 훌륭한 대답입니다!
Shaamaan 2015 년

asp.net core에서 어떻게이 작업을 수행 할 수 있습니까?
ramanmittal

13

@ john-w-harding이 게시 한 솔루션이 마음에 들었 기 때문에 @ darin-dimitrov 의 답변 과 결합 하여 using 블록 내에서 html (스크립트도) 렌더링을 지연시킬 수있는 다음과 같은 지나치게 복잡한 솔루션을 만들었습니다.

용법

반복되는 부분보기에서는 블록을 한 번만 포함합니다.

@using (Html.Delayed(isOnlyOne: "MYPARTIAL_scripts")) {
    <script>
        someInlineScript();
    </script>
}

(반복?) 부분보기에서 부분이 사용될 때마다 블록을 포함합니다.

@using (Html.Delayed()) {
    <b>show me multiple times, @Model.Whatever</b>
}

(반복?) 부분보기에서 블록을 한 번 포함하고 나중에 이름으로 구체적으로 렌더링합니다 one-time.

@using (Html.Delayed("one-time", isOnlyOne: "one-time")) {
    <b>show me once by name</b>
    <span>@Model.First().Value</span>
}

렌더링하려면 :

@Html.RenderDelayed(); // the "default" unidentified blocks
@Html.RenderDelayed("one-time", false); // render the specified block by name, and allow us to render it again in a second call
@Html.RenderDelayed("one-time"); // render the specified block by name
@Html.RenderDelayed("one-time"); // since it was "popped" in the last call, won't render anything

암호

public static class HtmlRenderExtensions {

    /// <summary>
    /// Delegate script/resource/etc injection until the end of the page
    /// <para>@via https://stackoverflow.com/a/14127332/1037948 and http://jadnb.wordpress.com/2011/02/16/rendering-scripts-from-partial-views-at-the-end-in-mvc/ </para>
    /// </summary>
    private class DelayedInjectionBlock : IDisposable {
        /// <summary>
        /// Unique internal storage key
        /// </summary>
        private const string CACHE_KEY = "DCCF8C78-2E36-4567-B0CF-FE052ACCE309"; // "DelayedInjectionBlocks";

        /// <summary>
        /// Internal storage identifier for remembering unique/isOnlyOne items
        /// </summary>
        private const string UNIQUE_IDENTIFIER_KEY = CACHE_KEY;

        /// <summary>
        /// What to use as internal storage identifier if no identifier provided (since we can't use null as key)
        /// </summary>
        private const string EMPTY_IDENTIFIER = "";

        /// <summary>
        /// Retrieve a context-aware list of cached output delegates from the given helper; uses the helper's context rather than singleton HttpContext.Current.Items
        /// </summary>
        /// <param name="helper">the helper from which we use the context</param>
        /// <param name="identifier">optional unique sub-identifier for a given injection block</param>
        /// <returns>list of delayed-execution callbacks to render internal content</returns>
        public static Queue<string> GetQueue(HtmlHelper helper, string identifier = null) {
            return _GetOrSet(helper, new Queue<string>(), identifier ?? EMPTY_IDENTIFIER);
        }

        /// <summary>
        /// Retrieve a context-aware list of cached output delegates from the given helper; uses the helper's context rather than singleton HttpContext.Current.Items
        /// </summary>
        /// <param name="helper">the helper from which we use the context</param>
        /// <param name="defaultValue">the default value to return if the cached item isn't found or isn't the expected type; can also be used to set with an arbitrary value</param>
        /// <param name="identifier">optional unique sub-identifier for a given injection block</param>
        /// <returns>list of delayed-execution callbacks to render internal content</returns>
        private static T _GetOrSet<T>(HtmlHelper helper, T defaultValue, string identifier = EMPTY_IDENTIFIER) where T : class {
            var storage = GetStorage(helper);

            // return the stored item, or set it if it does not exist
            return (T) (storage.ContainsKey(identifier) ? storage[identifier] : (storage[identifier] = defaultValue));
        }

        /// <summary>
        /// Get the storage, but if it doesn't exist or isn't the expected type, then create a new "bucket"
        /// </summary>
        /// <param name="helper"></param>
        /// <returns></returns>
        public static Dictionary<string, object> GetStorage(HtmlHelper helper) {
            var storage = helper.ViewContext.HttpContext.Items[CACHE_KEY] as Dictionary<string, object>;
            if (storage == null) helper.ViewContext.HttpContext.Items[CACHE_KEY] = (storage = new Dictionary<string, object>());
            return storage;
        }


        private readonly HtmlHelper helper;
        private readonly string identifier;
        private readonly string isOnlyOne;

        /// <summary>
        /// Create a new using block from the given helper (used for trapping appropriate context)
        /// </summary>
        /// <param name="helper">the helper from which we use the context</param>
        /// <param name="identifier">optional unique identifier to specify one or many injection blocks</param>
        /// <param name="isOnlyOne">extra identifier used to ensure that this item is only added once; if provided, content should only appear once in the page (i.e. only the first block called for this identifier is used)</param>
        public DelayedInjectionBlock(HtmlHelper helper, string identifier = null, string isOnlyOne = null) {
            this.helper = helper;

            // start a new writing context
            ((WebViewPage)this.helper.ViewDataContainer).OutputStack.Push(new StringWriter());

            this.identifier = identifier ?? EMPTY_IDENTIFIER;
            this.isOnlyOne = isOnlyOne;
        }

        /// <summary>
        /// Append the internal content to the context's cached list of output delegates
        /// </summary>
        public void Dispose() {
            // render the internal content of the injection block helper
            // make sure to pop from the stack rather than just render from the Writer
            // so it will remove it from regular rendering
            var content = ((WebViewPage)this.helper.ViewDataContainer).OutputStack;
            var renderedContent = content.Count == 0 ? string.Empty : content.Pop().ToString();

            // if we only want one, remove the existing
            var queue = GetQueue(this.helper, this.identifier);

            // get the index of the existing item from the alternate storage
            var existingIdentifiers = _GetOrSet(this.helper, new Dictionary<string, int>(), UNIQUE_IDENTIFIER_KEY);

            // only save the result if this isn't meant to be unique, or
            // if it's supposed to be unique and we haven't encountered this identifier before
            if( null == this.isOnlyOne || !existingIdentifiers.ContainsKey(this.isOnlyOne) ) {
                // remove the new writing context we created for this block
                // and save the output to the queue for later
                queue.Enqueue(renderedContent);

                // only remember this if supposed to
                if(null != this.isOnlyOne) existingIdentifiers[this.isOnlyOne] = queue.Count; // save the index, so we could remove it directly (if we want to use the last instance of the block rather than the first)
            }
        }
    }


    /// <summary>
    /// <para>Start a delayed-execution block of output -- this will be rendered/printed on the next call to <see cref="RenderDelayed"/>.</para>
    /// <para>
    /// <example>
    /// Print once in "default block" (usually rendered at end via <code>@Html.RenderDelayed()</code>).  Code:
    /// <code>
    /// @using (Html.Delayed()) {
    ///     <b>show at later</b>
    ///     <span>@Model.Name</span>
    ///     etc
    /// }
    /// </code>
    /// </example>
    /// </para>
    /// <para>
    /// <example>
    /// Print once (i.e. if within a looped partial), using identified block via <code>@Html.RenderDelayed("one-time")</code>.  Code:
    /// <code>
    /// @using (Html.Delayed("one-time", isOnlyOne: "one-time")) {
    ///     <b>show me once</b>
    ///     <span>@Model.First().Value</span>
    /// }
    /// </code>
    /// </example>
    /// </para>
    /// </summary>
    /// <param name="helper">the helper from which we use the context</param>
    /// <param name="injectionBlockId">optional unique identifier to specify one or many injection blocks</param>
    /// <param name="isOnlyOne">extra identifier used to ensure that this item is only added once; if provided, content should only appear once in the page (i.e. only the first block called for this identifier is used)</param>
    /// <returns>using block to wrap delayed output</returns>
    public static IDisposable Delayed(this HtmlHelper helper, string injectionBlockId = null, string isOnlyOne = null) {
        return new DelayedInjectionBlock(helper, injectionBlockId, isOnlyOne);
    }

    /// <summary>
    /// Render all queued output blocks injected via <see cref="Delayed"/>.
    /// <para>
    /// <example>
    /// Print all delayed blocks using default identifier (i.e. not provided)
    /// <code>
    /// @using (Html.Delayed()) {
    ///     <b>show me later</b>
    ///     <span>@Model.Name</span>
    ///     etc
    /// }
    /// </code>
    /// -- then later --
    /// <code>
    /// @using (Html.Delayed()) {
    ///     <b>more for later</b>
    ///     etc
    /// }
    /// </code>
    /// -- then later --
    /// <code>
    /// @Html.RenderDelayed() // will print both delayed blocks
    /// </code>
    /// </example>
    /// </para>
    /// <para>
    /// <example>
    /// Allow multiple repetitions of rendered blocks, using same <code>@Html.Delayed()...</code> as before.  Code:
    /// <code>
    /// @Html.RenderDelayed(removeAfterRendering: false); /* will print */
    /// @Html.RenderDelayed() /* will print again because not removed before */
    /// </code>
    /// </example>
    /// </para>

    /// </summary>
    /// <param name="helper">the helper from which we use the context</param>
    /// <param name="injectionBlockId">optional unique identifier to specify one or many injection blocks</param>
    /// <param name="removeAfterRendering">only render this once</param>
    /// <returns>rendered output content</returns>
    public static MvcHtmlString RenderDelayed(this HtmlHelper helper, string injectionBlockId = null, bool removeAfterRendering = true) {
        var stack = DelayedInjectionBlock.GetQueue(helper, injectionBlockId);

        if( removeAfterRendering ) {
            var sb = new StringBuilder(
#if DEBUG
                string.Format("<!-- delayed-block: {0} -->", injectionBlockId)
#endif
                );
            // .count faster than .any
            while (stack.Count > 0) {
                sb.AppendLine(stack.Dequeue());
            }
            return MvcHtmlString.Create(sb.ToString());
        } 

        return MvcHtmlString.Create(
#if DEBUG
                string.Format("<!-- delayed-block: {0} -->", injectionBlockId) + 
#endif
            string.Join(Environment.NewLine, stack));
    }


}

기묘한. 이 다른 스레드에 대한 답을 복사 한 것을 기억하지 못합니다 .하지만 거기에서 약간 더 나은 글을 작성했습니다 ...
drzaus

12

Forloop.HtmlHelpers 너겟 패키지를 설치하십시오 -부분보기 및 편집기 템플릿에서 스크립트를 관리하기위한 일부 도우미를 추가합니다.

레이아웃 어딘가에 전화해야합니다.

@Html.RenderScripts()

이것은 모든 스크립트 파일과 스크립트 블록이 페이지에 출력되는 곳이므로 레이아웃의 기본 스크립트 뒤와 스크립트 섹션 뒤에 넣는 것이 좋습니다 (있는 경우).

번들링과 함께 웹 최적화 프레임 워크를 사용하는 경우 오버로드를 사용할 수 있습니다.

@Html.RenderScripts(Scripts.Render)

이 방법은 스크립트 파일을 작성하는 데 사용됩니다.

이제보기, 부분보기 또는 템플릿에 스크립트 파일이나 블록을 추가하려면 언제든지

@using (Html.BeginScriptContext())
{
  Html.AddScriptFile("~/Scripts/jquery.validate.js");
  Html.AddScriptBlock(
    @<script type="text/javascript">
       $(function() { $('#someField').datepicker(); });
     </script>
  );
}

헬퍼는 여러 번 추가 된 경우 하나의 스크립트 파일 참조 만 렌더링되도록하고 스크립트 파일이 예상 된 순서로 렌더링되도록합니다.

  1. 나열한 것
  2. 부분 및 템플릿 (보기에 나타나는 순서, 위에서 아래로)

5

이 게시물은 정말 도움이 되었기 때문에 기본 아이디어 구현을 게시 할 것이라고 생각했습니다. @ Html.Resource 함수에서 사용할 스크립트 태그를 반환 할 수있는 도우미 함수를 소개했습니다.

또한 형식화 된 변수를 사용하여 JS 또는 CSS 리소스를 식별 할 수 있도록 간단한 정적 클래스를 추가했습니다.

public static class ResourceType
{
    public const string Css = "css";
    public const string Js = "js";
}

public static class HtmlExtensions
{
    public static IHtmlString Resource(this HtmlHelper htmlHelper, Func<object, dynamic> template, string Type)
    {
        if (htmlHelper.ViewContext.HttpContext.Items[Type] != null) ((List<Func<object, dynamic>>)htmlHelper.ViewContext.HttpContext.Items[Type]).Add(template);
        else htmlHelper.ViewContext.HttpContext.Items[Type] = new List<Func<object, dynamic>>() { template };

        return new HtmlString(String.Empty);
    }

    public static IHtmlString RenderResources(this HtmlHelper htmlHelper, string Type)
    {
        if (htmlHelper.ViewContext.HttpContext.Items[Type] != null)
        {
            List<Func<object, dynamic>> resources = (List<Func<object, dynamic>>)htmlHelper.ViewContext.HttpContext.Items[Type];

            foreach (var resource in resources)
            {
                if (resource != null) htmlHelper.ViewContext.Writer.Write(resource(null));
            }
        }

        return new HtmlString(String.Empty);
    }

    public static Func<object, dynamic> ScriptTag(this HtmlHelper htmlHelper, string url)
    {
        var urlHelper = new UrlHelper(htmlHelper.ViewContext.RequestContext);
        var script = new TagBuilder("script");
        script.Attributes["type"] = "text/javascript";
        script.Attributes["src"] = urlHelper.Content("~/" + url);
        return x => new HtmlString(script.ToString(TagRenderMode.Normal));
    }
}

그리고 사용 중

@Html.Resource(Html.ScriptTag("Areas/Admin/js/plugins/wysiwyg/jquery.wysiwyg.js"), ResourceType.Js)

여기내 질문에 대한 답변을 제공 한 @Darin Dimitrov에게 감사드립니다 .


2

HtmlHelper를 사용하여 부분에서 Razor 섹션 채우기에 제공된 대답 RequireScript은 동일한 패턴을 따릅니다. 또한 동일한 Javascript URL에 대한 중복 참조를 확인하고 억제하는 이점이 priority있으며 순서를 제어하는 ​​데 사용할 수 있는 명시 적 매개 변수가 있습니다.

다음과 같은 방법을 추가하여이 솔루션을 확장했습니다.

// use this for scripts to be placed just before the </body> tag
public static string RequireFooterScript(this HtmlHelper html, string path, int priority = 1) { ... }
public static HtmlString EmitRequiredFooterScripts(this HtmlHelper html) { ... }

// use this for CSS links
public static string RequireCSS(this HtmlHelper html, string path, int priority = 1) { ... }
public static HtmlString EmitRequiredCSS(this HtmlHelper html) { ... }

HelperResultJavascript 및 CSS 파일에 대한 링크뿐만 아니라 스크립트 및 CSS 블록을 허용 하는 템플릿 을 사용하기 때문에 Darin 및 eth0의 솔루션이 마음에 듭니다 .


1

@Darin Dimitrov 및 @ eth0는 번들 확장 사용에 대한 답변 :

@Html.Resources(a => new HelperResult(b => b.Write( System.Web.Optimization.Scripts.Render("~/Content/js/formBundle").ToString())), "jsTop")
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.