Layout View
Layout view – bu barcha viewlar uchun umumiy bo’lgan qismlarni (m: header, footer) o’z ichiga
oluvchi umumiy view.
Layout viewlar barcha viewlar uchun umumiy bo’lganligi sababli Views/Shared papkasi ichida
joylashgan bo’ladi.
Layout viewni yaratish:
1. Views papkasida Shared papkasi ochiladi
2. Add>New Item>Razor Layout ketma-ketligi bilan .cshtml fayl yaratiladi.
Layout view yaratishda fayl nomini umumiy kelishilgan nom - _Layout.cshtml deb beramiz
(boshqa nom bersa ham bo’ladi).
_Layout.cshtml ichida @RenderBody() boshqa o’zgaruvchi viewlarning kontentini layoutning
kerakli qismiga chiqarib beradi.
Endi oxirgi qilinadigan ish layout viewni boshqa viewlarga biriktirish bo’ladi. Chunki, viewlarda
default layoutda null turgan bo’ladi. Uni view ichida turib quyidagicha o’zgaritirib qo’yamiz:
@{
Layout = "~/Views/Shared/_Layout.cshtml";
}
Layout viewda ViewData bilan ishlash
View va Layout view bir xildagi ViewData obyektiga murojaat qilish imkoniga ega bo’ladi. Bu
imkoniyatdan foydalanib, sahifaning viewsidan turib layoutga yoki aksincha ko’rinishda ma’lumot
uzatish mumkin bo’ladi. Misol uchun, layout viewdagi sahifa titleiga har bir sahifaga mos title
berishni ko’raylik:
Sahifa viewsi:
@{
Layout = "~/Views/Shared/_Layout.cshtml";
ViewData["Title"] = "Home Page";
}
<article>
<h2>Products Page</h2>
<p>Details of products page</p>
</article>
Layout view:
<!doctype html>
<html lang="en" class="no-js">
<head>
<title>MySite | @ViewData["Title"]</title>
<link rel="stylesheet" href="~/[Link]">
<script src="~/[Link]"></script>
</head>
<body>
@RenderBody()
<footer></footer>
</body>
</html>
_ViewStart.cshtml
Viewlarning bajarilish ketma-ketligiga qarsak _ViewImports.cshtml faylidan keyin
_ViewStart.cshtml faylini ko’rishimiz mumkin. Xo’sh, qanday view fayl?
_ViewStart fayli view fayldan oldin ishga tushadigan maxsus view bo’lib, layout viewni boshqa
barcha sahifa viewlari uchun umumiy qilib belgilashda ishlatiladi.
_ViewStart.cshtml faylga
@{
Layout = "~/Views/Shared/_Layout.cshtml";
}
bilan layout berilganidan keyin, sahifa viewlaridan layout belgilash kodini olib tashalasa ham
bo’ladi.
_ViewStart.cshtml fayli ikki xil bo’ladi: global va local. Global _ViewStart.cshtml fayli barcha
kontrollerning viewlari uchun amal qiladi. Locali esa faqat bitta kontrollerning viewlari uchun
ishlaydi. Biror bir controller sahifasi uchun boshqacha layout ishlatish kerak bo’lganda local
_ViewStart.cshtml faylidan foydalanish mumkin.
Dinamik Layout Viewlar
Dinamik layout viewda view uchun layoutni biror bir shart asosida berish mumkin bo’ladi. Ya’ni,
foydalanuvchi biror ma’lumotni berib yuborganda bir turdagi layout view, aks holda boshqa layout
view ishlatilishi mumkin.
Misol:
@{
if([Link] != null)
{
Layout = "~/Views/Shared/[Link]";
}
}
<article>
<h2>Search Product Page</h2>
<p>Details of search product page</p>
</article>
Layout viewda sectionlar
Section viewdagi biror kontentni layoutning belgilangan qismida chiqarish imkonini beradi.
Sintaksisi:
Viewda:
@section section_name {
section content
}
Layoutda:
@RenderSection("section_name")
Bunda view ichida turib layout viewda biror kontentni chiqarish mumkin bo’ladi.
Misol:
Viewda:
<article>
<h2>About Page</h2>
<p>Details of about page</p>
</article>
@section footer_section {
<p>Contact: 123456789</p>
}
Layout viewda:
<!doctype html>
<html lang="en">
<head>
<title>MySite</title>
</head>
<body>
@RenderBody()
<footer>
@RenderSection("footer_section", false)
<address>
Contact: <a href="[Link] me</a>
</address>
</footer>
</body>
</html>
Bu yerdagi @RenderSection ning ikkinchi parametri bu section ixtiyoriy ekanligini bildiradi. Agar
sectionni ixtiyoriy qilmasak, shu layoutga tegishli barcha viewlarda bu sectionni qo’yib
chiqishimizga to’g’ri keladi. Biz esa bu sectionni faqat about viewga qo’shdik.
Sectiondan faqat biror viewga tegishli bo’lgan script yoki style fayllarni yuklash uchun foydalanish
mumkin.
Ichma-ich layout viewlar
Ichma-ich layout viewlarda bitta layout view ichida boshqa biror bir layout viewni ishlatishimiz
mumkin. Ichma-ich layout viewlardan kamdan kam holatlarda foydalaniladi.
Bunda ichki layout viewlar uchun bitta master (asosiy) layout yaratib olinadi.
Ichma-ich layoutlarda ham oddiy viewlar kabi layout fayl ko’rsatib qo’yiladi:
@{
Layout = "~/Views/Shared/_MasterLayout.cshtml";
}
<!doctype html>
<html lang="en">
<head>
</head>
<body>
</body>
</html>