© 2017 mztolo.

com / contoh 6

.NET Contoh 6

Sort / Urutkan Data

Copy WebApp004 ke WebApp005, selanjutnya kita akan membuat SORT untuk kolom.

Jadi kita bisa men-sort atau mengurutkan data berdasar kolom Nama Siswa atau Kelas Siswa.

Tambahkan fungsi sort/urut di method Index yg ada di Controllers\SiswaController.cs.

Awalnya…
public ActionResult Index()
{
return View(db.Siswas.ToList());
}

Menjadi…
public ActionResult Index(string sortOrder)
{
ViewBag.NameSortParm = String.IsNullOrEmpty(sortOrder) ? "nama_desc" : "";
ViewBag.IntSortParm = String.IsNullOrEmpty(sortOrder) ? "kls_desc" : "kls_asc";
var siswa = from s in db.Siswas
select s;
switch (sortOrder)
{
case "nama_desc":
siswa = siswa.OrderByDescending(s => s.NamaSiswa);
break;
case "kls_desc":
siswa = siswa.OrderByDescending(s => s.KelasSiswa);
break;
case "kls_asc":
siswa = siswa.OrderBy(s => s.KelasSiswa);
break;
default:
siswa = siswa.OrderBy(s => s.NamaSiswa);
break;
}
return View(siswa.ToList());
}

Page 1 of 8
 © 2017 mztolo.com / contoh 6

Penjelasan :

ViewBag adalah properti yg memungkinkan Anda untuk secara dinamis berbagi nilai-nilai dari Controller
ke View.
String.IsNullOrEmpty(sortOrder) ? "nama_desc" : ""; artinya jika null atau kosong maka
nama_desc jika tidak ya “”.

ViewBag.NameSortParm dan ViewBag.IntSortParm menangkap nilai dari fungsi di atas, dan

menampilkannya di link View.

SWITCH semacam DO CASE di VFP akan mengecek pilihan ordernya, jika pilihannya “nama_desc” maka
data siswa akan dilakukan OrderByDescending.
Jika “kosong” otomatis ascending atau dilakukan OrderBy.

Berikut contoh query data dengan metode LINQ (Language-Integrated Query).

LINQ sendiri merupakan perangkat yg memiliki fitur query yg beragam dan powerfull untuk bahasa C#.
Seperti contoh berikut ini, karena query ini...

var siswa = from s in db.Siswas select s;

...maka return View(db.Siswas.ToList()); diubah menjadi return View(siswa.ToList());

Tambahkan hyperlink sort di judul kolomnya Views\Siswa\Index.cshtml.

<table class="table">
<tr>
<th>
@Html.ActionLink("Nama Siswa", "Index", new { sortOrder = ViewBag.NameSortParm })
</th>
<th>
@Html.ActionLink("Kelas Siswa", "Index", new { sortOrder = ViewBag.IntSortParm })
</th>
<th></th>
</tr>

Penjelasannya :

Dengan ActionLink di atas user akan memberikan request ke controller untuk memproses sort yg di
inginkan.

Link awalnya spt ini http://localhost:53321/Siswa dan setelah di klik link akan tertulis :
http://localhost:53321/Siswa?sortOrder=nama_desc itu artinya jika di klik lagi sort data akan
descending.

Page 2 of 8
 © 2017 mztolo.com / contoh 6

Hasilnya spt ini, Anda bisa klik judul kolom (Nama Siswa, Kelas Siswa) untuk sort berdasar kolom tsb.

Search / Cari Data

Tambahkan fungsi cari/search di method Index yg ada di Controllers\SiswaController.cs, spt ini.
public ActionResult Index(string sortOrder, string searchString)
{
ViewBag.NameSortParm = String.IsNullOrEmpty(sortOrder) ? "nama_desc" : "";
ViewBag.IntSortParm = String.IsNullOrEmpty(sortOrder) ? "kls_desc" : "kls_asc";
var siswa = from s in db.Siswas
select s;

if (!String.IsNullOrEmpty(searchString))
{
siswa = siswa.Where(s =>
s.NamaSiswa.ToUpper().Contains(searchString.ToUpper()));
}

switch (sortOrder)
{

Tambahkan kolom cari/search di Views\Siswa\Index.cshtml.

<p>
@Html.ActionLink("Tambah Data", "Create")
</p>

@using (Html.BeginForm())
{
<p>
Cari Nama Siswa : @Html.TextBox("SearchString")
<input type="submit" value="Cari" />
</p>
}

<table class="table">
<tr>

Page 3 of 8
 © 2017 mztolo.com / contoh 6

Kolom untuk search/cari nama siswa sudah ditambahkan.

Ketik misal Dian atau Sastro dan klik tombol Cari.

Untuk menampilkan semua data lagi, kosongin kolom pencarian dan klik tombol Cari.

Paging / Penomoran Halaman

Untuk membuat paging Anda harus install paket PagedList.Mvc dari NuGet.

Note : Lihat dulu di References, jika sudah ada tdk usah install.

Page 4 of 8
 © 2017 mztolo.com / contoh 6

Jika blm ada caranya : Klik menu Tools -> NuGet Package Manager -> Package Manager Console

Cek di References, jika install sukses maka ada paket tsb.

Tambahkan fungsi paging di method Index yg ada di Controllers\SiswaController.cs

using PagedList;

namespace WebApp.Controllers
{
public class SiswaController : Controller
{
private Koneksi db = new Koneksi();

/*
// GET: Siswa
public ActionResult Index()
{
return View(db.Siswas.ToList());
}
*/

// Method SORT/SEARCH/PAGING
public ActionResult Index(string sortOrder, string searchString, string
currentFilter, int? page)
{
ViewBag.NameSortParm = String.IsNullOrEmpty(sortOrder) ? "nama_desc" : "";
ViewBag.IntSortParm = String.IsNullOrEmpty(sortOrder) ? "kls_desc" :
"kls_asc";

Page 5 of 8
 © 2017 mztolo.com / contoh 6

// tambahan ntuk paging

if (searchString != null)
{
page = 1;
}
else
{
searchString = currentFilter;
}
ViewBag.CurrentFilter = searchString;
//

var siswa = from s in db.Siswas

select s;

if (!String.IsNullOrEmpty(searchString))
{
siswa = siswa.Where(s =>
s.NamaSiswa.ToUpper().Contains(searchString.ToUpper()));
}

switch (sortOrder)
{
case "nama_desc":
siswa = siswa.OrderByDescending(s => s.NamaSiswa);
break;
case "kls_desc":
siswa = siswa.OrderByDescending(s => s.KelasSiswa);
break;
case "kls_asc":
siswa = siswa.OrderBy(s => s.KelasSiswa);
break;
default:
siswa = siswa.OrderBy(s => s.NamaSiswa);
break;
}

// tambahan ntuk paging, 3 baris per hal (ganti sesuai kebutuhan)

int pageSize = 3;
int pageNumber = (page ?? 1);
return View(siswa.ToPagedList(pageNumber, pageSize));
//
//return View(siswa.ToList());
}

Note : perhatikan yg diketik dengan huruf tebal.

Page 6 of 8
 © 2017 mztolo.com / contoh 6

Tambahkan paging link di Views\Siswa\Index.cshtml.

Ubah dibagian atas dari index.cshtml.

@model PagedList.IPagedList<WebApp.Models.Siswa>
@using PagedList.Mvc;
<link href="~/Content/PagedList.css" rel="stylesheet" type="text/css" />

@* @model IEnumerable<WebApp.Models.Siswa> *@

@{
ViewBag.Title = "Daftar Siswa";
}

<h2>Daftar Siswa</h2>

<p>
@Html.ActionLink("Tambah Data", "Create")
</p>

@* @using (Html.BeginForm()) *@
@using (Html.BeginForm("Index", "Siswa", FormMethod.Get))

{
<p>
@* Cari Nama Siswa : @Html.TextBox("SearchString") *@
Cari Nama Siswa : @Html.TextBox("SearchString", ViewBag.CurrentFilter as string)
<input type="submit" value="Cari" />
</p>
}

Note : @* menandakan tulisan di antaranya adalah teks/remarks dan bukan bagian dari koding atau
koding yg sudah tidak kita pakai lagi, sama persis dengan ** atau && di VFP.

Hanya berlaku di .cshtml kalo di method .cs memakai // atau kalo dlm satu blok dengan /* .. */

Selanjutnya tambahkan script di bawah ini di bagian akhir dari file Index.cshtml
<br />
@* menampilkan hal sd hal.*@
Page @(Model.PageCount < Model.PageNumber ? 0 : Model.PageNumber) of @Model.PageCount

@* menampilkan tombol halaman*@

@Html.PagedListPager(Model, page => Url.Action("Index", new { page, sortOrder =
ViewBag.CurrentSort, currentFilter = ViewBag.CurrentFilter }))

Page 7 of 8
 © 2017 mztolo.com / contoh 6

Hasilnya spt ini.

Terima kasih
Cakep...Sort, Search, Filter Paging sudah bisa, Anda sudah semakin sakti.

Tetap semangat dan lanjut ke contoh berikutnya.

Terima kasih.

Page 8 of 8