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

មាតិកា

  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";
    }

Published by sysomeho

Ho Sysome obtains B.S. degree in Computer Science from Phnom Penh Internation University (PPIU) in 2013 and currently studying Master of Science in IT (MSIT) at Asia Euro University (AEU). He worked as an IT Officer at Microfinance Institute and Bank in Phnom Penh. He is familar in programming language such as VB.NET, Java (Java2EE, Spring), Codeigniter, Laravel, mysql, sql server and so on. He enjoys sharing knowledges, learns from other, and develop himself. Find him on Facebook: Spy Ro, Linkedin: Sysome HO.

Leave a comment

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.