ការសិក្សាពីរបៀប បង្កើត Master Page Layout ក្នុង ASP.NET MVC 5

មាតិកា

សេចក្តីផ្តើម
គោលបំណង
តម្រូវការ
ជំហានទី១៖ បង្កើត Project
ជំហានទី២៖ បើក Solution Explorer
ជំហានទី៣៖ បង្កើត Layout មួយទៀត
ជំហានទី៤៖ សូមសរសេរកូដចូលក្នុង Laout “_DarkLayout.cshtml”
ជំហានទី៥៖ បង្កើត View page និង add layout page “DarkLayout” ចូល
ជំហានទី៦៖ ដំណើរការ Project

1. សេចក្តីផ្តើម

នៅក្នុង Tutorial នេះ យើងនឹងសិក្សាពីរបៀប បង្កើត Master Page Layout ដោយប្រើប្រាស់ ASP.NET MVC។ Layout មានសារៈសំខាន់ណាស់សំរាប់ធ្វើការឌីស្សាញចេញជាវេបសាយមួយប្រកបដោយភាពទាក់ទាញនិងផ្តល់ភាពងាយស្រួលសម្រាប់អោយអ្នកសរសេរកូដធ្វើការ implementation ។ ក្នុង Layout មួយជាធម្មតាមានដូចជា Header, Side Menu, Footer និង Sidebar គឺមានដូចគ្នាទៅគ្រប់ pages ទាំងអស់ ប៉ុន្តែអ្វីដែលមានការប្រែប្រួលនោះគឺ content ទៅតាមអ្វីដែលយើងបានកំណត់។ ខាងក្រោមនេះនឹងបង្ហាញពីជំហាននីមួយៗក្នុងការ implementation កូដ។

2. គោលបំណង

ក្រោយពីអនុវត្តន៍តាម Tutorial នេះ លោកអ្នកនឹងយល់អំពី

យល់ដឹងពីរបៀបបង្កើត Master Page Layout ជាមួយNET MVC
យល់ដឹងពីជំហាននីមួយៗក្នុងការបង្កើត Master Page Layout
យល់ដឹងពីរបៀបប្តូរ Default layout

3. តម្រូវការ

ដើម្បីអាចសិក្សា បានយើងត្រូវមាន

Microsoft Visual Studio (any version)
Microsoft SQL Server (any version)

4. ជំហានទី១៖ បង្កើត Project

សូមចូលទៅបើកកម្មវិធី Microsoft visual studio

ចុច “Start”
បន្ទាប់ “All Programs”
ជ្រើសរើសយក “Microsoft Visual Studio 2015”.
ចូលទៅកាន់ File à New à Project
សូមមើលមេរៀនពីមុនៗអំពីរបៀបបង្កើត Project ជាមួយ MVC

5. ជំហានទី២៖ បើក Solution Explorer

សូមធ្វើការបើកនូវ Solution Explorer
រួចចូលទៅកាន់ Shared Folder
អ្នកឃើញមាន layout pages ចំនួន២ គឺ _Layout.cshtml និង Error.cshtml

6. ជំហានទី៣៖ បង្កើត Layout មួយទៀត

ដើម្បីបង្កើត layout សូមធ្វើការអនុវត្តន៍ដូចតទៅ៖

Right Click លើ Shared Folder
យកពាក្យថា Add
រួចយក MVC 5 Layout Page (Razor)
បន្ទាប់មកវានឹងលោតផ្ទាំងមួយទៀតសម្រាប់អោយយើងដាក់ឈ្មោះអោយ layout
សូមដាក់ឈ្មោះថា _DarkLayout.cshtml

7. ជំហានទី៤៖ សូមសរសេរកូដចូលក្នុង Laout “_DarkLayout.cshtml”

បើក_DarkLayout.cshtml

រួចសូមសរសេរកូដដូចខាងក្រោមចូល

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
</head>
<body style="background-color:burlywood">

    <!-- Header -->
    <header>
        <h1 style="text-align:center; color:bisque">My Dark Layout Page</h1>
    </header>
    <!-- End of Header -->
    <!-- Left Sidebar -->
    <nav>
        <h3>Navigation</h3>
        @Html.ActionLink("About", "About");<br />
        @Html.ActionLink("Contact", "Contact");<br />
        @Html.ActionLink("Enquiry", "Enquiry");<br />
        @Html.ActionLink("Home", "Home");<br />
        @Html.ActionLink("Purchase", "Purchase");<br />
    </nav>
    <!-- End of Left Sidebar -->
    <!-- Content Body -->

@RenderBody()
<!– End of Content Body –> <!– Footer –> <footer> <h4>I am Footer.</h4> </footer> <!– Style –> <style> header { height: 100px; width: 100%; background-color: red; } nav { float: left; width: 200px; height: 250px; background-color: darkgoldenrod; } .content { background-color: aliceblue; padding: 20px; } footer { background-color: green; width: 100%; height: 50px; float: right; text-align: center; } </style> </body> </html>

8. ជំហានទី៥៖ បង្កើត View page និង add layout page “DarkLayout” ចូល

សូមបើកនូវ HomeController.cs

រួចធ្វើការ add កូដខាងក្រោមចូល

public ActionResult DarkLayoutPage()
        {
            return View();
        }

បន្ទាប់មកសូមធ្វើការ Right click ទៅលើ action method “DarkLayoutPage()”
សូម select យក “Add View…”
វានឹងចេញផ្ទាំងមួយទៀត
សូមចុចលើ ប៊ូតុង browse
ពន្លាលើfolder Views
យក Shared
សូមយក _DarkLayout.cshtml
ចុច OK
ចុច Add

យើងនឹងទទួលបានដូចខាងក្រោម

@{
    ViewBag.Title = "DarkLayoutPage";
    Layout = "~/Views/Shared/_DarkLayout.cshtml";
}

<h2>DarkLayoutPage</h2>

9. ជំហានទី៦៖ ដំណើរការ Project

នៅពេល run project សូមធ្វើការ វាយ url: http://localhost:38517/Home/DarkLayoutPage

នៅពេលដែលអ្នក add content ចូលទៅក្នុង DarkLayoutPage view page វានឹងបង្ហាញនៅក្នុង content area ព្រមទាំងមាន header, footer, sidebar គឺដូចគ្នា។ យើងក៏អាចបង្កើតនូវ Layout pages ផ្សេងៗជាច្រើននៅក្នុង Shared folder បានផងដែរ។
ប្រសិនបើយើងចង់ add layout “DarkLayout” នេះទៅកាន់ page ផ្សេងទៀត ដោយយើងគ្រាន់តែ add កូដខាងក្រោមនៅខាងលើនៃ pageតែប៉ុណ្ណោះបានហើយ។
```
@{
    Layout = "~/Views/Shared/_DarkLayout.cshtml";
}
```