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

BLANTERWISDOM105

Perbedaan Layouts, RenderBody, dan RenderSection Pada ASP NET MVC

7/17/2020

Layout digunakan untuk mempertahankan tampilan secara konsisten di beberapa tampilan halaman web dalam aplikasi ASP.NET MVC. Di internet, Anda akan menemukan situs yang memiliki;

  • Setiap halaman memiliki Header yang sama
  • Setiap halaman memiliki Background yang sama
  • Setiap halaman memiliki Style dan layout yang sama


Struktur Dasar dari Layout Page

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width" />
 <title>@ViewBag.Title</title>
 @Styles.Render("~/Content/css")
 @Scripts.Render("~/bundles/modernizr")
</head>
<body>
 @RenderBody()

 @Scripts.Render("~/bundles/jquery")
 @RenderSection("scripts", required: false)
</body>

RenderBody

Setelah membuat aplikasi ASP NET MVC, Anda akan melihat bahwa beberapa file dan folder dibuat secara default. Setelah itu, buka file _layout.cshtml dari views / Shared folder. Pada dasarnya, file ini akan digunakan sebagai tata letak standar untuk semua halaman dalam projek. Ingatlah bahwa Anda dapat membuat lebih dari satu halaman tata letak dalam aplikasi dan menggunakan halaman tata letak di halaman lain adalah opsional. File _layout.cshtml terdiri dari kode berikut:


<!DOCTYPE html>
<html>
<head>
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("~/Content/Site.css")" 

    rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" 

    type="text/javascript"></script>
</head>
<body>
    <div class="page">
        <div id="header">
            <div id="title">
                <h1>My MVC Application</h1>
            </div>
            <div id="logindisplay">
                @Html.Partial("_LogOnPartial")
            </div>
            <div id="menucontainer">
                <ul id="menu">
                    <li>@Html.ActionLink("Admin", "Index", "Home", new { area = "Admin" }, null)
                    ("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("Admin", "Index", "About", new { area = "Admin" }, null)
                    ("About", "About", "Home")</li>
                </ul>
            </div>
        </div>
        <div id="main">
            @RenderBody()
        </div>
        <div id="footer">
        </div>
    </div>
</body>
</html>

Sekarang, buka file index.cshtml pada folder views/home. File ini terdiri dari kode berikut:


@{
    ViewBag.Title = "Home Page";
}

<h2>@ViewBag.Message</h2>
<p>
    To learn more about ASP.NET MVC visit <a href="http://agungpanduan.com/" 
    title="Agung Panduan Website">http://asp.net/mvc</a>.
</p>

Hal utama adalah bahwa dengan kode di atas, anda tidak dapat menemukan halaman Layout mana yang digunakan pertama kali oleh halam index ini. Untuk mengetahuinya adalah dengan membuka file _ViewStart.cshtml di folder Views, dimana file terdiri dari kode berikut:


@{
   Layout = "~/Views/Shared/_Layout.cshtml";
}

Kode di atas menunjukkan bahwa secara default, semua halaman konten akan mengikuti halaman tata letak _Layout.cshtml. Sekarang jika kita menggabungkan halaman _layout.cshtml dan index.cshtml, kita akan mendapatkan kode berikut:


<!DOCTYPE html>
<html>
<head>
<title>Home Page</title>
<link href="@Url.Content("~/Content/Site.css")" 

rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" 

type="text/javascript"></script>
</head>
<body>
<div class="page">
<div id="header">
<div id="title">
<h1>My MVC Application</h1>
</div>
<div id="logindisplay">
@Html.Partial("_LogOnPartial")
</div>
<div id="menucontainer">
<ul id="menu">
<li>@Html.ActionLink("Home", "Index", "Home")</li>
<li>@Html.ActionLink("About", "About", "Home")</li>
</ul>
</div>
</div>
<div id="main"><h2>@ViewBag.Message</h2>
<p>
To learn more about ASP.NET MVC visit <a href="http://agungpanduan.com/" 

title="Agung Panduan Website">http://agungpanduan.com</a>.
</p>
</div>
<div id="footer">
</div>
</div>
</body>
</html>

Jika anda mengunjungi beberapa halaman maka yang akan diganti adalah renderbody() sesuai dengan kode pada halaman view tersebut. Misalkan anda akan masuk ke dalam halaman About maka ada pergantian dari Home ke About.

RenderPage

Anda dapat membuat banyak halaman page pada satu halaman tata letak yaitu dengan menggunakan RenderPage. Buatlah _StaticRenderPage.cshtml pada folder Views/Shared dengan kode berikut:


@{
    ViewBag.Title = "Home Page";
}

<h2>@ViewBag.Message</h2>
<p>
    To learn more about ASP.NET MVC visit <a href="http://agungpanduan.com" 

    title="Agung Panduan Website">http://agungpanduan.com</a>.
</p>
<p>
This messge from render page.
</p>

Buka file index.cshtml ada folder Views/Home dan copy dan paste kan kode berikut;

@RenderPage("~/Views/Shared/_StaticRenderPage.cshtml")

Jika anda ingin menampilkan data pada halaman renderpage, pertama-tama anda buat model pada folder Models/AccountModels dengan kode berikut:


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace MvcApplication.Models.AccountModels
{
    public class User
    {
        public string UserName { get; set; }
        public string UserPassword { get; set; }

        public static List<User> AllUsers()
        {
            List<User> userList = new List<User>();

            User user1 = new User
            {
                UserName = "Agung Panduan",
                UserPassword = "Astagfirullah",
            };

            User user2 = new User
            {
                UserName = "Nama Asliku Rahasia",
                UserPassword = "Astagfirullah",
            };

            userList.Add(user1);
            userList.Add(user2);

            return userList;
        }
    }
}

Sekarang buat AccountController dan tambahkan kode berikut ini di bawah ActionResult Index().


public ActionResult UserList()
{
  return View(MvcApplication.Models.AccountModels.User.AllUsers());
}

Lalu buat UserList.cshtml pada folder Views/Account dengan kode berikut:


@model IEnumerable<UploadExcel.Models.AccountModels.User>

@{
ViewBag.Title = "UserList";
Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>UserList</h2>

@RenderPage("~/Views/Shared/_DisplayAllUsers.cshtml", new { User = Model })

Langkah terakhir, buat halaman page lain _DisplayAllUsers di folder Views/Shared dengan kode berikut:


@foreach (var usr in Page.AvailableUser)
{
<text>
@usr.UserName   @usr.UserPassword <br />
</text>
}

Sekarang run aplikasi ASP NET MVC anda dan ketikan pada URL http://localhost:6959/Account/UserList

RenderSection

RenderSection adalah bagian yang ada pada Layout dan dapat diatur true atau false bahwa bagian tersebut harus dibuat detailnya atau tidak pada halaman view index. RenderSection biasa digunakan adalah footer;


<footer class="panel-footer">

    @RenderSection("footer”, false)

</footer>

Jika anda tambahkan pada bagian index.cshtml maka kodenya seperti ini:


@section footer{
   <p class="lead">
       This is footer section.
   </p>
}

Kode di atas diletakan paling bawah.

Share This :

0 Comments