Ramazan HABER / C# MVC / Layout ve Partial View Kullanımı
1-) C# MVC - Layout ve Partial View Kullanımı
* Views klasörünün altına -> Shared diye klasör oluştur -> ve sağtık -> Add->View -> _Layout diye isim ver ve oluştur. Bu senin masterPage olacak. ve action'un view'ini oluştururken en alt seçenekten bu Layout'u seçeceksin.
*_Layout.cshtml kısmında @RenderBody() diye bir kod tanımla bu kod kısmı değişecek kısımdır.
1-) C# MVC - _Layout.cshtml
@{ Layout = null;}
<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width" /><title>_Layout</title></head>
<body>
<div>Header Kısmı</div>
@RenderBody() <!--Bu Kısım değişen kısım diğer kısımlar ise sabit kalacak olan kısım-->
<div>Footer Kısmı</div>
</body></html>
2-) _Index.cshtml -> dikkat bu view'i oluştururken Layout'unu yani master page'ini seçerek oluşturdum. kodu aşağıda
@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>BURASI BODY KISMINA GELEN YER YANİ DEĞİŞEN YER</h2>
3-) HomeController.cs
using System.Web.Mvc;
namespace LayoutMVC.Controllers
{
public class HomeController : Controller
{
// GET: Home
public ActionResult Index(){
return View();
}}}
4-) Header ve Footer kısmınıda Ayırmak için Views->Shared->Sağ tık-> Add View-> Create a as partial View-> dedikten sonra ismini _Header veriyorum ve boş bir sayfa geliyor içine bir div ekliyorum aşağıdak gibi ve Aynı şekilde _Footer da ekliyorum
*_Header.cshtml
<div>Header Kısmı</div>
*_Footer.cshtml
<div>Footer Kısmı</div>
*_Layout.cshtml ise aşağıdaki gibi ayarlıyorum işte bu kadar
@{Layout = null;}<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width" /> <title>_Layout</title></head>
<body>
@Html.Partial("_Header")
@RenderBody() <!--Bu Kısım değişen kısım diğer kısımlar ise sabit kalacak olan kısım-->
@Html.Partial("_Footer")
</body>
</html>
5-) Şimdi ise Controllerden Action tanımlayalım ve Layout'umuzu yani _Layout u seçelim oluşturalım aşağıdaki gibi çağıralım göreceksiniz sadece orta kısım değişecektir
örneğin:
Header.cshtml -> aşağıdaki gibi olsun ->
<ul>
<li><a href="/Home/Anasayfa"> Anasayfa</a></li>
<li><a href="/Home/Hakkimizda"> Hakkımızda</a></li>
<li><a href="/"> Index</a></li>
</ul>
HomeController.cshtml ise aşağıdaki gibi
public class HomeController : Controller
{
// GET: Home
public ActionResult Index(){return View();}
// GET: Home
public ActionResult Anasayfa(){return View();}
// GET: Home
public ActionResult Hakkimizda(){return View();}
}
461