Використання розділів у шаблонах "Редактор / Дисплей"


104

Я хочу зберегти весь свій код JavaScript в одному розділі; перед тим, як закрити bodyтег на моїй сторінці макета головного макета, і просто цікаво, як краще це зробити, стиль MVC.

Наприклад, якщо я створю DisplayTemplate\DateTime.cshtmlфайл, який використовує функцію DateTime Picker інтерфейсу jQuery, ніж я б вставив JavaScript безпосередньо в цей шаблон, але тоді він відобразиться на середині сторінки.

У моїх звичайних уявленнях я можу просто використовувати, @section JavaScript { //js here }а потім і @RenderSection("JavaScript", false)в своєму головному макеті, але це, здається, не працює в шаблонах дисплея / редактора - якісь ідеї?


4
для всіх, хто прийде до цього пізніше - існує пакет пакунків для вирішення цього питання: nuget.org/packages/Forloop.HtmlHelpers
Russ Cam

Відповіді:


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
Оскільки словник не впорядкований, як мені це зробити спочатку? Порядок, який він видає, є випадковим (імовірно, через Посібник) ..
eth0

Можливо, ви можете встановити статичне ціле поле і використовувати Interlocked.Increment () замість GUID, щоб отримати замовлення, але навіть тоді я думаю, що словник ніколи не гарантує замовлення. По-друге, може статичне поле хитке, оскільки воно може зберігатися на сторінках відображення. Натомість можна додати ціле число до словника елементів, але вам доведеться поставити замок навколо нього.
Марк Адамсон

Я почав використовувати це рішення недавно, але не можу скласти два сценарії в один рядок @ Html.Script (), тому що не знаю, як працює HelperResult. Чи не можливо зробити 2 блоки сценарію в 1 дзвінку Html.Script?
Ленґдон

2
@TimMeers, що ти маєш на увазі? Для мене все це завжди було застарілим. Я б взагалі не використовував цих помічників. У моїх часткових уявленнях мені ніколи не було необхідності включати будь-які сценарії. Я б просто дотримувався стандартного бритви sections. У пакеті MVC4 дійсно можна використовувати так само, як це сприяє зменшенню розміру сценаріїв.
Дарин Димитров

4
Цей підхід не працює, якщо ви хочете розміщувати свої сценарії чи стилі в headтезі замість в кінці bodyтегу, тому що @Html.RenderScripts()вони будуть виконані перед вашим частковим переглядом і, отже, раніше @Html.Script().
Максим Ві.

41

Модифікована версія відповіді Даріна для забезпечення замовлення. Також працює з 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

Я знаю це майже два роки тому, але чи є спосіб перевірити, чи файл css / js вже існує, а не виводити його? Спасибі
CodingSlayer

1
гаразд. Не впевнений, наскільки це ефективно, але в даний час я це роблю: var httpTemplates = HtmlHelper.ViewContext.HttpContext.Items [Тип] як Список <Func <об'єкт, HelperResult >>; var prevItem = від q в httpTemplates, де q (null) .ToString () == Шаблон (null) .ToString () виберіть q; if (! prevItem.Any ()) {// Додати шаблон}
CodingSlayer

@imAbhi спасибі, саме те, що мені було потрібно, виглядає як 1-х цикл пакетів з item.ToString, тому я думаю, що це повинно бути досить швидким
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

Як ми можемо це зробити в ядрі asp.net
ramanmittal

13

Мені сподобалось рішення, розміщене @ john-w-harding, тому я поєднав його з відповіддю від @ darin-dimitrov, щоб зробити наступне, ймовірно, надскладне рішення, яке дозволяє затримати візуалізацію будь-якого 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 NuGet пакета - це додає деякі помічників для управління скриптами часткового виду і шаблони редактора.

Десь у вашому макеті вам потрібно зателефонувати

@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

Відповідь, наведена в “ Заселити розділ бритва з часткового”, використовуючи RequireScriptHtmlHelper, слідує за тією ж схемою. Він також має перевагу в тому, що він перевіряє та пригнічує дублікати посилань на ту саму URL-адресу Javascript, і він має явний 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) { ... }

Мені подобаються рішення Даріна та eth0, хоча вони використовують HelperResultшаблон, який дозволяє блокувати сценарії та CSS, а не лише посилання на файли Javascript та CSS.


1

@Darin Dimitrov та @ eth0 відповідають на використання у використанні розширення пакетів:

@Html.Resources(a => new HelperResult(b => b.Write( System.Web.Optimization.Scripts.Render("~/Content/js/formBundle").ToString())), "jsTop")
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.