Asp.Net MVC Framework - View Kavramı

ASP.NET MVC Framework incelemeye View katmanı ile devam ediyoruz. Bu yazımızda Asp.Net MVC View, View Data ve HTML Helper kavramlarına değinip detaylı bir biçimde açıklamaya çalışıyor olacağız. Yazımızı tamamladığımızda MVC uygulamalarında View oluşturabilmeyi, Controller üzerinden gelen verileri view üzerinde gösterebilmeyi ve kendi html helper 'ımızı oluşturabilmeyi yapabiliyor olacağız.

Asp.Net MVC Framework - View 'ı Anlamak

Çok uzun zamandır web uygulamaları geliştiriciler tarafından hazırlanmakta ve kullanıcıların kullanımlarına sunulmaktadır. Asp.Net veya Active Server Page (ASP) kullanırken son kullanıcıdan gelen istekler doğrultusunda yapılacak işlemleri arka plan kodlarında işlemi gerçekleştirir ve Controller kavramı tam olarak işlemezdi. Ayrıca aspx ya da Asp sayfaların içerisine yönetilebilir kodların yazıldığı bir çok proje görebiliriz. Bu işlemin olması injection ataklarından tutunda yaptığımız projenin yavaş çalışmasına kadar bir çok olumsuz faktör ile bizi karşı karşıya bırakmaktadır. MVC Framework ile geliştirdiğimiz uygulamaların View sayfalarında ise sadece HTML kodların yazılmasına olanak tanınmaktadır. Sebebi ise performansın dışında gereksiz yere server 'a zorlayan işlemleri view sayfalarda kullanmamak. Çünkü bir işlem yapılmayacak dahi olsa view sayfaların açılmaktadır. Eğer ki kullanıcıların görecekleri sayfalara yönetilebilir kodlar eklersek sayfa açıldığında bu kodlarda işlenecek, sayfanın serverdan çağırılması esnasında yüklenmesi için geçecek zamanda da bandwith in dolmasına sebep olacaktır.

MVC uygulamalarında Controller katmanında olan sınıflarda oluşturulan metotlar ile eşleştirilmiş Viewlar üzerinde işlem yapılır. Controller üzerindeki metotlar 'da MVC 'ye göre Action işlemini gördüğünü daha önceki yazılarımızda incelemiştik. Kısacası MVC Framework 'te oluşturulan Viewler, Controller katmanında oluşturulan sınıflarda yer alan metotlar yani Action lara göre hazırlanır ve kod tarafında sadece html kodlar yer almaktadır.

MVC Framework ile varsayılan olarak oluşturulan HomeController.cs sınıfında Details() ve Index() metotlarını aşağıdaki gibi oluşturalım. Hatırlayacağınız üzere Controller da oluşturulan metotların isimleri Action olarak geçmektedir.

Controller\HomeController.cs

using System.Web.Mvc; namespace MvcApplication1.Controllers {     [HandleError]     public class HomeController : Controller     {         public ActionResult Index()         {              return View();         }         public ActionResult Details()         {              return RedirectToAction("Index");         }     } }

İlk olarak inleyeceğimiz Action Index() olacak ve URL içerisinde nasıl gösterileceğine de göz atacağız.

/Home/Index

İkinci olarak Details() Actionına ve URL 'de nasıl gözükeceğine göz atalım.

/Home/Details

Oluşturulan metotlarda geri dönüş değeri view olmalıdır. ActionResult kullanımında geri dönüş değerlerinin neler olacağını daha önceki yazılarımızda incelemiştik. Index() metodu açıldığı sayfada isteğe cevap verilmesi için View() ı kullanmaktadır. Details() ise onu ilişkilendiren bir istek geldiğinde Index view ına yönlendirme işlemini yapmaktadır.

Index() actionının geri dönüş değeri olan View(); 'ı web sunucunu nasıl algıladığına göz atmak gerekirse,

/View/Home/Index.aspx

Yukarıda verdiğimiz yol web sunucuna giden adrestir. Peki bu bize ne anlama gelmektedir. En baştan itibaren View yapacağı ana işi belirtmektedir. Home eşleştirileceği Controller 'ın adını, Index Controller içerisindeki Action (Metot) adını belitmektedir.

Details() 'te olduğu gibi başka bir view 'a yönlendirmek istediğimizde elimizle ya da sistemden gelen bir parametre ile harici bir view adı veririz. Bunu web sunucumuzun nasıl anladığına göz atmak gerekirse,

View("sertur"); kullandığımızda /View/Home/sertur.aspx şeklinde olacaktır.

View a İçerik Eklemek

Şimdiye kadar View lar hangi amaçla oluşturulmakta ve Controller 'dan nasıl kullanıldığına değindik. Şimdi dinamik olarak HTML 'i nasıl kullanabileceğimize değinmeye çalışacağız.

Şimdi Index view 'ında şu anın zamanını HTML nasıl göstediğimizi bir hatırlayalım.

View\Home\Index.aspx

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" >    <head id="Head1" runat="server">        <title>Index</title>    </head>    <body>       <div>           <% Response.Write(DateTime.Now);%>       </div>    </body> </html>

HTML sayfada günün zamanını sağlayan kod parçası <% Response.Write(DateTime.Now);%> dır. Tabii şimdiden dediklerinizi duyar gibiyim. "Eğer böyle kullanacaksak MVC kullanmanın anlamı ne? Azcıkta burada düzenleme yapsalardı" der gibisiniz. :) ASPX sayfalarımızın içerisine C# kod yazdığımızda da <% %> yazım şeklini kullanır ve içerisine scriptlerimizi C# olacak şekilde yazardık. MVC 'de ise HTML tarafına yönetilebilir kod yazılmasının yanlış olduğundan bahsetmiştik. Microsoft çalışanları da bu tür sık kullanımları görerek ufak kolaylıklar geliştirmişlerdir. Örneğin web sayfalarında bir değer göstermek için Response.Write() sık sık kullanmaktayız. Bu sebepten ötürü kullanmak istediğimiz sadece <%= %> kullanmamız yeterli olacaktır.

Örnek ile göstermek gerekirse,

View\Home\Index.aspx

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" >    <head id="Head1" runat="server">        <title>Index</title>    </head>    <body>       <div>           <%= DateTime.Now %>       </div>    </body> </html>

İki işlem sonucunda da kullanıcının gördüğü aynı olacaktır. Ayrıca bize bir katkısı da html sayfada daha az metin kullanacağımız için sayfa boyutu daha da azalacak ve sayfanın bir öncekine oranla daha hızlı açılmasına olanak tanınmış olacaktır.

HTML Helper Kullanımı ile View İçeriğinin Oluşturulması

HTML Helper nesnelerini çağırarak View sayfamızında içeriğine çok hızlı ve kolayca oluşturabilmemiz mümkündür. HTML Helper metotları işlemleri sonucunda string tip üretmektedir. HTML Helper 'da standart HTML elementleri kullanılmaktadır. Bunları;

•Html.ActionLink: <a> elementi oluşturarak bir action metoduna link verilmesini sağlar.
•Html.BeginForm: <form> elementini oluşturur.
•Html.CheckBox: Checkbox; yani <input type="checkbox"...> elementi oluşturur.
•Html.DropDownList: <select..><option>..</option>.....</select> elementlerini(WebForm'lardan tanıdığımız DropDownList'in çıktısı) oluşturur.
•Html.Hidden: HTML içerisinde gizli alan; yani <input type="hidden"...> elementi oluşturur.
•Html.ListBox: <select multiple="multiple"..><option>..</option>.....</select> elementlerini(WebForm'lardan ListBox'ın çıktısını) oluşturur.
•Html.Password: Şifre için metin kutusu oluşturur(<input type="password"...>)
•Html.RadioButton: <input type="radio"....> elementi oluşturur.
•Html.TextArea: Birden fazla satırı olan bir metin kutusu oluşturur(<textarea....> elementi).
•Html.TextBox: Metin kutusu oluşturur(<input type="text"....> elementi).

olarak sıralayabilmemiz mümkündür.

Şimdi HTML helper kullanarak basit bir örnek oluşturalım. Örneğimizde BeginForm(), TextBox() ve Password() elementleri yer alsın.

View\Home\Index.aspx

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" >     <head id="Head1" runat="server">        <title>Login Form</title>     </head>     <body>        <div>           <% using (Html.BeginForm())           { %>                 <label for="UserName">User Name:</label>              <br />                 <%= Html.TextBox("UserName") %>              <br /><br />                 <label for="Password">Password:</label>              <br />              <%= Html.Password("Password") %>                 <br /><br />                 <input type="submit" value="Log in" />             <% } %>         </div>    </body> </html>

Response.Write() yerine <%= %> kullanmamızın daha kolay olacağından bahsetmiştik. Bu sebeple TextBox() ve Password() kullanırken bu kullanım şeklini tercih ettik. Yaptığımız işlemler sonrasında karşımza çıkan görünüm aşağıdaki gibi olacaktır.

Gördüğünüz üzere sadece HTML helper ları kullanarak istediğimizi gerçekleştirdik. Peki, HTML kullanaraj bu işlemi yapmak isteseydik yazmamız gereken kod parçacığının nasıl olacağına değinelim.

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" >     <head id="Head1" runat="server">        <title>Login Form</title>     </head>     <body>        <div>        <form method="post" action="/Home/Login">        <label for="userName">User Name:</label>        <br />        <input name="userName" />        <br /><br />        <label for="password">Password:</label>        <br />        <input name="password" type="password" />        <br /><br />        <input type="submit" value="Log In" />        </form>       </div>    </body> </html>

İki yöntemde de sorunsuz bir şekilde çözüm aldığımızı gördük. Ancak MVC kullanmak istediğimiz durumlarda HTML helper kullanmak çok daha yararlı olacaktır. Değindiğimiz ve bir süre daha değineceğimiz örnekler geliştirilen uygulamalar için çok basit kalabilir. Örneğin aklınıza GridView() kontrolü yok mu diye gelebilir. Verdiğimiz listeden de görebileceğiniz gibi yoktur. Ancak yazımızın devamında göreceğimiz üzere HTML Helper özellikleri kullanarak kendimiz GridView() 'ı oluturacağız.

View Sayfalara Verilerin Taşınması
Controller içerisnde View sayfalara veri aktarılması mümkündür. View Data özelliği ile bu işlemler gerçekleştirilebilir. Bu özellik gönderilen verilerin tamamını bir pakete alarak view sayfada kullanılabilir bir biçimde kullanılabilmesine olanak tanımaktadır.

ViewData özelliğini bir örnek ile incelemek gerekirse,

Controller/UrunController.cs

using System.Web.Mvc; namespace MvcApplication1.Controllers {     public class ProductController : Controller     {          public ActionResult Index()          {               ViewData["Mesaj"] = "Merhaba Dünya!";               return View();          }     } }

ViewData özelliğine view sayfada göstereceğimiz veriyi atıyoruz. Sonrasında Html.Encoding() özelliği ile gelen veriyi çözümleyerek son kullanıcı ekranında görünmesini sağlıyoruz. Html.Encoding() controller lardan gelen string verileri view sayfalarda görülecek şekilde çözümleyerek görüntülenmesine olanak tanımaktadır.

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %> <asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">     Index </asp:Content> <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">     <h2>Index</h2>     <%= Html.Encode(ViewData["Mesaj"]) %> </asp:Content>

Html.Encode() yardımıyla Merhaba Dünya! mesajımızı basitçe gösteriyor olduk. Bu işlemimiz sonucunda ekran görüntüsü aşağıdaki gibi olmaktadır.



Basit merhaba dünya örneğimiz dışında veri tabanında alınan verileri view sayfasında da göstermek istediğimiz ViewData ve Html.Encoding() kullanılması mümkündür.

Harici HTML Helper (Yardımcı HTML) Kullanımı
MVC uygulamalarında View sayfalarında gösterilen sayfa içeriğinin HTML Helper (yardımcı HTML) yardımıyla gösterildiğini görmüş ve geçmiş örneklerimizde bunları detaylı bir biçimde incelemiştik. Normalde alışık olduğumuz <form> elementinin yerine Html.BeginForm() özelliği kullanılmaktadır. HTML elementlerinin en sık kullanıldığı zamanlarda <input> ve <img> en çok tercih edilen elementlerdi. Zaman geçtikçe bunların yerini Asp.Net kontrolleri almıştır. Fakat Asp.Net kontrolleri de arka planda derlendiğinde <input> olduğu gözlenmiştir. Bu sebepten bizlere HTML Helper kütüphanesi hazırlanmış ve kullanımımıza sunulmuştur. Tekrardan kullanabileceğimiz en temel HTML Helper metotlarına göz atmak gerekirse;

•Html.ActionLink()
•Html.BeginForm()
•Html.CheckBox()
•Html.DropDownList()
•Html.EndForm()
•Html.Hidden()
•Html.ListBox()
•Html.Password()
•Html.RadioButton()
•Html.TextArea()
•Html.TextBox()
şeklinde sıralayabilmemiz mümkündür.

Not: View sayfalar kullanılan elementlerine HTML Helper 'ı çözümlerken <%= %> kullanımı ile <% %> birbirlerine eş değildirler. İkinci şekilde kullanmak istediğimizde uygulama hata verecek ve çalışmayacaktır.

HTML Helper ile Statik Metot Oluşturma

Basit olarak HTML Helper da kullanılmak üzere yeni bir statik metodu nasıl oluşturabileceğimize değineceğiz. Yapacağımız örnekte view sayfaya eklenecek kontrolde sabit değeri ve kullanıcının göreceği metin olacaktır.

Helpers\LabelHelper.cs

namespace MvcApplication1.Helpers {     public class LabelHelper     {         public static string Label(string target, string text)         {              return string.Format("<label for='{0}'>'{1}'</label>", target, text);         }     } }

Geri dönüş değeri string olan statik bir metot hazırladık. Artık bizimde bir HTML Helper metodumuz vardır. Şimdi bunu View sayfada nasıl kullanacağımızı açıklamaya çalışalım. İlk olarak yapmamız gereken sayfaya Helpers alanını göstermemiz gerekmektedir. Bu işlemi <%@ imports %> ile yapacağız. Sonrasında ise <%= %> içerisine LabelHelper.Label  'ı kullanarak istediğimiz sonucu alabiliriz. Şimdi yazı olarak anlattıklarımızı uygulamalı olarak nasıl yapacağımıza değinmeye çalışalım.

<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %> <%@ Import Namespace="MvcApplication1.Helpers" %> <asp:Content ID="indexTitle" ContentPlaceHolderID="TitleContent" runat="server">    Home Page </asp:Content>    <asp:Content ID="indexContent" ContentPlaceHolderID="MainContent" runat="server">    <p>    <div>       <%using(Html.BeginForm())       {%>          <%=LabelHelper.Label("firstName", "First Name:") %>          <br />          <%=Html.TextBox("firstName")%>          <br /><br />          <label for="Password">Password</label>          <br />          <%=Html.Password("Password")%>          <br /><br />          <input type="submit" value="Giris" />       <%}%>    </div>    </p> </asp:Content>

View sayfamızda istediğimiz değerler sorunsuzca görülmektedir.



Artık kendimize ait bir HTML Helper sınıfımızı vardır. Fakat biz bu metotları kullanmak istediğimizde hangi sınıf adıydı diye hatırlamamız gerekecektir. En iyi yöntem Html Helper metotlarını extension lar yardımı ile kullanılmasına olanak tanımak olacaktır.

HTML Helper Uzantılı(Extension) Metotlar Oluşturmak

HTML Helper ile çalışırken MVC Framework bünyesinde oluşturulmuş olan metotları kullanarak view sayfalarımızın içeriklerini oluştururuz. Bu yöntem standart HTML elementlerinden yararlanılarak oluşturulmuş metotları projelerimizde Html Helper olarak kullanabilmemize olanak tanımaktadır. Şimdi biz örneğimizde HTML helper sınıfına ek bir metot ekleyerek html. koyduğumuzda bizim hazırladığımız metodunda kullanılmasını nasıl olacağını incelemeye çalışacağız.

Helpers\LabelExtensions.cs

using System; using System.Web.Mvc; namespace MvcApplication1.Helpers {     public static class LabelExtensions     {         public static string Label(this HtmlHelper helper, string target, string text)         {             return String.Format("<label for='{0}'>{1}</label>", target, text);         }     } }

Visual Studio üzerinde intellisense i kullandığımızda view sayfada html helper için extension olduğuna bize belirtmektedir.



Yaptığımız değişikliğe göre index.aspx sayfamızı güncellersek sonuç aşağıdaki gibi olacaktır.

<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %> <%@ Import Namespace="MvcApplication1.Helpers" %> <asp:Content ID="indexTitle" ContentPlaceHolderID="TitleContent" runat="server">    Home Page </asp:Content>    <asp:Content ID="indexContent" ContentPlaceHolderID="MainContent" runat="server">    <p>    <div>       <%using(Html.BeginForm())       {%>          <%=Html.Label("firstName", "First Name:") %>          <br />          <%=Html.TextBox("firstName")%>          <br /><br />          <label for="Password">Password</label>          <br />          <%=Html.Password("Password")%>          <br /><br />          <input type="submit" value="Giris" />       <%}%>    </div>    </p> </asp:Content>

Evet. Artık Html helper metotları gibi kullanılabilen bir metodumuz oluşmuştur.

Veri Tabanı Tablolarında Verilerin Gösterilmesi

Yazımızda şu ana kadar View üzerinde yapabileceğimiz temel işlemleri ve kendi istediğimiz doğrultuda HTML yardımcısı oluşturmayı incelemeye çalıştık. Yazımıza veri tabanı işlemleri sonucunda dönen verileri View sayfaları da html yardımcıları kullanılarak nasıl gösterebileceğimizi inceleyerek devam ediyoruz.

Konumuzu örnek üzerinde anlatmaya devam ediyoruz. İlk olarak yapılması gereken bir veri tabanı oluşturmak ve içerisine bir tablo eklemek olacaktır. Yazımızda kullanacağımız veri tabanının adı Sirket, Tablonun adı da Film olacaktır. Tablonun alanları ve tiplerine aşağıdaki resimden erişebilirsiniz.



Veri tabanı ve tabloyu oluşturduğumuza göre artık MVC Framework ile oluşturmuş olduğumuz projemize ekleyebiliriz. Bu işlemi yaparken Ado.Net Entity Framework 1.0 'ı kullanacağız. Projeye ekleyebilmek için Model klasörünün üzerine sağ tıklama yapıp çıkan ekranda Ado.Net Entity Data Model 'i seçerek ekle diyoruz. Sonrasında boş bir model oluşturacağız dedikten sonra veri tabanının ne olacağı gibi bilgileri girerek bir sonrasında modeli uygulamaya eklenmiş oluyor.


Artık film tablosu modele dönüştürüldü ve üzerinde işlem yapılmak üzere hazır durumdadır. Eğer model üzerinde bir işlem yapıyorsanız yapmanız gereken o dosyayı kaydetmek, sonrasında ise projeyi bir kere derlemek olacaktır. Sonrasında kullanılabilir sorunsuzca entity model kabiliyetlerini kullanarak işlemleri yapabiliriz.


Film Controller Oluşturuyoruz

Controller hakkındaki ayrıntılı bilgileri daha önceki yazılarımızda değinmiştik. Şimdi ise hızlıca controller 'ı oluşturup işlemlerimizi yapmaya devam edeceğiz. İlk olarak en başta projeye UrunController.cs sınıfını oluşturuyoruz.



Sonrasında karşımıza geçen ekranda Controller adını belirterek oluştur diyoruz.



Sınıfı oluşturduktan sonra düzenleme yapmaya başlıyoruz. Index() metoduna tablo içerisindeki verileri çekerek işlemi yapıyoruz.

using System.Linq; using System.Web.Mvc; using MvcApplication1.Models; namespace MvcApplication1.Controllers {     public class FilmController : Controller     {         //         // GET: /Film/         public ActionResult Index()         {             var entity = new SirketDbEntities();             return View(entity.FilmlerSet.ToList());         }     } }

Veri tabanına eriştik ve sonuçlar artık view sayfada kullanılmak üzere hazır durumda bizi bekliyor. Şimdi view sayfayı oluşturarak işlemlerimize devam ediyoruz. Otomatik olarak oluşturulması için Index() metodunun üzerinde sağ tıklama yaparak AddView seçeneğini seçiyoruz. Sonrasında karşımıza gelen ekranı aşağıdaki şekline getirerek veri tabanından gelen verileri gösteren view sayfamızı oluşturmuş oluruz.



Otomatil olarak oluşturulan view sayfasındaki kodlar aşağıdaki gibi olmuştur.

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<IEnumerable<MvcApplication1.Models.Filmler>>" %>    <asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">       Index    </asp:Content>    <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">    <h2>Index</h2>    <table>       <tr>          <th></th>          <th>             Id          </th>          <th>             Film_Adi          </th>          <th>             Yonetmen          </th>          <th>             Cikis_Tarihi          </th>       </tr>       <% foreach (var item in Model) { %>       <tr>          <td>             <%= Html.ActionLink("Edit", "Edit", new { id=item.Id }) %> |             <%= Html.ActionLink("Details", "Details", new { id=item.Id })%>          </td>          <td>             <%= Html.Encode(item.Id) %>          </td>          <td>             <%= Html.Encode(item.Film_Adi) %>          </td>          <td>             <%= Html.Encode(item.Yonetmen) %>          </td>          <td>             <%= Html.Encode(String.Format("{0:g}", item.Cikis_Tarihi)) %>          </td>       </tr>       <% } %>    </table>    <p>       <%= Html.ActionLink("Create New", "Create") %>    </p> </asp:Content>

Bu işlemler doğrultusunda ekran görüntüsü aşağıdaki biçimde olacak ve isteğimizi karşıladığını görüyor olacağız.



TagBuilder Sınıfını Kullanarak Html Helper Oluşturmak

TagBuilder sınıfını kullanarak resim ve benzeri dosyaları projede gösterebilmemiz mümkündür. Bu işlemleri gerçekleştirirken diğer view sayfalarda da kullanıldığı gibi html yardımcı (HTML Helper) yardımcı kullanılarak gerçekleştirilir.

TagBuilder sınıfınının genel yapısına göz atmak gerekirse,

AddCssClass() = Yeni bir css sınıfı eklenmesine olanak tanır. class=""
GenerateId() = Özniteliklerini ekleyerek id işlenir. Bu metot değişikliklerin periyodik olarak ID bazlı değişiklik olanağı tanır.
MergeAttirbute() = Özniteliklerini ekleyerek id işlenir. Aşırı yüklenmiş metotlar için kullanılmaktadır.
SetInnerText() = İç metin ayarlamak için kullanılır.
ToString() = Daha fazla etiket oluşturulmasına olanak tanımaktadır.

TagBuilder sınıfının dört önemli özellikleri vardır.

Attribute = Temsil edilen tüm etiketlerin özniteliklerini taşır.
IdAttributeDotReplacement = Tekrardan gösterilen etiketlerin GenerateId() metodu kullanılarak değişik periyotlarda işler.
InnerHTML = Temsil edilen etiketin iç içeriğini sunar.
TagName = Etiketi gösterir.

TagBuilder sınıfı

TagBuilder sınfı aslında gerçek bir kullanılan ana sınıf değildir. StringBuilder sınıfı miraslanarak oluşturulmuş bir sınıftır.


Resim Html Helper Oluşturuyoruz
TagBuilder sınıfının metotlarından GenerateId() ve MergeAttribute() metotlarını kullanarak controller ı oluşturulalım.

using System.Web.Mvc; using System.Web.Routing; namespace MvcApplication1.Helpers {    public static class ResimHelpers    {       public static string Resim(this HtmlHelper helper, string id, string url, string alternateText)       {          return Resim(helper, id, url, alternateText, null);       }       public static string Resim(this HtmlHelper helper, string id, string url, string alternateText, object htmlAttributes)       {          // Create tag builder          var builder = new TagBuilder("img");          // Create valid id          builder.GenerateId(id);          // Add attributes          builder.MergeAttribute("src", url);          builder.MergeAttribute("alt", alternateText);          builder.MergeAttributes(new RouteValueDictionary(htmlAttributes));          // Render tag          return builder.ToString(TagRenderMode.SelfClosing);       }    } }

TagBuilder sınıfını kullanarak kendi HTML Helper metodumuzu oluşturuyoruz ve view sayfada kullanılabilir duruma getiriyoruz. Bu noktada yapmamız gereken view sayfada Html.Resim() metodunu kullanmak olacaktır.

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %> <%@ Import Namespace="MvcApplication1.Helpers" %> <asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">    Index </asp:Content> <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">    <h2>Index</h2>    <%= Html.Encode(ViewData["Mesaj"]) %><br />    <%= Html.Resim("img1", ResolveUrl("~/Content/editor_turhal.jpg"), "Turhal Temizer")%>    <%= Html.Resim("img1", ResolveUrl("~/Content/editor_turhal.jpg"), "Turhal Temizer", new {border="4px"})%> </asp:Content>

İşlemlerimiz sonucunda ekran görüntüsü aşağıdaki gibi olacaktır.



Yazımızda detaylı olarak view kavramına, Html Helper 'a ve kendi HTML helper metotlarımızı oluşturmayı detaylı bir biçimde incelemeye çalıştık. Bir sonraki Asp.Net MVC Framework yazımızda Model kavramını incelemeye çalışacağız.

Herkese mutlu günler diliyorum.