Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Gayathri 42 posts 152 karma points
    Nov 08, 2019 @ 04:10
    Gayathri
    0

    Prevent css repetition in each content type

    Hi all,

    Currently, for every content type, css is embedded into the content type itself. Hence, css related to content type will only load when the content type is added into the page.

    However, if you add more than one of the same content type in a page, it will load the css again and again.

    So , this needs to be prevented.

  • Claushingebjerg 845 posts 2221 karma points
    Nov 08, 2019 @ 10:40
    Claushingebjerg
    0

    Could you post screen dumps or code examples? As far as im aware no css is embedded in templates or partials per default...

    Or are you talking about some kind of backend grid renderer...?

  • Gayathri 42 posts 152 karma points
    Nov 12, 2019 @ 01:54
    Gayathri
    0

    Hi , Please find i have custom content type called Quicklinks , i have page where this content type used twice so the css repeating twice , How to avoid this ?

    enter image description here

  • Jonathan Distenfeld 104 posts 614 karma points
    Nov 12, 2019 @ 07:26
    Jonathan Distenfeld
    0

    Hi,

    to give you an idea: You could write a method to avoid duplicate css. (Following is untested)

        private Dictionary<string, MvcHtmlString> stylesheetsLoaded = new Dictionary<string, MvcHtmlString>();
        public IHtmlString EnsureStyleSheet(string url)
        {
            MvcHtmlString result = MvcHtmlString.Empty;
            if (!stylesheetsLoaded.ContainsKey(url))
            {
                result = MvcHtmlString.Create($"<link rel=\"styleheet\" href=\"{url}\" />");
                stylesheetsLoaded.Add(url, result);
            }
            return result;
        }
    

    ~ Jonathan

  • Gayathri 42 posts 152 karma points
    Nov 12, 2019 @ 07:31
    Gayathri
    0

    Hi Jonathan,

    Thank you for the reply :)

    This is my below the css and Js , these two items is repeating , how i can approach with the above one ?

    enter image description here

  • Jonathan Distenfeld 104 posts 614 karma points
    Nov 12, 2019 @ 08:31
    Jonathan Distenfeld
    1

    Hi,

    You can call it like this:

    @EnsureStyleSheet("~App_Plugins/QuickLinks/Css/QuickLinks.css")
    

    For javascript-files you can do the same.

    You have to make sure that you have a single instance of the class containing the methods. Otherwise it won't work and the result will be the same.

    ~ Jonathan

  • Gayathri 42 posts 152 karma points
    Dec 26, 2019 @ 02:48
    Gayathri
    0

    Hi Jonnnathan,

    What do you mean by single instance of class , Can you give an example from my above html code ?

  • Chester Campbell 62 posts 120 karma points
    Dec 26, 2019 @ 19:45
    Chester Campbell
    0

    This is one of the reasons we use ClientDependency. Our websites have reusable components built around Archetype or Nested Content so each component has a Partial View and a CSS file and (sometimes) a JavaScript file. The CSS and JavaScript are loaded via ClientDependency which handles the de-duping for us.

    For example, in a banner ads component the partial view (~/Views/Partials/Archetype/BannerAds.cshtml) would contain this:

    @using ClientDependency.Core.Mvc
    @{
          Html.RequiresCss("/css/Views/Partials/Archetype/BannerAds.css");
    }
    

    For more information check out: https://github.com/Shazwazza/ClientDependency

Please Sign in or register to post replies

Write your reply to:

Draft