-->
ZDIRY-TUFWT-EBONM-EYJ00-IDBLANTER.COM
ZDIRY-TUFWT-EBONM-EYJ00

BLANTERWISDOM105

Membuat Menu Responsive di Layout ASP NET MVC

4/09/2020

Pada artikel kali ini, anda akan belajar tentang pembuatan menu layout di ASP.Net yang dapat ditampilkan ke semua halaman.

Aplikasi ASP. NET MVC yang akan dibuat ini memiliki bagian-bagian umum di UI yang sama di seluruh aplikasi seperti logo, header, navigasi, atau bagian footer, sehingga Agung Panduan tidak perlu menuliskan kode yang sama di setiap halaman. Tampilan tata letak tetap sama dengan halaman master aplikasi webform ASP. NET.

Misalnya, UI aplikasi dapat berisi Header, menu kiri, menu atas, dan footer yang  akan tampil di setiap halaman dan hanya bagian tengah yang berubah secara dinamis  seperti yang ditunjukkan di bawah ini,

Tampilan layout memungkinkan untuk menjadi template secara common (tampil di halaman lainnya), yang dapat diwariskan ke beberapa tampilan (view) sehingga terlihat lebih konsisten. Penggunaan Layout ini dapat menghilangkan kode duplikat atau pemborosan penggunaan script seperti jquery, css dan lain-lain sehingga tidak mengurangi kecepatan loading. Tampilan Layout untuk UI di atas akan dibahas hanya bagian Header, Menu Kiri, dan Footer saja serta berisi placeholder untuk bagian tengah yang berubah secara dinamis seperti yang ditunjukkan di bawah ini,

Tampilan Razor Layout memiliki ekstensi yang sama dengan tampilan lain yaitu “.cshtml” atau “.vbhtml”. Tampilan Layout di bagi dengan beberapa tampilan, sehingga harus disimpan dalam folder bersama. Misalnya, ketika kami membuat aplikasi ASP NET MVC pertama kita buat _Layout.cshtml di folder seperti gambar di bawah ini,

Berikut ini adalah _Layout.cshtml yang akan kita buat,

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>@ViewBag.Title</title>
        @Styles.Render("~/Content/css")
        @Scripts.Render("~/bundles/modernizr")
        
     <!-- AGUNGPANDUAN.COM -->  
     <!-- Bootstrap core CSS -->
     <link href="@Url.Content("~/Content/Bootstrap/vendor/bootstrap/css/bootstrap.min.css?ver=4.4.1'")" rel="stylesheet" type="text/css" media="all">
     <link rel="stylesheet" href="@Url.Content("~/Content/Bootstrap/vendor/bootstrap/css/bootstrap.css")" />
     <link rel="stylesheet" href="@Url.Content("~/Content/font-awesome/css/font-awesome.min.css")" />
     <!-- Custom styles for this template -->
     <link href="@Url.Content("~/Content/Bootstrap/vendor/bootstrap/css/simple-sidebar.css")" rel="stylesheet">
     <!-- Bootstrap core JavaScript -->
     <!--jquery.min.js disimpan di atas berfungsi agar jquery.min.js ini dapat digunakan di halaman lain -->
     <script src="@Url.Content("~/Content/Bootstrap/vendor/jquery/jquery.min.js")" ></script>
     <script src="@Url.Content("~/Content/Bootstrap/vendor/bootstrap/js/bootstrap.bundle.min.js")"></script>
</head>
<body>
    <div class="d-flex" id="wrapper">

    <!-- Sidebar -->
    <div class="bg-light border-right" id="sidebar-wrapper">
      <div class="sidebar-heading">AGUNG PANDUAN </div>
      <div class="list-group list-group-flush">
        <a href="Home" class="list-group-item list-group-item-action bg-light">Home</a>
        <a href="UploadExcel" class="list-group-item list-group-item-action bg-light">UploadExcel</a>
        <a href="#" class="list-group-item list-group-item-action bg-light">Dashboard</a>
        <a href="#" class="list-group-item list-group-item-action bg-light">Profile</a>
        <a href="#" class="list-group-item list-group-item-action bg-light">Report</a>
        <a href="#" class="list-group-item list-group-item-action bg-light">Status</a>
      </div>
    </div>
    <!-- /#sidebar-wrapper -->

    <!-- Page Content -->
    <div id="page-content-wrapper">

      <nav class="navbar navbar-expand-lg navbar-light bg-light border-bottom">
        <button class="btn btn-primary" id="menu-toggle">Toggle Menu</button>

        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav ml-auto mt-2 mt-lg-0">
            <li class="nav-item active">
              <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Dropdown
              </a>
              <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
                <a class="dropdown-item" href="#">Action</a>
                <a class="dropdown-item" href="#">Another action</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="#">Something else here</a>
              </div>
            </li>
          </ul>
        </div>
      </nav>

      <div class="container-fluid">
        <div>
            @RenderBody()
        </div>
        <footer class="panel-footer">
            @RenderSection("footer", true)
        </footer>
      </div>
    </div>
    <!-- /#page-content-wrapper -->

  </div>
  <!-- /#wrapper -->
  <!-- Menu Toggle Script -->
  <script>
      $("#menu-toggle").click(function (e) {
          e.preventDefault();
          $("#wrapper").toggleClass("toggled");
      });
  </script>
   
</body>
</html>

Seperti yang anda lihat, tampilan Layout berisi html Doctype, Head, dan Body sebagai HTML Normal, satu-satunya perbedaan adalah panggilan ke metode RenderBody() dan RenderSection(). RenderBody() bertindak seperti placeholder untuk tampilan lainnya. Sebagai contoh, index.cshtml di folder Home atau Folder UploadExcel akan menampilkan Header, Menu Left, dan Footer _Layout.cshtml.

Cara Menggunakan Tampilan Layout

Anda pasti bertanya-tanya bagaimana View akan tahu tampilan layout mana yang digunakan?

Anda dapat mengatur tampilan Layout dengan beberapa cara, dengan menggunakan _ViewStart.cshtml atau mengatur jalur halaman property atau menentukan view name dalam action method

_ViewStart.cshtml

_ViewStart.cshtml dimasukan dalam folder Views secara default. Ini mengatur tampilan halaman layout untuk semua view di dalam folder dan subfolder menggunakan Layout Property. Anda dapat menetapkan jalur yang valid dari setiap tampilan halaman Layout ke Layout Property.

Sebagai contoh, _ViewStart.cshtml berikut dalam folder Views, set Layout Property menjadi "~/Views/Shared/_Layout.cshtml". Jadi sekarang, _Layout.cshtml akan menjadi tampilan layout untuk semua halaman dalam Views dan subfolder. 

Mengatur Layout Property di Index.cshtml

Sekarang kita tinggal membuat script untuk halaman lainnya misalkan kita akan membuat halaman Index.cshtml di folder UploadExcel.


@using System;

<style>
    .text-large {
      text-transform: uppercase;
    	background: linear-gradient(to right, #30CFD0 0%, #330867 100%);
    	-webkit-background-clip: text;
    	-webkit-text-fill-color: transparent;
    	font-size: 500%;
      font-family: 'Poppins', sans-serif;
    }
    .row.no-gutter {
        margin-left: 0px;
        margin-right: 0;
        margin-top: 0;
        margin-bottom:0;
        width:100%;
    }
    .row.no-gutter [class*='col-']:not(:first-child),
    .row.no-gutter [class*='col-']:not(:last-child) {
        padding-right: 10px;
        padding-left: 10px;
        padding-top: 10px;
        padding-bottom:10px;
     }
    input[name='need']:disabled {
        background: red !important;
        color:black !important;
    }
   
</style>

<div class="container">
     <div class="row no-gutter">
       <div class="col-md-6" style="padding-top:13px;">
           <div class="row no-gutter"><i class="fa fa-user col-md-3">
                <label for="inputEmail" class="col-md-4 col-form-label text-success" >Name</label></i>
                <div class="col-md-8">
                    <input type="text" class="form-control" id="inputName">
                </div>
           </div>
           <div class="row no-gutter"><i class="fa fa-venus-mars col-md-3">
              <label for="cmbGender" class="col-md-4 col-form-label text-success">Gender</label></i>
              <div class="col-md-8">
                 <select class="form-control"  id="cmbGender">
                    <option selected="selected" value="">--Please Choose--</option>
                    <option value="1">Male</option>
                    <option value="2">Female</option>
                 </select>
              </div>
           </div>
       </div>
       <div class="col-md-6">
          <p class="float-right text-large"><span id="furnace_no">CLASS 1   </span></p>
       </div>
   </div>
   <div class="row" >
        <div class="bg-primary text-white text-center col-md-12">
		 <h4>Type 1</h4>
		</div>
    </div>
   <div class="row no-gutter">
      <div class="container">
          <table class="table">
            <thead>
              <tr class="table-primary">
                <th class="text-center grid-checkbox-col" rowspan="2">
                    <input class="grid-checkbox" type="checkbox" id="checkall" />
                </th>
                <th rowspan="1">Name</th>
                <th rowspan="1">Gender</th>
                <th rowspan="1">Email</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td class="text-center grid-checkbox-col">
                    <input name="chkRow" type="checkbox" class="grid-checkbox grid-checkbox-body" 
                        data-ClassId=""  value="Male"/>
                </td>
                <td>Agung Panduan</td>
                <td>Male</td>
                <td>admincool@agungpanduan.com</td>
              </tr>      
              <tr class="table-success">
                <td class="text-center grid-checkbox-col">
                   <input name="chkRow" type="checkbox" class="grid-checkbox grid-checkbox-body" 
                          data-ClassId=""  value="Male"/>
                </td>
                <td>Joe</td>
                <td>Male</td>
                <td>adminjoe@e-pandu.com</td>
              </tr>
              <tr>
                <td class="text-center grid-checkbox-col">
                    <input name="chkRow" type="checkbox" class="grid-checkbox grid-checkbox-body" 
                          data-ClassId=""  value="Female"/>
                </td>
                <td>Sinta</td>
                <td>Female</td>
                <td>john@example.com</td>
              </tr>
              <tr class="table-success">
                <td class="text-center grid-checkbox-col">
                   <input name="chkRow" type="checkbox" class="grid-checkbox grid-checkbox-body" 
                          data-ClassId=""  value="Female"/>
                </td>
                <td>Mary</td>
                <td>Female</td>
                <td>mary@example.com</td>
              </tr>
              <tr>
                <td class="text-center grid-checkbox-col">
                    <input name="chkRow" type="checkbox" class="grid-checkbox grid-checkbox-body" 
                          data-ClassId="" value="Male"/>
                </td>
                <td>Dooley</td>
                <td>Male</td>
                <td>july@example.com</td>
              </tr>
              <tr class="table-success">
                <td class="text-center grid-checkbox-col">
                   <input name="chkRow" type="checkbox" class="grid-checkbox grid-checkbox-body" 
                          data-ClassId=""  value="Female"/>
                </td>
                <td>Lisa</td>
                <td>Female</td>
                <td>bo@example.com</td>
              </tr>
              <tr>
                <td class="text-center grid-checkbox-col">
                    <input name="chkRow" type="checkbox" class="grid-checkbox grid-checkbox-body" 
                          data-ClassId=""  value="Male"/>
                </td>
                <td>Muhammad Apud</td>
                <td>Male</td>
                <td>act@example.com</td>
              </tr>
              <tr class="table-success">
                <td class="text-center grid-checkbox-col">
                    <input name="chkRow" type="checkbox" class="grid-checkbox grid-checkbox-body" 
                          data-ClassId=""  value="Male"/>
                </td>
                <td>Rizal</td>
                <td>Male</td>
                <td>sec@example.com</td>
              </tr>
              <tr>
                <td class="text-center grid-checkbox-col">
                    <input name="chkRow" type="checkbox" class="grid-checkbox grid-checkbox-body" 
                          data-ClassId=""  value="Female"/>
                </td>
                <td>Myrna</td>
                <td>Female</td>
                <td>angie@example.com</td>
              </tr>
              <tr class="table-success">
                <td class="text-center grid-checkbox-col">
                    <input name="chkRow" type="checkbox" class="grid-checkbox grid-checkbox-body" 
                          data-ClassId=""  value="Female"/>
                </td>
                <td>Lingling</td>
                <td>Female</td>
                <td>bo@example.com</td>
              </tr>
            </tbody>
          </table>
        </div>
   </div>    
   <div class="row no-gutter">
       <div class="col-md-12">
           <div class="text-right">
               <button id="btnSave" type="button" class="btn btn-sm btn-success">Save</button>
               <button id="btnSkip" type="button" class="btn btn-sm btn-primary">Skip</button>
           </div>
       </div>
   </div>
    <br />
</div>
@section footer{
   <div class="bg-secondary" style="height:100%">
       <div class="footer">
        <div class="container">
            <div class="row">
                <div class="col-md-12 col-12 text-white">
                    <div class="row p-3">
                        <div class="col-md-6 col-12">
                            <p class="m-0">All Right Reserved 2020 - <a href="http://www.agungpanduan.com" target="_blank">agungpandun.com</a></p>
                        </div>
                        <div class="col-md-6 col-12 footer-icon text-right">
                            <i class="fa fa-twitter"></i>
                            <i class="fa fa-instagram"></i>
                            <i class="fa fa-pinterest"></i>
                            <i class="fa fa-linkedin"></i>
                            <i class="fa fa-youtube"></i>
                            <i class="fa fa-vimeo"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
   </div>
}
 
<script type="text/javascript">
    $(document).ready(function () {
        $("#checkall").click(function () {
            $(".grid-checkbox").prop("checked", $("#checkall").is(":checked"));
        });

        $(".grid-checkbox").click(function () {
            $("#checkall").prop("checked", $('.grid-checkbox:not(#checkall)').not(':checked').length == 0);
        });
    });
</script>

Membuat Controler UploadExcelController.cs

Untuk menjalankan halaman UploadExcel tentu saja hal yang pertama dilakukan adalah membuat controller terlebih dahulu. Karena pada ASP NET pertama yang dijalankan adalah Controller baru menuju Views.

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

 

namespace UploadExcel.Controllers

{

    public class UploadExcelController : Controller

    {

        //

        // GET: /UploadExcel/

 

        public ActionResult Index()

        {

            return View();

        }

 

    }

}

Demikianlah cara membuat Menu Responsive di _Layout.cshtml di ASP NET MVC, apabila beberapa tampilan error mungkin anda belum menambahkan References ke Aplikasi ASP NET MVC yang anda buat. Untuk bahan dipelajari anda dapat mendownload filenya di bawah ini,

Share This :

0 Comments