Merhaba MVC Severler,
Önceki yazımda Html Helper’larıyla CSS ve JavaScript nasıl kullanılır onu konuştuk. Sayfanın sonunda uygulmayı indirebilirsiniz. Bu yazımda aşağıdaki Html Helper’ları inceleyeceğiz;
- Html.ActionLink
- Html.RouteLink
- Html.Partial
- Html.RenderPartial
- Html.Action
- Html.RenderAction
Herhangi bir uygulama içerisinden diğer kaynaklara linkler verebilir, View’leri parçalara ayırarak bölümler halinde tekrar tekrar kullanabilir ya da diğer sayfaları kendi sayfalarımız içerisinde açabiliriz. Bu işlemler için Html Helper’larını kullacağız.
Html.ActionLink
ActionLink metotu hyperlink (<a> elementi) render eder. Örneğin Index View’inden, About View’ini görüntüleyecek link yazamak istersen bu metot tam işimize yaramaktadır. 10 tane overload’ı vardır.
Kullanımı:
@Html.ActionLink("Hakkımda","About")
Html Çıktısı:
<a href="/Home/About">Hakkımda</a>
Eğer çağıracağız action için parametre vermeniz gerekebilir böyle durumlarda aşağıdaki kullanım işimize yarayacaktır.
ActionResult tipinde About:
public ActionResult About(string id, string sourceID) { ViewBag.Message = String.Format("gelen ID= {0}, sourceID={1}", id, sourceID); return View(); }
Index View’imin içinde:
@Html.ActionLink("Hakkımda", "About", new RouteValueDictionary() {{"id","5"} ,{"sourceID","10"}})
Html.RouteLink
RouteLink’te, ActionLink helper’ına benzer tasarıma sahiptir. Fakat aynı zamanda parametre olarak Route Name alır ve Controller ve Action Name için herhangi bir parametre almaz. Yukardaki örneğimizi tekrar yazalım.
Kullanımı:
@Html.RouteLink("Hakkımda",new RouteValueDictionary(){{"action","About"},{"id","5"},{"sourceID","10"}})
Html Çıktısı:
<a href="/Home/About/5?sourceID=10">Hakkımda</a>
Html.Partial
Partial metotu, herhangi bir Partial View’i veya Normal View’i bir string içerisine render eder. Birden çok farklı View içinden render etmek istediğiniz partial view gibi render edebilirsiniz. Index sayfası içerisinde Footer Action’i açıyoruz.
Kullanımı:
@Html.Partial("Footer")
Html Çıktısı:
Html.RenderPartial
RenderPartial, Render’e benzemektedir. Fakat RenderPartial’i doğrudan string döndürmek yerine yanıtı yazar. Kullanım olarak kod blokları arasında yazmanız gerekiyor. Aşağıdaki iki kullanımında çıktısı aynıdır:
@{Html.RenderPartial("Footer"); } @Html.Partial("Footer")
Peki Partial’i mi yoksa RenderPartial’i mi kullanmam gerekiyor?
Genel olarak, Partial‘i RenderPartial‘a tercih etmenizi tavsiye ediyorum. Çünkü Partial, ek olarak kod blokları yazıpta içerisinde kullanmadığımız için daha kullanışlıdır. Fakat RenderPartial, doğrudan gelen yanıtı yazdığı için daha performanslıdır.
Html.Action ve Html.RenderAction
Action ve RenderAction, Partial ve RenderPartial’a benzemektedirler. Partial helperi, başka bir dosyadaki View içeriğini render etmeye yardım eder. Action ise, tekrar kullanılabilirlik açısından daha esnektir çünkü controller action farklı modelleri çağırabilir ve controller içerisinde bulunan diğer yapıları da kullanabilir.
RenderAction ile Action arasındaki fark RenderAction gelen yanıtı doğrudan yazar. Aşağıdaki gibi bir yapı kurduğumuzu düşünün:7
Home Controller:
public ActionResult Menu() { return PartialView(); }
CSS:
.list li
{
list-style-image:none;
display:inline;
margin-left:10px;
}
Home içerisindeki Menu isimli View’i Create as Partial View olarak oluşturuyoruz.
Kullanımı ve Html Çıktısı:
Ayrıca eğer actionName’in adını değiştirmek isterseniz şu şekilde bir kullanımda yapabilirsiniz:
[ActionName("SahaneMenu")] public ActionResult Menu() { return PartialView(); }
Bu sefer Html.Action(“SahaneMenu”) demeniz gerekiyor.
İndirme
Uygulamayı indirmek için tıklayın.
Umarım faydalı bir yazı olmuştur, örnekler yaptığımıda çok daha iyi anlaşılacaktır.
Bir sonraki yazımda Url Helper’ini anlatacağım.
MVC ile kalın…
#1 by ali on July 5, 2012 - 4:21 pm
çok teşekkürler, ama örnek ile download linkinde ki proje aynı değil sanki
örneğinizi çalıştıramadım. hata veriyor.
Error executing child request for handler ‘System.Web.Mvc.HttpHandlerUtil+ServerExecuteHttpHandlerAsyncWrapper’.
#2 by Mahmut Can Sözeri on July 5, 2012 - 5:26 pm
Merhaba içerikteki ve linkteki proje aynı proje. Şimdi tekrar kontrol ettim.
Siz rar içerisinden tamamen çıkarıp o şekilde çalıştırdınız mı? Çünkü ben vermiş olduğum linkten indirdim ve çalışmasında herhangi bir problem bulamadım.
#3 by Metin Akbaş on September 27, 2013 - 9:10 am
Teşekkürler.
#4 by Güven Şahin on December 18, 2013 - 9:20 pm
teşekkürler.
#5 by TNJ on June 13, 2016 - 9:54 am
Öncelikle emeğinize sağlık Hocam, Yalnız bir kaç noktada takıldım, bazı cümleler devrik olduğu için ve açıklayıcı olmadığı için anlayamadım. Örnek olarak : Action ise, tekrar kullanılabilirlik açısından daha esnektir çünkü controller action farklı bir model tarafından build edilebilir ve controller içerisinde context’i kullanabilir yapabilir.
#6 by Mahmut Can Sozeri on June 15, 2016 - 10:01 am
Haklısınız bende hatalı olduğunu gördüm, cümleyi düzelttim. Uyarınız içn teşekkürler.
#7 by armağan cebiroğlu on August 29, 2017 - 3:01 pm
Mahmut bey öncelikle paylaşımınız için çok teşekkürler çok yararlı oldu. Benim kendi denememde Html.Action olarak bir partial view çağırdığımda söyle bir sayfanın içerisinde DOCTYPE html den başlayarak tüm bir sayfa gibi her şeyi ekliyor. Bu neden olabilir. Tüm sorulara cevap veriyor musunuz bilmiyorum ama belki karşılaşmışsınızdır.Cevaplayyabilirseniz sevinirim. Şimdiden teşekkür ederim.
/Scripts/modernizr-2.6.2.js
#8 by Mahmut Can Sozeri on August 30, 2017 - 1:47 pm
Merhabalar, partial view’inizin içerisinde HTML taglarının olmaması gerekir. Normal şartlarda PartialView’ler örneğin bir yorum alanı, bir üyelik giriş bölümü gibi, belirli bölümleri temsil etmek için oluşturuluyor. Yani partial View’inizin içerisinde html tag’larını kaldırıp sadece body içeriğini koymanız durumunda bu sorun ile karşılaşmazsanız. Yazıdaki PartialRender ya da Partial bölümleri altındaki örneklerde de bu açıkca görünmektedir.
İyi çalışmalar dilerim.