12 Mart 2012 Pazartesi

CSS Ve JS Içinden Kaynak Dosyaları Dinamik Olarak Çağırmak

Web projemizi geliştirirken local sunucumuzda “http://musterisitesi/” olarak tanımlamış olalım ve müşteri yayın ortamı örneğin “http://www.musterisitesi.com/site2010/v2/” olsun. Sayfalarımızda ve özellikle CSS dosyalarında birçok kez kaynak dosya yolu belirtmişizdir.

Örneğin
1body { background-image:url(/images/bg.jpg); }
Bu durumda sitemizi müşteri ortamına attığımızda “bg.jpg” dosyası “http://www.musterisitesi.com/images/” içinde aranacaktır. Fakat gerçek yol “http://www.musterisitesi.com/site2010/v2/images/” dir. Böylece local ortamımızda kullandığımız yollar yüzünden yayındaki sitenin birçok sayfasında kaynak dosya yolu problemleri çıktığını düşünelim.
Local’deki görüntü
Parametrik kök dizin kullanımında
Müşteri ortamındaki görüntü
Parametrik olmayan kök dizin kullanımında
Bu problemi nasıl aşarız@f0 Bu yazıda çözüm için uygulanabilecek yöntemlerden bir tanesine değineceğiz.
İzleyebileceğimiz yöntem, sitenin kök yolunu parametrik olarak tanımlamak ve her zaman kaynak dosya yollarımızın başına eklemektir. Sitenin kök yolunu
Web.config dosyasında tanımlayacağımız bir anahtar ile yöneteceğiz.
local web.config
1<appSettings>
2  <add key="WebSiteRoot" value="" />
3</appSettings>
müşteri web.config
1<appSettings>
2  <add key="WebSiteRoot" value="/site2010/v2" />
3</appSettings>
Bu yöntemi iki koldan uygularız:
1.kol; sayfalarımızda kullandığımız “<img src=”, “<a href=”, “<link href=”, “<script src=” vb. gibi kaynak yolu belirtmemiz gereken durumlar için kod tarafında “public” değişken oluşturmak ve bunu html source tarafında <%= %> belirtimi ile kullanmak. Örneğin:
Default.aspx
01<html xmlns="http://www.w3.org/1999/xhtml">
02<head runat="server">
03    <title></title>
04    <asp:Literal ID="ltHEAD" runat="server"></asp:Literal>
05</head>
06<body>
07    <form id="form1" runat="server">
08    <div>
09        <img src="<%= WebSiteRoot %>/images/publish_f2.png" alt="" />Dinamik Kaynaklar
10    </div>
11    </form>
12</body>
13</html>
Default.aspx.cs
01public string WebSiteRoot = ConfigurationSettings.AppSettings["WebSiteRoot"].ToString();
02
03protected void Page_Load(object sender, EventArgs e)
04{
05    if(!IsPostBack)
06    {
07        HeaderInit();
08    }
09}
10
11private void HeaderInit()
12{
13    ltHEAD.Text = "";
14    ltHEAD.Text += "<link rel=\"Stylesheet\" href=\"" + WebSiteRoot + "/css/style.css\" />";
15}
2.kol ise “.js”, “.css” gibi harici kaynak dosyalarımızın içinde örneğin imaj kullanacaksak generic handler yapısı kullanmak.
style.css
1body
2{
3    background-color: #FFFFFF;
4    background-image: url(images.ashx?src=/images/bg.jpg);
5    background-repeat: repeat-x;
6}
CSS ve JavaScript içinde, html source’da kullandığımız gibi <%= WebSiteRoot %> ifadesi kullanamayız. Fakat bir sayfayı parametre göndererek kullanabiliriz. İşte bu noktada Generic Handler’ları iyi bir enstruman olarak kullanabiliriz.
Generic handler’ımız aldığı “src” parametresi ile WebSiteRoot parametresini kendi içinde birleştirir ve src ile verdiğimiz dosyayı gerçek yolundan alarak ekrana basar.
images.ashx
01[WebService(Namespace = "http://tempuri.org/")]
02[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
03public class images : IHttpHandler
04{
05
06    public void ProcessRequest(HttpContext context)
07    {
08        string imgSrc = context.Request.QueryString["src"].ToString();
09        string path = context.Server.MapPath(ConfigKeys.WebSiteRoot + imgSrc);
10        string contentType = "image/jpeg";
11        FileInfo file = new FileInfo(path);
12        switch (file.Extension.ToLower())
13        {
14            case "jpg": contentType = "image/jpeg"; break;
15            case "png": contentType = "image/png"; break;
16            case "gif": contentType = "image/gif"; break;
17        }
18        context.Response.AddHeader("Content-Length", file.Length.ToString());
19        context.Response.ContentType = contentType;
20        context.Response.WriteFile(file.FullName);
21        context.Response.End();
22    }
23
24    public bool IsReusable
25    {
26        get
27        {
28            return false;
29        }
30    }
31}
İşin canalıcı noktası web.config’de bir anahtar tanımlamak, bu anahtarı kullanarak kaynak dosyaları Generic Handler ile yönetmek.
Proje yapısı
Kolay gelsin.

Hiç yorum yok:

Yorum Gönder

Kaydol: Kayıt Yorumları (Atom)