Sudah terdapat project template baru untuk dipakai pada proyek baru
Untuk mendownload template terbaru dapat dari
https://bitbucket.org/rekadia/template
Adapun rincian update dari template terbaru adalah sebagai berikut:
1. Update kendo UI
2. BreadCrumb
Breadcrumb yang digunakan adalah MVCSiteMapper
Sebelum memulai pastikan terdapat entry pada file Mvc.Sitemap pada root dari WebUI misalkan:
[code language=”xml”]
<mvcSiteMapNode title="Dashboard" controller="Dashboard" action="Index" key="Dashboard">
</mvcSiteMapNode>
[/code]
Dan menambah kode berikut di bagian Shared/Layout
[code language=”csharp”] @Html.MvcSiteMap().SiteMapPath("BootstrapSiteMapHelper")[/code]
Dimana “BootstrapSiteMapHelper” merupakan display template yang terletak di Shared/DisplayTemplates
kosongkan atau hapus “BootstrapSiteMapHelper” jikalau ingin menggunakan tampilan default bawaan MvcSiteMapper
Terdapat 2 cara untuk menggunakan nya, metode yang pertama saya sebut sebagai Controller Based dan metode kedua saya sebut sebagai Map Based. Berikut adalah detil dari kedua metode tersebut:
2a. Metode Controller Based (Recommended)
[code language=”csharp”]
[MvcSiteMapNode(ParentKey ="Dashboard",Key="IndexCompany",Title="Index")]
Public ActionResult Index ()
{
…
}
[MvcSiteMapNode(ParentKey ="IndexCompany",Key="CreateCompany",Title="Create")]
Public ActionResult Create ()
{
…
}
[/code]
Berikut adalah detail dari attribut-attribut untuk contoh controller diatas:
– Parent key merupakan key dari parent node, jadi Create mempunyai parent yang memiliki key “IndexCompany” yaitu Index. Secara hierarki/tree maka Create akan berada dibawah Index atau kalau kita translasikan ke bentuk breadcrumb untuk Create akan menjadi seperti berikut: Index->Create
–Key merupakan key node yang akan dibuat, harus unik untuk seluruh aplikasi
–Title merupakan apa yang di display di breadcrumb misalkan pada action Create memiliki title “Create Product” maka yang tertampil di breadcrumb adalah sebagai berikut: Index->Create Product
Selain itu kita juga dapat menggunakan Title yang dynamic misalkan Products->Envogas
dengan “Envogas” merupakan nama product yang didapat dari id suatu product caranya adalah
[code language=”csharp”]
[MvcSiteMapNode(ParentKey = "IndexProduct",Key="EditProduct",Title="Edit")]
[SiteMap("BreadCrumb")]
public ViewResult Edit (int id)
{
product prod = RepoProduct.FindByPk(id);
ViewData["BreadCrumb"] = prod.name;
}[/code]
Dengan cara diatas maka breadcrumb akan menampilkan nama produk, perhatikan kesamaan antara SiteMap(“BreadCrumb”) dan ViewData[“BreadCrumb”]
Untuk sistem breadcrumb dynamic yang multi-level misalkan Company->Company A->Child Company A, dimana Company A dan Child Company A merupakan yang di generate oleh database kita dapat menggunakan cara sebagai berikut:
[code language=”csharp”]
[MvcSiteMapNode(ParentKey = "IndexCompany", Key = "EditCompany", Title = "Edit", PreservedRouteParameters = "id")]
[SiteMapTitle("Breadcrumb")]
public ViewResult Edit(int id)
{
if (id == 1)
{
ViewData["Breadcrumb"] = "Company A";
}
if (id == 2)
{
ViewData["Breadcrumb"] = "Company B";
}
//CompanyFormStub model = new CompanyFormStub(RepoCompany.FindByPk(id));
CompanyFormStub model = new CompanyFormStub();
return View("Form", model);
}
[MvcSiteMapNode(ParentKey = "EditCompany", Key = "EditChildCompany", Title = "EditChildCompany", PreservedRouteParameters = "id")]
[SiteMapTitle("Breadcrumb")]
public ViewResult EditChildCompany(int id)
{
if (id == 2)
{
ViewData["Breadcrumb"] = "Child Company AXX";
}
var node = SiteMaps.Current.CurrentNode;
if (node != null && node.ParentNode != null)
{
node.ParentNode.Title = "Company A";
node.ParentNode.RouteValues["id"] = 1;
}
CompanyFormStub model = new CompanyFormStub();
return View("Form", model);
}
[/code]
Catatan:
– Attribut PreservedRouteParameters merupakan attribut agar misalkan Company/Edit/1 bisa terdeteksi oleh MvcSiteMapper sehingga breadcrumb muncul. Secara normal entah mengapa MvcSiteMapper hanya mendeteksi jika URL misalkan sebagai berikut: Company/Edit?id=1
2a. Metode Map Based
Metode map based adalah dengan cara mengedit file Mvc.sitemap yang berada di root dari project WebUI.
Berikut adalah jikalau kita membuat contoh yang berada di controller based dengan menggunakan metode map based:
[code languange=”xml”]
<mvcSiteMapNode title="Dashboard" controller="Dashboard" action="Index" key="Dashboard">
<mvcSiteMapNode title="Company" controller="Company" action ="Index" key="IndexCompany">
<mvcSiteMapNode title="Create" controller="Company" action ="Create" key="CreateCompany"></mvcSiteMapNode>
<mvcSiteMapNode title="Edit" controller="Company" action ="Edit" key="EditCompany">
<mvcSiteMapNode title="EditChildCompany" controller="Company" action ="EditChild" key="EditChildCompany"></mvcSiteMapNode>
</mvcSiteMapNode>
</mvcSiteMapNode>
</mvcSiteMapNode>
[/code]
Berikut adalah detail dari attribut-attribut diatas:
–title merupakan apa yang akan di display di breadcrumb jika user me-navigate ke controller dan action yang ditunjuk
–controller merupakan controller yang dituju
–action merupakan action dari controller yang dituju
–key merupakan key node yang akan dibuat, harus unik untuk seluruh map
Per penulisan panduan belum ditemukan cara map based untuk pengganti SiteMapTitle(“Breadcrumb”) untuk menggunakan SiteMapTitle harus tetap menempelkan nya ke controller.
======================================================
Untuk detail yang lebih lengkap bisa langsung ke situs MvcSiteMapProvider
https://github.com/maartenba/MvcSiteMapProvider
3. Ajax Delete Grid
Untuk melakukan ajax delete pada grid cukup dengan menggunakan fungsi javascript
GoToDeletePage(string url, object GridDataSource)
url = merupakan url untuk mendelete record
GridDataSource = merupakan datasource object dari grid yang bersangkutan, bersifat optional yang berfungsi untuk me-refresh grid setelah operasi delete dilakukan
4. Alert Box
Template menggunakan SweetAlert box versi bootstrap
untuk menggunakan nya cukup dengan menulis swal(“Your Text Here”)
untuk fungsi lebih detail lainnya bisa melihat di situs pembuatnya
tristanedwards.me/sweetalert
5. Jquery Help
Fitur ini digunakan untuk membuat dokumentasi help
Cara membuatnya adalah sebagai berikut:
[code language=”javascript”]
var tour = new Tour({
name:"mainTour",
storage:false,
});
tour.addSteps([
{
element: "#tour1",
title: "Welcome.",
content: "Welcome to step one.",
placement: "top"
}
]);
tour.addSteps([
{
element: "#tour2",
title: "Welcome.",
content: "Welcome to step two.",
placement: "top",
backdrop:true,
}
]);
tour.init();
$(‘#help-button’).click(function (e) {
tour.restart();
tour.start();
e.preventDefault();
});
[/code]
Untuk variasi dan dokumentasi yang digunakan dapat langsung melihat ke situs bootstraptour
http://bootstraptour.com/
