icon Makalemiz

Asp.net Mvc Razor Tema Sistemi

Asp.net mvc de kendiliğinden gelen bir tema sistemi olmadığından biz kendimiz bir tema sistemi yapacağız. Daha doğrusu nasıl yapılır ona bakacağız. Benimde kullandığım bu yöntem ile farklı farklı görünümlere sahip asp.net mvc razor da tema sistemi oluşturabilirsiniz.

Burada ki amacımız en basit haliyle View Engine‘lerin view’larımızı nasıl aradığını ve mevcut engine’i ihtiyaçlarımıza göre nasıl düzenleyeceğimizi görmek olacak.

Dizin yapımış şu şekilde olacaktır:

Tema dizinimizi ayarlıyoruz

Boş bir Mvc Projesi açalım, Themes adında yeni bir klasör ekliyoruz. İçerisine de Default adında bir klasör daha. Bu klasörün altına var olan Views Klasörünü taşıyın.

Themes/Default/Views şeklinde bir dizinimiz olacak.

ViewEngine’i düzenliyoruz

Öncelikle Temamızın özelliklerini tutacak bir bir sınıf yazıyoruz.

[php language=”c#”]
public class Theme
{
public string Name { get; set; }
public string BasePath { get; set; }
public string Path { get { return String.Format("~/{0}/{1}/",BasePath,Name); } }
public Theme(string basePath, string name)
{
Name = name;
BasePath = basePath;
}
}
[/php]

En önemli noktaya geldik. System.Web.Mvc altında RazorViewEngine‘denThemedRazorViewEngine adında kendimize yeni bir sınıf türetiyoruz.

[php language=”c#”]
public class ThemedRazorViewEngine : RazorViewEngine
{
private readonly Theme _theme;

public ThemedRazorViewEngine(Theme theme)
{
_theme = theme;

base.ViewLocationFormats = new[]
{
_theme.Path + "/Views/{1}/{0}.cshtml",
_theme.Path + "/Views/Shared/{0}.cshtml",
"~/Themes/Default/Views/{1}/{0}.cshtml"
};

base.PartialViewLocationFormats = new[]
{
_theme.Path + "/Views/{1}/{0}.cshtml",
_theme.Path + "/Views/Shared/{0}.cshtml",
"~/Themes/Default/Views/Shared/{0}.cshtml"
};

base.AreaViewLocationFormats = new[]
{
_theme.Path + "/Views/{2}/{1}/{0}.cshtml",
_theme.Path + "/Views/Shared/{0}.cshtml",
"~/Themes/Default/Views/{1}/{0}.cshtml"
};
base.AreaPartialViewLocationFormats = new[]
{
_theme.Path + "/Views/{2}/{1}/{0}.cshtml",
_theme.Path + "/Views/{1}/{0}.cshtml",
_theme.Path + "/Views/Shared/{0}.cshtml",
"~/Themes/Default/Views/Shared/{0}.cshtml"
};
}

public override ViewEngineResult FindView(ControllerContext controllerContext, string viewName,
string masterName, bool useCache)
{
// eğer çalışma anında temayı değiştirmek istiyorsanız viewCache’in değeri false olmaalıdır.
const bool useViewCache = false;

return base.FindView(controllerContext, viewName, masterName, useViewCache);
}
}
[/php]

string dizilerdeki formatlı alanların karşılıkları şöyle;

  • {0} : view
  • {1} : controller
  • {2} : area

Buradaki önemli nokta, View dosyalarını string dizilere eklediğimiz sırayla arıyor olması.

Ayarlarımızı yapıyoruz

Web.config dosyanıza şu satırları ekleyin.
[php language=”c#”]
<appSettings>
<add key="ThemeName" value="Default" />
<add key="ThemeBasePath" value="Themes" />
</appSettings>
[/php]

BasePath Tema dosyalarınızın bulunduğu temel(root) dizin.
ThemeName Tema dosyanızın adı.

Aşağıdaki kodu Global.asax dosyamıza ekleyerek Mvc’ye kendi view Engine’imizi kaydediyoruz.
[php language=”c#”]
protected void Application_Start()
{
//..
RegisterViewEngine(ViewEngines.Engines);
}

public static void RegisterViewEngine(ViewEngineCollection viewEngines)
{
// mevcut engineleri temizliyoruz.
viewEngines.Clear();

var basePath = ConfigurationManager.AppSettings["ThemeBasePath"];
var themeName = ConfigurationManager.AppSettings["ThemeName"];

var theme = new Theme(basePath,themeName);

var themeableRazorViewEngine = new ThemedRazorViewEngine(theme);

viewEngines.Add(themeableRazorViewEngine);
}
[/php]

Not: Statik dosyalrınızı (script,css,image,..) view’e ekleyebilmeniz için seçili temanın altındaki dosya yolunu göstermelisiniz. Bunun için kendinize bu işi yapan UrlHelper Extension metodu yazarak her seferinde geçerli tema yolunu belirtmekten kurtulabilirsiniz.

Artık tema desteği olan bir Mvc Razor View Engine’imiz var.


Yorumlar (0)



Yorum Yaz