ASP.Net MVC de HtmlHelper Geliştirmek

imageWeb uygulaması geliştirmek için, en temelde bilinmesi gerekenler html ve css konularıdır. Eğer ASP.Net WebFrom ile uygulama geliştiriyorsanız; WebControl nesneler sayesinde bu durum biraz daha göz arde edilebilir. Çünkü elimizde html kodlarını ve hatta hazır şablonlar sayesinde, css kodlarını üreten nesneler sahip olmaktayız.

ASP.Net MVC ile uygulama geliştiriyorsanız; html ve css konularına ciddi olarak ağırlık verilmesi ve öğrenilmesi gerekmektedir. Ama zaman içerisinde hazırlayabileceğiniz gibi HtmlHelper nesneleri mevcuttur. Bu nesneler ASP.Net WebForm teknolojisinde WebControl nesneleri olarak görebilmekteyiz.

Bu yazımda geliştirdiğiniz uygulamalarda kullanmak için nasıl HtmlHelper hazırlayabileceğimizi inceleyeceğiz.

HtmlHelper nesnelerini en kolay yazıma şekli olarak .Net 3 ile gelene Extension method(genişletme fonksiyonları) şeklinde yazmaktır. Şimdi örneğimizi geliştirmek amacı ile ASP.Net MVC projesi oluşturalım.

ASP.Net MVC ile birlikte gelen standart HtmlHelper nesneleri içerisinde image Helper nesnesi bulunmadığı için, bu uygulamamda image Helper oluşturacağım. Bunu için örnek uygulamamıza, yukarıdaki resimde de olduğu gibi bir resim dosyası ve Helper ile ilgili çalışmamızı gerçekleştireceğimiz ImageExtension class ekleyelim.

Projemize eklemiş olduğumuz ImageExtension class ‘ı extension method yazma kurallarına göre static tipte bir class olması gerekmektedir.

 

namespace MvcExtonsionMethod.Csharp.Extensions
{
public static class ImageExtension
{
}
}

 

Extension method şeklinde yazdığımız fonksiyonlar static ve bazı özel bildirimler içermektedir. Bu bildirimler hangi tip için hazırlandığını belirtmek için tanımlanmaktadır.ASP.Net MVC Framewok ile Web uygulaması geliştiriyor iseniz; HtmlHelper geliştir iken bu helper nesnelerini ASP.Net MVC içerisinde bulunan bir tip olan HtmlHelper tipine göre geliştirmeliyiz.

 

namespace MvcExtonsionMethod.Csharp.Extensions
{
    using System.Web.Mvc;
    using System.Text;
 
    public static string Image(this HtmlHelper h, string src,
            int width,int height, string alt, string title)
    {
    }
}

 

HtmlHelper geliştirme işleminde fonksiyon aşamasına kadar geldik. Bu aşama da ise fonksiyona işlem yaptırmaya geldim. Bu işlemler temelde string birleştirme işleminde ibaret olarak gerçekleşmektedir. Bu işlem için birkaç seçeneğimiz bulunmaktadır.

  1. TagBuilder
  2. StringBuilder
  3. string.Format
  4. ya da manüel olarak artı operatörü ile birleştirmektir.

Yapılan testler sonucunda string birleştirme işlemlerinin StringBuilder gibi nesneleri daha performanslı olduğunu ortaya çıkmaktadır. Bu nedenler yazımda TagBuilder nesnesini Kullanımı ve StringBuilder ile nasıl çözüm üretebileceğimizi inceleyeceğiz.

TagBuilder nesnesi StringBuilder nesnesine benzeye bir nesnedir. Ama StringBuilder nesnesinde farklı olarak Html kodlamaya özgü olarak Tag işlemlerini yapabilmektedir. TagBilder nesnesi diğer özellikleri ile birlikte Html kod üretilmek için hazırlanmış bir nesnedir. Şimdi bu nesnesini kullanımını inceleyelim.

 

public static string Image(this HtmlHelper h, string src, int width,

int height, string alt, string title){

TagBuilder builder = new TagBuilder(“img”);

builder.Attributes.Add(“src”, src);

builder.Attributes.Add(“width”, width.ToString());

builder.Attributes.Add(“height”, height.ToString());

builder.Attributes.Add(“alt”, alt);

builder.Attributes.Add(“title”, title);

return builder.ToString();

}

 

Bir image tag ‘nin problemsiz kullanmamız için bazı parametreler ihtiyaç duymaktadır. Bu parametreler en temelinde src bildirimidir. Bu bildirim, resmin kaynak adresini bildirmektedir. Uygulama içerisinde konumlandırılan image tag daha düzgün şekilde bulunması için width,height, alt ve title gibi parametrelerin bildirilmesi daha iyi olacaktır.

image

İmage tag ile ilgili bildirimleri inceledikten sonra, TagBuilder nesnesini nasıl çalıştığını inceleyelim. TagBuilder nesnesi örneği oluşturulduğu da default constructor parametre olarak hangi Tag üzerinde çalışılması istediğini bildirmemiz gerekmektedir. TagBuilder nesnesi diğer string birleştirme nesnelerinde olduğu gibi herhangi Tag kapatmamıza gerek kalmadan işlem yapmaktadır.

TagBuilder nesnesini incelemesini gerçekleştirdik den sonra StringBuilder ile söz konusu konuya nasıl çözüm oluşturabileceğimizi inceleyelim.

 

  public static string Image(this HtmlHelper h, string src, int width, int height)

{      StringBuilder builder = new StringBuilder();

builder.Append(“<img “);

builder.Append(” width='” + width + “‘”);

builder.Append(” height='” + height + “‘”);

builder.Append(“src='” + src + “‘”);

builder.Append(“/>”);
return builder.ToString();

}

 

StringBuilder nesnesi gelişmiş string birleştirme işlemleri ya da string birleştirme işlemlerimizde performans kazanmak istediğimiz durumlarda kullandığımız bir nesnedir. Bir image tag;

 

<img alt="ibrahim atay" height="100" src="/content/me.jpg" title="ibrahim atay" width="100"></img>

 

Şeklinde düşünüldüğünde yazılım geliştirici bakımında sürekli olarak Tag açılıp kapatılması ya da Tag ile ilgili parametre bildirimlerinin yapılması zaman yönünde problem yaratacağı düşüncesindeyim. Bu nedenler TagBuilder ile daha kolay ve hızlı şekilde çözümler üretebilmekteyiz.

İncelemelerimi gerçekleştirdik. Şimdi uygulamamız test edelim ve sonucu görelim.

image

Bu makalemde ASP.Net MVC için HtmlHelper nasıl geliştirebileceğimiz sorusuna cevap aradık. Sorumuz akabinde TagBuilder nesnesi ve bir çözüm olan StringBuilder nesnesini bu görevde nasıl kullanabileceğimizi inceledik. Konu ile ilgili olarak sorularını info@ibrahimatay.org eposta adresine yöneltebilirisiniz.

ASP.Net MVC kütüphanesi ile ilgili yaşanan bazı güncellemeler sonucunda helper kullanımları da değişimler meydana gelmiştir. Yaşanan bu değişime paralel olarak aşağıda bağlantısı verilen yazı hazırlanmıştır.

ASP.Net MVC 2 Sonrası HtmlHelper Geliştirme / http://www.ibrahimatay.com/post/2013/12/25/ASPNet-MVC-2-Sonrasi-HtmlHelper-Gelistirme.aspx

IBRAHIM ATAY 

 

Leave a Reply

Your email address will not be published. Required fields are marked *