Berikut adalah langkah-langkah yang dilakukan untuk membuat master layout pada aplikasi web ASP.NET Core MVC.
Langkah pertama adalah membuat folder Shared di dalam folder Views. Kemudian dilanjutkan dengan membuat file MasterLayout.cshtml di dalam folder Views\Shared. Untuk membuat MasterLayout.cshtml dapat dilakukan dengan menyalin isi salah satu file yang terdapat pada folder production pada source code gentelella-master. Tetapi yang disalin hanya bagian-bagian ini saja:
- Side bar. - Header. - Footer.
Sedangkan bagian content akan berisi kode berikut ini.
<!-- page content -->
<div class="right_col" role="main"> @RenderBody()
</div>
<!-- /page content -->
Kode @RenderBody() adalah expression Razor yang berfungsi untuk memanggil content ada komponen view yang dipanggil pada method action di class controller.
Isi lengkap file MasterLayout.cshtml adalah sebagai berikut.
MasterLayout.cshtml <!DOCTYPE html> <html lang="en"> <head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <!-- Meta, title, CSS, favicons, etc. -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1"> <title>ASP.NET Core MVC: Book Store</title>
106 <link href="~/vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"> <!-- Font Awesome --> <link href="~/vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet"> <!-- NProgress -->
<link href="~/vendors/nprogress/nprogress.css" rel="stylesheet"> <!-- iCheck -->
<link href="~/vendors/iCheck/skins/flat/green.css" rel="stylesheet"> <!-- bootstrap-progressbar -->
<link href="~/vendors/bootstrap-progressbar/css/bootstrap-progressbar-3.3.4.min.css" rel="stylesheet">
<!-- JQVMap -->
<link href="~/vendors/jqvmap/dist/jqvmap.min.css" rel="stylesheet"/> <!-- bootstrap-daterangepicker -->
<link href="~/vendors/bootstrap-daterangepicker/daterangepicker.css" rel="stylesheet">
<!-- Custom Theme Style -->
<link href="~/build/css/custom.min.css" rel="stylesheet"> </head>
<body class="nav-md">
<div class="container body"> <div class="main_container"> <div class="col-md-3 left_col"> <div class="left_col scroll-view">
<div class="navbar nav_title" style="border: 0;">
<a href="index.html" class="site_title"><i class="fa fa-book"></i> <span>Book Store</span></a>
</div>
<div class="clearfix"></div> <!-- menu profile quick info --> <div class="profile clearfix"> <div class="profile_pic">
<img src="~/images/reza.jpg" alt="..." class="img-circle profile_img"> </div> <div class="profile_info"> <span>Welcome,</span> <h2>M Reza Faisal</h2> </div> </div>
<!-- /menu profile quick info --> <br />
<!-- sidebar menu -->
<div id="sidebar-menu" class="main_menu_side hidden-print main_menu">
<div class="menu_section"> <h3>General</h3>
<ul class="nav side-menu">
<li><a><i class="fa fa-home"></i> Home <span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu">
<li><a controller="Home" asp-action="Index">Dashboard</a></li>
</ul> </li>
<li><a><i class="fa fa-table"></i> Data <span class="fa fa-chevron-down"></span></a>
107
<li<a controller="Category" asp-action="Index">Book Categories</a></li>
<li<a controller="Author" asp-action="Index">Authors</a></li>
<li<a controller="Book" asp-action="Index">Books</a></li>
</ul> </li>
<li><a><i class="fa fa-bar-chart-o"></i> Reports <span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu">
<li<a href="#">Book by Category Chart</a></li> <li<a href="#">Book Selling</a></li>
</ul> </li> </li> </ul> </div> </div> <!-- /sidebar menu -->
<!-- /menu footer buttons -->
<div class="sidebar-footer hidden-small"> <a data-toggle="tooltip" data-placement="top" title="Settings">
<span class="glyphicon glyphicon-cog" aria-hidden="true"></span>
</a>
<a data-toggle="tooltip" data-placement="top" title="FullScreen">
<span class="glyphicon glyphicon-fullscreen" aria-hidden="true"></span>
</a>
<a data-toggle="tooltip" data-placement="top" title="Lock"> <span class="glyphicon glyphicon-eye-close"
aria-hidden="true"></span> </a>
<a data-toggle="tooltip" data-placement="top" title="Logout" href="login.html">
<span class="glyphicon glyphicon-off" aria-hidden="true"></span>
</a> </div>
<!-- /menu footer buttons --> </div> </div> <!-- top navigation --> <div class="top_nav"> <div class="nav_menu"> <nav>
<div class="nav toggle">
<a id="menu_toggle"><i class="fa fa-bars"></i></a> </div>
<ul class="nav navbar-nav navbar-right"> <li class="">
<a href="javascript:;" class="user-profile dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<img src="~/images/reza.jpg" alt="">M Reza Faisal <span class=" fa fa-angle-down"></span>
</a>
<ul class="dropdown-menu dropdown-usermenu pull-right"> <li><a href="javascript:;"> Profile</a></li>
<li>
108
<span class="badge bg-red pull-right">50%</span> <span>Settings</span>
</a> </li>
<li><a href="javascript:;">Help</a></li>
<li><a href="login.html"><i class="fa fa-sign-out pull-right"></i> Log Out</a></li>
</ul> </li>
<li role="presentation" class="dropdown">
<a href="javascript:;" class="dropdown-toggle info-number" data-toggle="dropdown" aria-expanded="false">
<i class="fa fa-envelope-o"></i> <span class="badge bg-green">6</span> </a>
<ul id="menu1" class="dropdown-menu list-unstyled msg_list" role="menu">
<li> <a>
<span class="image"><img src="~/images/img.jpg" alt="Profile Image" /></span>
<span>
<span>John Smith</span>
<span class="time">3 mins ago</span> </span>
<span class="message">
Film festivals used to be do-or-die moments for movie makers. They were where...
</span> </a> </li> <li> <a>
<span class="image"><img src="~/images/img.jpg" alt="Profile Image" /></span>
<span>
<span>John Smith</span>
<span class="time">3 mins ago</span> </span>
<span class="message">
Film festivals used to be do-or-die moments for movie makers. They were where...
</span> </a> </li> <li> <a>
<span class="image"><img src="~/images/img.jpg" alt="Profile Image" /></span>
<span>
<span>John Smith</span>
<span class="time">3 mins ago</span> </span>
<span class="message">
Film festivals used to be do-or-die moments for movie makers. They were where...
</span> </a> </li> <li> <a>
<span class="image"><img src="~/images/img.jpg" alt="Profile Image" /></span>
<span>
<span>John Smith</span>
109
</span>
<span class="message">
Film festivals used to be do-or-die moments for movie makers. They were where...
</span> </a> </li> <li> <div class="text-center"> <a>
<strong>See All Alerts</strong> <i class="fa fa-angle-right"></i> </a> </div> </li> </ul> </li> </ul> </nav> </div> </div> <!-- /top navigation --> <! --> <!-- page content --> <div class="right_col" role="main">
@RenderBody() </div> <!-- /page content --> <! --> <!-- footer content --> <footer> <div class="pull-right">
Gentelella - Bootstrap Admin Template by <a href="https://colorlib.com">Colorlib</a> </div> <div class="clearfix"></div> </footer> <!-- /footer content --> </div> </div> <!-- jQuery --> <script src="~/vendors/jquery/dist/jquery.min.js"></script> <!-- Bootstrap --> <script src="~/vendors/bootstrap/dist/js/bootstrap.min.js"></script> <!-- FastClick --> <script src="~/vendors/fastclick/lib/fastclick.js"></script> <!-- NProgress --> <script src="~/vendors/nprogress/nprogress.js"></script> <!-- Chart.js --> <script src="~/vendors/Chart.js/dist/Chart.min.js"></script> <!-- gauge.js --> <script src="~/vendors/gauge.js/dist/gauge.min.js"></script> <!-- bootstrap-progressbar --> <script src="~/vendors/bootstrap-progressbar/bootstrap-progressbar.min.js"></script> <!-- iCheck --> <script src="~/vendors/iCheck/icheck.min.js"></script> <!-- Skycons --> <script src="~/vendors/skycons/skycons.js"></script> <!-- Flot --> <script src="~/vendors/Flot/jquery.flot.js"></script>
110 <script src="~/vendors/Flot/jquery.flot.pie.js"></script> <script src="~/vendors/Flot/jquery.flot.time.js"></script> <script src="~/vendors/Flot/jquery.flot.stack.js"></script> <script src="~/vendors/Flot/jquery.flot.resize.js"></script> <!-- Flot plugins --> <script src="~/vendors/flot.orderbars/js/jquery.flot.orderBars.js"></script> <script src="~/vendors/flot-spline/js/jquery.flot.spline.min.js"></script> <script src="~/vendors/flot.curvedlines/curvedLines.js"></script> <!-- DateJS --> <script src="~/vendors/DateJS/build/date.js"></script> <!-- JQVMap --> <script src="~/vendors/jqvmap/dist/jquery.vmap.js"></script> <script src="~/vendors/jqvmap/dist/maps/jquery.vmap.world.js"></script> <script src="~/vendors/jqvmap/examples/js/jquery.vmap.sampledata.js"></script> <!-- bootstrap-daterangepicker --> <script src="~/vendors/moment/min/moment.min.js"></script> <script src="~/vendors/bootstrap-daterangepicker/daterangepicker.js"></script> <!-- Custom Theme Scripts -->
<script src="~/build/js/custom.min.js"></script> </body>
</html>
Source code MasterLayout.cshtml ini juga dapat dilihat pada link GitHub yang telah disebutkan pada bab Pendahuluan sub bab Bahan Pendukung.
Content
Seperti yang telah disebutkan di atas, content akan berisi file view yang dipanggil oleh method action. Sebuah file view ini dapat berdiri sendiri tanpa master layout atau dapat juga menggunakan master layout.
Jika file view ingin berdiri sendiri tanpa menggunakan master layout, maka di awal file tersebut dapat ditambahkan baris berikut ini.
@{
Layout = null; }
Jika sebuah file view ingin menggunakan master layout maka di awal file tersebut dapat menggunakan baris berikut ini.
@{
Layout = "~/Views/Shared/MasterLayout.cshtml"; }
Jika project aplikasi web memiliki banyak file view, misal ada dimiliki 10 controller dan disetiap controller memiliki 4 method action maka akan dimiliki 40 file view. Jika seluruh file view menggunakan file MasterLayout.cshtml sebagai master layout maka pada 40 file view tersebut harus ditambahkan baris di atas.
Untuk otomatisasi agar seluruh file-file view menggunakan file master layout yang sama dapat dilakukan dengan cara berikut ini. Langkah pertama adalah membuat file _ViewStart.cshtml yang disimpan pada folder Views. File ini adalah file yang akan dibaca oleh seluruh file view. Kemudian pada file _ViewStart.cshtml diisi dengan kode di bawah ini.
_ViewStart.cshtml @{
111
}
Selain file _ViewStart.cshtml juga dikenal file _ViewImports.cshtml. File _ViewImports.cshtml berfungsi untuk menyimpan directive seperti @using atau @addTagHelper agar bisa digunakan oleh seluruh file view. Untuk keperluan aplikasi web Book Store ini maka perlu dibuat file _ViewImports.cshtml yang disimpan pada folder Views. Isi dari file ini adalah sebagai berikut.
@using EFCoreBookStore.Models
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
Baris pertama berfungsi untuk mendeklarasikan namespace EFCoreBookStore.Models agar seluruh model yang terdapat pada namespace tersebut dapat digunakan pada seluruh file view. Baris kedua adalah deklarasi yang berfungsi agar seluruh file view dapat menggunakan Tag Helper. Tag Helper akan dijelaskan secara detail pada sub bab selanjutnya.