មាតិកា

  1. សេចក្តីផ្តើម
  2. គោលបំណង
  3. តម្រូវការ
  4. ជំហានទី១៖ បង្កើត Project
  5. ជំហានទី២៖ បើក Solution Explorer
  6. ជំហានទី៣៖ បង្កើត Layout មួយទៀត
  7. ជំហានទី៤៖ សូមសរសេរកូដចូលក្នុង Laout “_DarkLayout.cshtml”
  8. ជំហានទី៥៖ បង្កើត View page និង add layout page “DarkLayout” ចូល
  9. ជំហានទី៦៖ ដំណើរការ 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";
    }