Использование разделов в шаблонах редактора / отображения

104

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

Например, если я создаю DisplayTemplate\DateTime.cshtmlфайл, который использует средство выбора даты и времени jQuery UI, я бы встроил JavaScript непосредственно в этот шаблон, но затем он отобразит среднюю страницу.

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

html asp.net-mvc asp.net-mvc-3 razor eth0
источник
4
для тех, кто придет к этому позже - есть пакет nuget
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
Поскольку словарь неупорядочен, как мне поступить первым пришел первым? Порядок вывода случайный (предположительно из-за Guid) ..
eth0
Возможно, вы могли бы настроить статическое целочисленное поле и использовать Interlocked.Increment () вместо GUID для получения заказа, но даже в этом случае я думаю, что словарь никогда не гарантирует упорядочение. Поразмыслив, возможно, статическое поле является изворотливым, поскольку оно может сохраняться на всех страницах. Вместо этого можно было бы добавить целое число в словарь Items, но вам нужно было бы заблокировать его.
Марк Адамсон
Я начал использовать это решение недавно, но мне кажется, что я не могу поместить два скрипта в одну строку @ Html.Script (), потому что я не уверен, как работает HelperResult. Разве невозможно сделать 2 блока скрипта за 1 вызов Html.Script?
Лэнгдон
2
@TimMeers, что ты имеешь в виду? Для меня все это всегда было устаревшим. Я бы вообще не стал использовать этих помощников. У меня никогда не было необходимости включать какие-либо скрипты в мои частичные представления. Я бы просто придерживался стандартной Razor sections. В MVC4 Bundling действительно можно использовать, так как это помогает уменьшить размер скриптов.
Дарин Димитров
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
источник
Спасибо eth0. Я пошел на компромисс в этом вопросе, но мне нужно это проверить.
one.beat.consumer
Я знаю это почти 2 года назад, но есть ли способ проверить, существует ли уже файл css / js, и не отображать его? Спасибо
CodingSlayer
1
хорошо. Не уверен, насколько это эффективно, но сейчас я делаю это: var httpTemplates = HtmlHelper.ViewContext.HttpContext.Items [Type] as List <Func <object, HelperResult >>; var prevItem = from q в httpTemplates, где q (null) .ToString () == Template (null) .ToString () select 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.

ИСПОЛЬЗОВАНИЕ

В повторяющемся частичном представлении включите блок только один раз:

@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
источник
Странно. Я не помню, как копировал ответ в эту другую ветку , но я сделал немного лучшую запись там ...
drzaus
12

Установите пакет Nuget Forloop.HtmlHelpers - он добавляет несколько помощников для управления скриптами в частичных представлениях и шаблонах редактора.

Где-то в вашем макете нужно позвонить 

@Html.RenderScripts()

Здесь будут выводиться любые файлы сценариев и блоки сценариев на странице, поэтому я бы рекомендовал поместить их после основных сценариев в макете и после раздела сценариев (если он у вас есть).

Если вы используете The Web Optimization Framework с объединением, вы можете использовать перегрузку

@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) { ... }

Мне нравятся решения Darin & eth0, поскольку они используют HelperResultшаблон, который позволяет использовать блоки сценариев и CSS, а не только ссылки на файлы Javascript и CSS.

Martin_W
источник
1

@Darin Dimitrov и @ eth0 отвечают на вопрос об использовании расширения пакета:

@Html.Resources(a => new HelperResult(b => b.Write( System.Web.Optimization.Scripts.Render("~/Content/js/formBundle").ToString())), "jsTop")
Эркан
источник