ASP.NET Core MVC – සිංහලෙන් – Part 4

අපි කලින් පෝස්ට් එකේ කතා කලේ කොහොමද අලුතින් view එකක් project එකට add කරගන්නේ කියලා. අද අපි බලමු මේ add කරගත්තු view එකේ layout එක වෙනස් කරන්නේ කියලා.

දැනට ඇති template layout එක default template වෙන එකක් වන අතර මේ template එක සම්පූර්ණයෙන්ම වාගෙ හැදිලා තියෙන්නෙ Bootstrap වලින් වේ.  Bootstrap කියන්නේ HTML/CSS භාවිතයෙන් නිර්මාණය කරන ලද සම්පූර්ණ UI Layout Framework එකක් මෙහි ඇති විශේෂත්වයක් වන්නේ Layout එකේ responsive ස්භාවයයි, ඒ කියන්නේ HTML page එක Screen එකට ගැලපෙන විදියට Layout එක අනුවර්තනය වීමයි.

දැනට තියන layout එකේ ඉහලින් Header එකක් , Footer එකක් ඇතුලුව Header එකේ Navigation Menu එකක්ද දක්නට ලැබෙනවා ඇති.

මෙම Layout එක සංස්කරණය කිරීම සඳහා Solution එකේ  Views Folder එකේ Shared Folder එකේ ඇති  _Layout.cshtml  ගොනුව විවර කරගන්න – Views/Shared/_Layout.cshtml.

Layout templates මඟින් ඔබේ වෙබ් අඩවියේ HTML Container Layout එක් ස්ථානයක සඳහන් කිරීමට ඉඩ ලබා දී එය ඔබේ වෙබ් අඩවියේ පිටු කිහිපයක් හරහා යොදන්න RenderBody () method සොයා ගන්න. RenderBody() යනු ඔබ විසින් සාදන ලද සියලුම view specific පිටු පිරිසැලසුම් පිටුවේ ඇති ස්ථාන දරන්නෙකි. උදාහරණයක් ලෙස, ඔබ Privacy සබැඳිය තෝරන්නේ නම්, Views/Home/Privacy.cshtml විදැහුම්කරණය කරන්නේ RenderBody method තුළ ය.

_Layout.cshtml ගොනුවේ Title , Footer සහ Menu Link වෙනස් කරමු. ඔබගේ _Layout.cshtml ගොනොවේ ඇති පහත HTML  කොටස් සොයාගෙන පහත පරිදි වෙනස් කරගන්න.

Title එක

<title>@ViewData["Title"] - Movie App</title>

Menu Link එක

<a class="navbar-brand" asp-controller="Movies" asp-action="Index">Movie App</a>

Footer එක

    <footer class="border-top footer text-muted">
        <div class="container">
            &copy; 2019 - Movie App - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
        </div>
    </footer>

ඉහත පරිදි වෙනස් කරගෙන Save කිරීමෙන් අනතුරුව Application එක Run කරන්න.

ඔබට දැන් පහත පරිදි දිස්වනු ඇත.

ඊලග පොස්ට් එකෙන් අපි බලමු කොහොමද මේ Layout එක තව දුරටත් Customize කරන්න්නේ කියලා.