چرا از Layout استفاده کنیم؟

ek3nk4r 2 هفته پیش

0 0 خواندن این مطلب 4 دقیقه زمان میبرد

پیشنهاد ویژه

قیمت لیر ترکیه اعزام دانشجو تحصیل در ترکیه خرید فالوور اینستاگرام

صفحات طرح بندی نوع خاصی از صفحات هستند که می توانند به عنوان یک الگو برای صفحات دیگر استفاده شوند. آنها برای تعریف یک Layout مشترک استفاده می شوند که می تواند در چندین صفحه به اشتراک گذاشته شود.

فهرست مطالب

چرا باید از Layout استفاده کنیم؟

استفاده از Layout اجباری نیست، اما نیاز به صفحات Layout زمانی ایجاد می شود که بخواهید یک طرح بندی مشترک برای چندین صفحه، مانند هدر، پاورقی یا منوی پیمایش تعریف کنید. با استفاده از صفحه Layout، می توانید Layout را از هر صفحه جدا کنید و نگهداری و به روز رسانی آن را آسان تر کنید.

معمولا در توسعه وب چندین صفحه HTML داریم که از فرمت هدر و فوتر یکسان استفاده می کنند و قسمت سر آنها تا حدودی یکسان است. Layout صفحه ای است که می توانیم قسمت header، footer و head را اضافه کنیم تا نیازی به تکرار آنها در صفحات نباشد.

تصویر بالا موقعیت یک صفحه را به رنگ نارنجی نشان می دهد که در داخل یک Layout قرار گرفته است. قسمت های چیدمان شامل هدر و پاورقی و یک کناره در سمت راست می باشد که همگی با رنگ سبز مشخص شده اند.

از Layout CodeBehind Framework استفاده کنید

صفحه Layout یک نمای است که تفاوت خاصی با سایر View ها ندارد. برای تعیین اینکه این یک صفحه Layout است، باید آن را اضافه کنیم @islayout به صفحه مشاهده نسبت دهید.
برای تنظیم چیدمان در صفحه کافی است که آن را اضافه کنید @layout ویژگی را در صفحه View قرار دهید و مسیر Layout را در مقابل آن داخل دو کوتیشن (“) بنویسید.

مثال:

صفحه چیدمان (layout.aspx)

@page
@islayout
<!DOCTYPE html>
<html>
    <head>
        <title>@ViewData.GetValue("title")</title>
    </head>
    <body>
@PageReturnValue
    </body>
</html>

در مثال بالا، یک فایل aspx (layout.aspx) به پروژه اضافه شده است wwwroot مسیر.
در اینجا مشخص کرده ایم که این صفحه a Layout با اضافه کردن @islayout متغیر به بخش صفات صفحه. PageReturnValue متغیر مقادیر نهایی را از فایل‌های aspx که در آنها این طرح‌بندی معرفی شده است، اضافه می‌کند. بین تگ های عنوان، یک وجود دارد NameValueCollection صفت (ViewData) که تمامی فایل های aspx به آن دسترسی دارند.

توجه: صفحات طرح بندی در صورت درخواست مسیر کاربر به طور پیش فرض در دسترس نیستند.

مشاهده (hello-world.aspx)

@page
@layout "/layout.aspx"
@{
    string HelloWorld = "Hello CodeBehind framework!";
    ViewData.Add("title", "Hello World!");
}
        <div>
            <h1>Text value is: @HelloWorld</h1>
        </div>

مثال بالا یک فایل aspx را نشان می دهد (hello-world.aspx) که در آن یک طرح معرفی شده است.
در این صفحه، @layout و متن داخل دو گیومه نشان می دهد که صفحه دارای یک Layout در مسیر است wwwroot/layout.aspx. با توجه به کدهای بالا یک NameValue به کد اضافه می شود ViewData ویژگی با عنوان نام و مقدار Hello World!.

توجه: مقدار نام در ViewData به حروف کوچک و بزرگ حساس است

نتیجه در مسیر hello-world.aspx

<!DOCTYPE html>
<html>
    <head>
        <title>Hello World!</title>
    </head>
    <body>
        <div>
            <h1>Text value is: Hello CodeBehind framework!</h1>
        </div>
    </body>
</html>

همانطور که می بینید، نتیجه فوق با فراخوانی به دست می آید hello-world.aspx مسیر.

اضافه کردن Layout در پروژه سری

لینک زیر مربوط به پروژه سری است که در آموزش قبلی آموزش دادیم:

https://dev.to/elanatframework/mvc-example-display-information-based-on-url-2309

لطفا پروژه سری را در Visual Studio Code اجرا کنید. باز کن main.aspx فایل واقع در wwwroot/series_page و آن را به صورت زیر اصلاح کنید.

نمای اصلی (main.aspx)

@page
@model {SeriesModelList}
@break
+@layout "layout.aspx"
-<!DOCTYPE html>
-<html>
-    <head>
-        <title>Series information</title>
-        <link rel="stylesheet" type="text/css" href="/style/series.css" />
-    </head>
-    <body>
        <h1>Series information</h1>
        <hr>

        @foreach(SeriesModel TmpModel in @model.SeriesModels)
        {
            <div class="series_item">
                <a href="/series/@TmpModel.SeriesUrlValue">
                    <h2>@TmpModel.SeriesTitle</h2>
                    <img src="/image/@TmpModel.SeriesImage" alt="@TmpModel.SeriesTitle">
                </a>
                <p>Genre: @TmpModel.SeriesGenre</p>
                <p>Rating: @TmpModel.SeriesRating</p>
                <p>Year: @TmpModel.SeriesYear</p>
            </div>
        }

-    </body>
-</html>

با توجه به کدهای بالا، ما آن را اضافه کردیم layout.aspx صفحه به عنوان Layout این صفحه است و ما فقط برچسب ها را در آن نگه می داریم body بقیه را تگ کنید و حذف کنید.

نمای اصلی پس از جداسازی Layout

@page
@model {SeriesModelList}
@break
@layout "layout.aspx"
        <h1>Series information</h1>
        <hr>

        @foreach(SeriesModel TmpModel in @model.SeriesModels)
        {
            <div class="series_item">
                <a href="/series/@TmpModel.SeriesUrlValue">
                    <h2>@TmpModel.SeriesTitle</h2>
                    <img src="/image/@TmpModel.SeriesImage" alt="@TmpModel.SeriesTitle">
                </a>
                <p>Genre: @TmpModel.SeriesGenre</p>
                <p>Rating: @TmpModel.SeriesRating</p>
                <p>Year: @TmpModel.SeriesYear</p>
            </div>
        }

پس از ویرایش، main.aspx فایل مطابق کدهای بالا خواهد بود.

سپس در را باز کنید content.aspx فایل واقع در wwwroot/series_page مسیر و آن را به صورت زیر تغییر دهید.

نمای محتوا (content.aspx)

@page
@model {SeriesModel}
@break
+@layout "layout.aspx"
-<!DOCTYPE html>
-<html>
-    <head>
-        <title>@model.SeriesTitle</title>
-        <link rel="stylesheet" type="text/css" href="/style/series.css" />
-    </head>
-    <body>
        <div class="series_content">
            <h2>Series name: @model.SeriesTitle</h2>
            <img src="/image/@model.SeriesImage" alt="@model.SeriesTitle">
            <p>Genre: @model.SeriesGenre</p>
            <p>Rating: @model.SeriesRating</p>
            <p>Year: @model.SeriesYear</p>
            <p>About: @model.SeriesAbout</p>
        </div>
-    </body>
-</html>

همانطور که می بینید، ما مراحل قبلی را تکرار می کنیم content.aspx صفحه

نمای محتوا پس از جداسازی Layout

@page
@model {SeriesModel}
@break
@layout "layout.aspx"
        <div class="series_content">
            <h2>Series name: @model.SeriesTitle</h2>
            <img src="/image/@model.SeriesImage" alt="@model.SeriesTitle">
            <p>Genre: @model.SeriesGenre</p>
            <p>Rating: @model.SeriesRating</p>
            <p>Year: @model.SeriesYear</p>
            <p>About: @model.SeriesAbout</p>
        </div>

پس از ویرایش، content.aspx فایل مطابق کدهای بالا خواهد بود.

در wwwroot دایرکتوری، یک View جدید با نام ایجاد می کنیم layout.aspx و کدهای زیر را در آن ذخیره کنید.

فایل طرح بندی (layout.aspx)

@page
@islayout
<!DOCTYPE html>
<html>
    <head>
        <title>@ViewData.GetValue("title")</title>
        <link rel="stylesheet" type="text/css" href="/style/series.css" />
    </head>
    <body>
@PageReturnValue
    </body>
</html>