© 2017 mztolo.

com / contoh 11

.NET Contoh 11

Additional Challenges / System Web Routing

Copy WebApp009 ke WebApp010, jalankan aplikasi di web browser, buka data Siswa dan klik Details
salah satu Siswa, misalnya Susan.

Tampak tampilan spt ini.

Tantangannya adalah ingin membuat spt ini.

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

Skenario dari tantangan di atas adalah :

1. User bisa langsung melakukan proses edit, delete dan menampilkan detail Materi per masing-
masing Siswa.

Ketika di klik Edit akan tampil stp di bawah ini, selanjutnya ubah Nilai menjadi 10.

Pada saat user klik Save, akan dikembalikan ke view Detail Siswa dengan Daftar Materinya.

2. Kalau user tdk jadi melakukan Edit data bisa kembali ke Daftar Siswa dengan klik Back To Siswa.

Ini beda jika Anda merubah data Materi langsung melalui menu Materi.

Link yg ada Back To List atau kembali ke daftar Materi.

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

3. Sekarang coba klik link Details Materi, tampilannya akan spt ini.

Anda bisa lihat saja, Edit atau Back to Siswa.

4. Masih di Detail Siswa di bagian Daftar Materi, skr coba juga klik link Delete tampilan akan spt ini.

Jika tidak jadi menghapus Anda bisa kembali ke Daftar Siswa, klik Back To Siswa.

Jika Anda klik tombol Delete, view akan menampilkan Detail Siswa dengan Daftar Materi yg masih ada.

Btw, skenario-skenario di atas bisa Anda atur dan ubah sesuai keinginan Anda mau ke mana.

Misal setelah lihat Detail Materi selain Edit, back nya bukan Back To Siswa tapi Back To Detail Siswa.

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

Bagaimana dengan koding dan skripnya ?

1. Buka file di Views\Siswa\Details.cshtml dan tambahkan skrip berikut ini.
<tr>
<td> @Html.DisplayFor(modelItem => item.NamaMateri) </td>
<td> @Html.DisplayFor(modelItem => item.NilaiMateri) </td>
<td>
@Html.ActionLink("Edit", "Edit2", new { id = item.MateriID }) |
@Html.ActionLink("Details", "Details2", new { id = item.MateriID }) |
@Html.ActionLink("Delete", "Delete2", new { id = item.MateriID })
</td>
</tr>

Penjelasan :

Karena view ini punyanya Siswa, maka kita juga akan membuat method nya di SiswaController.cs

Spt tampak di atas method yg perlu kita tambahkan adalah : Edit2, Details2 dan Delete2

2. Buka file Controllers\SiswaController.cs dan tambahkan method2 spt di bawah ini.

using System.Web.Routing;

public ActionResult Edit2(int? id)

{
return RedirectToAction
(
"Edit2", new RouteValueDictionary
( new { controller = "Materi", action = "Edit2", id = id } )
);
}

Penjelasannya :

Ketika user klik Edit maka method yg akan di jalankan adalah Edit2, method ini sendiri akan diarahkan ke
method yg ada di MateriController.cs yg bernama Edit2 juga. (nanti hrs kita buat juga)

Jangan lupa di controller ini di bagian atas hrs ditambahkan using System.Web.Routing; karena kita
memakai fungsi RouteValueDictionary di method Edit2.

Method selanjutnya Detail2 dan Delete2.

public ActionResult Details2(int? id)

{
return RedirectToAction
(
"Details2", new RouteValueDictionary
( new { controller = "Materi", action = "Details2", id = id })
);
}

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

public ActionResult Delete2(int? id )

{
return RedirectToAction
("Delete2", new RouteValueDictionary
(new { controller = "Materi", action = "Delete2", id = id })
);
}

3. Method Edit2, Details2 dan Delete2 ini membutuhkan view dengan nama yg sama juga.

Kenapa hrs membuat view lagi untuk menghandle transaksi ini ? Sebab kita tdk ingin memakai view Edit,
Details dan Delete standard nya Materi, dan view yg akan kita buat sesuai kebutuhan skenario di atas.

View ke 2 ini sama persis dengan view standard nya hanya kita modifikasi, kalo begitu kita bisa copy dari
yg ada dong ? Betul.

Caranya klik kanan Views\Materi\Edit.cshtml kemudian pilih copy.

Untuk paste nya klik kanan folder Views\Materi dan pilih paste.

Kemudian klik kanan file hasil copy nya dan rename dengan nama Edit2.cshtml

Lakukan langkah2 tsb untuk view Details2.cshtml dan Delete2.cshtml

4. Ubah file Views\Materi\Edit2.cshtml menjadi spt ini.

<div>
@Html.ActionLink("Back to Siswa", "Index2", new { id = Model.SiswaID })
</div>

Selanjutnya file Views\Materi\Details2.cshtml

<p>
@Html.ActionLink("Edit", "Edit2", new { id = Model.MateriID }) |
@Html.ActionLink("Back to Siswa", "Index2", new { id = Model.SiswaID })
</p>

Begitu juga file Views\Materi\Delete2.cshtml

<div class="form-actions no-color">
<input type="submit" value="Delete" class="btn btn-default" /> |
@Html.ActionLink("Back to Siswa", "Index2", new { id = Model.SiswaID })
</div>

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

5. Menambahkan method di file Controllers\MateriController.cs untuk menghandle request dari view-

view tersebut di atas.
using System.Web.Routing;

// GET
public ActionResult Edit2(int? id)
{
if (id == null)
{
return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
}
Materi materi = db.Materis.Find(id);
if (materi == null)
{
return HttpNotFound();
}
ViewBag.SiswaID = new SelectList(db.Siswas, "ID", "NamaSiswa", materi.SiswaID);
return View(materi);
}

// POST
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Edit2([Bind(Include = "MateriID,SiswaID,NamaMateri,NilaiMateri")]
Materi materi)
{
if (ModelState.IsValid)
{
db.Entry(materi).State = EntityState.Modified;
db.SaveChanges();
return RedirectToAction
("Details", new RouteValueDictionary(new { controller = "Siswa", action =
"Details", id = materi.SiswaID }));
}
ViewBag.SiswaID = new SelectList(db.Siswas, "ID", "NamaSiswa", materi.SiswaID);
return RedirectToAction
(
"Details", new RouteValueDictionary
( new { controller = "Siswa", action = "Details", id = materi.SiswaID })
);
}

Penjelasan :

Jangan lupa di bagian atas ditambahkan using System.Web.Routing;

Method di atas mirip dengan method Edit yg ada, hanya saja link route nya diarahkan kembali ke Detail
Siswa yg dipilih di awal.

Perhatikan juga ini masih standard dan bllm memakai try – catch, silahkan di sempurnakan.

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

// GET
public ActionResult Index2(int? id)
{
return RedirectToAction
(
"Index", new RouteValueDictionary
(new { controller = "Siswa", action = "Index", id = id })
);
}

Penjelasannya :

Method ini dipakai di link Back to Siswa.

// GET
public ActionResult Delete2(int? id)
{
if (id == null)
{
return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
}
Materi materi = db.Materis.Find(id);
if (materi == null)
{
return HttpNotFound();
}
return View(materi);
}

// POST
[HttpPost, ActionName("Delete2")]
[ValidateAntiForgeryToken]
public ActionResult DeleteConfirmed2(int id)
{
Materi materi = db.Materis.Find(id);
db.Materis.Remove(materi);
db.SaveChanges();
return RedirectToAction("Details", new RouteValueDictionary(new { controller =
"Siswa", action = "Details", id = materi.SiswaID }));
}

Penjelasannya :

Method di atas mirip dengan method Delete yg ada, hanya saja link route nya diarahkan kembali ke
Detail Siswa yg dipilih di awal.

Perhatikan juga ini masih standard dan bllm memakai try – catch, silahkan di sempurnakan.

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

Terima kasih
Demikian tantangan kali ini dengan memanfaatkan fungsi RouteValueDictionary dari referensi
System.Web.Routing

Semoga berguna dan tetap semangat.

Terima kasih.

Page 8 of 8