Jika kita membangun sebuah web site atau web app yang misal memiliki sidebar atau menu atau sesuatu pada halaman master dengan data yang ditampilkan secara dinamis pada semua halaman maka kita akan dibenturkan dengan masalah bagaimana cara mengirimkan data tersebut.
Karena bagian ini akan selalu muncul pada halaman apapun yang di-request maka apakah artinya tiap kali memanggil method pada controller kita perlu juga untuk melewatkan data tersebut? hmm gak apik. Kenapa? karena artinya akan ada duplikasi kode dimana-mana.
ASP.NET MVC sebagai web framework andalan Microfost mempunyai solusi yang elegan karena cukup panggil sekali maka data akan selalu muncul pada tiap request.
Yang perlu kita lakukan adalah membuat sebuah action method yang nilai kembaliannya berupa PartialView. Jadi nanti yang ditampilkan pada halaman master adalah halaman partial view berikut dengan data yang dilewatkannya.
Contohnya adalah kode di bawah
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
public class HomeController : Controller { public ActionResult Index() { return View(); } public ActionResult About() { return View(); } [ChildActionOnly] public ActionResult TopMessage() { List<string> data = new List<string>() { "Top Message 1", "Top Message 2", "Top Message 3" }; return PartialView("_TopMessage",data); } } |
Dari kode yang saya tandai di atas ada beberapa yang perlu diperhatikan. Attribute [ChildActionOnly] digunakan supaya method ini tidak bisa langsung diakses melalui url http://host/Home/TopMessage.
Kemudian pada bagian return PartialView(“_TopMessage”,data), “_TopMesage adalah template view yang muncul terus menerus beserta datanya pada halaman master.
|
1 2 3 4 5 6 7 8 9 10 |
@model IEnumerable<string> <p>I'm Top Message</p> <ul> @foreach (var d in Model) { <li>@d</li> } </ul> |
Untuk memanggilnya pada halaman master kita menggunakan Html helper dengan method Action yang memiliki 2 parameter, nama method dan nama controller.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>@ViewBag.Title</title> </head> <body> <div> @Html.Action("TopMessage","Home") </div> <div> @RenderBody() </div> <div> Bottom </div> </body> </html> |
Maka berikut yang terjadi ketika halaman index diakses
Dan berikut ketika halaman about diakses
Dari kedua gambar di atas nampak kalau Top Message selalu dimunculkan dengan hanya sekali panggil
makasih bro…bermanfaat sekali.