Podczas migracji z ASP.NET MVC do NancyFx napotykamy na problem konieczności dostosowania Razora. Poniżej opisany jest krok po kroku sposób jak aktywować możliwość używania składni wiązania arkuszy CSS znanej z ASP.NET MVC:
1 |
@Styles.Render("~/Content/css") |
Instalacja Tanka Nancy Optimization framework
Framework ten implementuje funkcjonalność grupowania zarówno arkuszy CSS jak i skryptów JavaScript w wiązki (ang. bundles). Na chwilę obecną ten framework jest dostępny w wersji 0.2.0-beta. Zadziwiająca jest mała ilość pobrać pakietu z Nugeta. Do instalacji należy użyć Nugeta:
1 |
Install-Package Tanka.Nancy.Optimization -Pre |
Framework jest też dostępny na GitHubie.
Tworzenie pakietów z arkuszy CSS
Definicja pakietu odbywa się poprzez stworzenie klasy dziedziczącej z klasy StyleBundle
rezydującej w przestrzeni nazw Tanka.Nancy.Optimization
. Oto przykład:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
using System; using System.Collections.Generic; using System.Linq; using System.Web; using Tanka.Nancy.Optimization; namespace MyNacySiteNamespace { public class MainStyleBundle : StyleBundle { public MainStyleBundle() : base("/Content/css") { Include("/Content/bootstrap.css"); Include("/Content/dropzone.css"); } } } |
Powyższy kod definiuje wiązkę sklejoną z plików bootstrap.css
i dropzone.css
udostępnioną pod adresem /Content/css
. Jak to bywa w NancyFx większość kodu znajduje się w konstruktorze klasy :). Klasy nie trzeba nigdzie rejestrować; Nancy znajdzie ją sama.
Filozofia wiązania jest zbliżona do tej znanej z ASP.NET MVC, gdzie wykonuje się to mniej więcej tak:
1 2 3 |
bundles.Add(new StyleBundle("~/Content/css").Include( "~/Content/bootstrap.css", "~/Content/dropzone.css")); |
W chwili obecnej możemy już użyć pod razorem składni:
1 |
@Tanka.Nancy.Optimization.Styles.Render("/Content/css") |
Użycie powyższego kodu spowoduje wygenerowanie na wyjściu razora kodu HTML:
1 |
<link rel="stylesheet" href="/Content/css" /> |
Pamiętamy, że adres nie zawiera tyldy (~) na początku t.j. /Content/css
nie zaś ~/Content/css
.
Dodanie przestrzeni nazw Tanka.Nancy.Optimization do kompilatora razor
Konieczność podawania pełnej nazwy klasy Tanka.Nancy.Optimization.Styles
w kodzie razora nie jest wygodne. Można zatem skonfigurować go tak, aby przestrzeń nazw Tanka.Nancy.Optimization
była automatycznie dodawana w trakcie kompilacji strony. W tym celu należy stworzyć klasę implementującą IRazorConfiguration
i tam wskazać dodatkową przestrzeń nazw do zaimportowania. Klasa może wyglądać tak:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
using Nancy.ViewEngines.Razor; using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace MyNacySiteNamespace { public class RazorConfig : IRazorConfiguration { public IEnumerable<string> GetAssemblyNames() { return null; } public IEnumerable<string> GetDefaultNamespaces() { return new string[] { "Tanka.Nancy.Optimization" }; } public bool AutoIncludeModelNamespace { get { return true; } } } } |
Tej klasy także nie trzeba nigdzie rejestrować, Nancy i tu znajdzie ją sama. Teraz spokojnie można używać skróconej składni
1 |
@Styles.Render("/Content/css") |
Odnośniki do źródeł
- Tanka.Nancy.Optimization na Nugecie
- Tanka.Nancy.Optimization na GitHub
- Poradnia językowa: arkusz styli czy arkusz stylów 🙂
Suplement
Radość trwała krótko, ponieważ framework zawiera pewien błąd. Więcej na ten temat w poście Błąd w cache Tanka Nancy Optimization.