Makale Özeti

Bu yazmımızda Asp.Net MVC Framework te kullanılmakta olan View sayfaların nasıl ve hangi mantıkla oluşturulduğunu incelemeye çalışıyoruz...

Makale

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 merha 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.

Herkese mutlu günler diliyorum.

Turhal Temizer
info@turhaltemizer.com
http://turhal.blogspot.com