Tutorial ini adalah sambungan dari Hands On Labs ASP.NET MVC Part1, Part2
Membuat View
View Berisi HTML Markup dan View Logic, digunakan untuk menampilkan isi dari Model.
View Index
1. Pertama kita akan membuat View yang digunakan untuk menampilkan seluruh Product kedalam table. View ini akan dijalankan pertama kali ketika kita menjalankan aplikasi
2. Anda dapat membuat View dengan cara manual tapi dengan editor VS 2008 anda dapat menggunakan fitur yang mirip “scaffold” untuk membuat View dengan cara cepat.
3. Masuk ke halaman Controller, kemudian klik kanan di bagian ActionResult “Index” – pilih “Add View”
4. Pada tampilan “Add View”, View name akan secara otomatis sesuai dengan nama ActionResult di Controllernya, check pada “Create a strongly typed view” kemudian pilih “ComputerStore.Models.Product”. Pada View Content pilih “Details”, jangan lupa juga untuk check pada pilihan “Select Master Page” untuk menggunakan Master Page yang sudah tersedia.
5. Maka secara otomatis Visual Studio akan mengcreate View berdasarkan Model yang anda gunakan.
<h2>Product Details</h2>
<table>
<tr>
<th></th>
<th>Id</th>
<th>Name</th>
<th>Description</th>
<th>Price</th>
<th>Qty</th>
<th>BuyDate</th>
</tr>
<% foreach (var item in Model) { %>
<tr>
<td>
<%= Html.ActionLink("Edit", "Edit", new { id = item.Id })%> |
<%= Html.ActionLink("Delete", "Delete", new { id = item.Id })%>
</td>
<td>
<%= Html.Encode(item.Id) %>
</td>
<td>
<%= Html.Encode(item.Name) %>
</td>
<td>
<%= Html.Encode(item.Description) %>
</td>
<td>
<%= Html.Encode(String.Format("{0:F}", item.Price)) %>
</td>
<td>
<%= Html.Encode(item.Qty) %>
</td>
<td>
<%= Html.Encode(String.Format("{0:d}", item.BuyDate)) %>
</td>
</tr>
<% } %>
</table>
<p>
<%= Html.ActionLink("Create New", "Create") %>
</p>
6. Jika program dijalankan maka di halaman pertama “Home/Index” akan ditampilkan list Product sebagai berikut.
View Create
1. Sekarang kita akan membuat View untuk Create / Insert data, caranya sama dengan cara yang sudah kita lakukan untuk membuat Index View diatas.
2. Masuk ke HomeController.cs, Klik kanan pada ActionResult “Create” – kemudian pilih ‘Add View’ – check “Create a strongly-typed view” – pada View Content pilih “Create”.
3. Maka secara otomatis VS akan membuatkan View yang berisi form untuk insert data Product, beserta validasinya.
<h2>Insert Product</h2>
<%= Html.ValidationSummary("Create was unsuccessful. Please correct the errors and try again.") %>
<% using (Html.BeginForm()) {%>
<fieldset>
<legend>Product Fields</legend>
<p>
<label for="Name">Name:</label>
<%= Html.TextBox("Name") %>
<%= Html.ValidationMessage("Name", "*") %>
</p>
<p>
<label for="Description">Description:</label>
<%= Html.TextArea("Description") %>
<%= Html.ValidationMessage("Description", "*") %>
</p>
<p>
<label for="Price">Price:</label>
<%= Html.TextBox("Price") %>
<%= Html.ValidationMessage("Price", "*") %>
</p>
<p>
<label for="Qty">Qty:</label>
<%= Html.TextBox("Qty") %>
<%= Html.ValidationMessage("Qty", "*") %>
</p>
<p>
<label for="BuyDate">BuyDate:</label>
<%= Html.TextBox("BuyDate") %>
<%= Html.ValidationMessage("BuyDate", "*") %>
</p>
<p>
<input type="submit" value="Create" />
</p>
</fieldset>
<% } %>
<div>
<%=Html.ActionLink("Back to List", "Index") %>
</div>
View Edit
1. Langkah selanjutnya buat View untuk menangani Edit data Product.
2. Masuk ke HomeController.cs, kemudian klik kanan pada ActionResult “Edit” – pilih “Add View” – check pada “Create a strongly-typed view” – pada View Content pilih “Edit”.
3. Secara otomatis Visual Studio akan membuatkan Form untuk edit data pada View Edit.
<h2>Edit Product</h2>
<%= Html.ValidationSummary("Edit was unsuccessful. Please correct the errors and try again.") %>
<% using (Html.BeginForm()) {%>
<fieldset>
<legend>Product Fields</legend>
<p>
<label for="Id">Id:</label>
<%= Html.TextBox("Id", Model.Id, new { @readonly="true" })%>
<%= Html.ValidationMessage("Id", "*") %>
</p>
<p>
<label for="Name">Name:</label>
<%= Html.TextBox("Name", Model.Name) %>
<%= Html.ValidationMessage("Name", "*") %>
</p>
<p>
<label for="Description">Description:</label>
<%= Html.TextBox("Description", Model.Description) %>
<%= Html.ValidationMessage("Description", "*") %>
</p>
<p>
<label for="Price">Price:</label>
<%= Html.TextBox("Price", String.Format("{0:F}", Model.Price)) %>
<%= Html.ValidationMessage("Price", "*") %>
</p>
<p>
<label for="Qty">Qty:</label>
<%= Html.TextBox("Qty", Model.Qty) %>
<%= Html.ValidationMessage("Qty", "*") %>
</p>
<p>
<label for="BuyDate">BuyDate:</label>
<%= Html.TextBox("BuyDate", String.Format("{0:d}", Model.BuyDate)) %>
<%= Html.ValidationMessage("BuyDate", "*") %>
</p>
<p>
<input type="submit" value="Save" />
</p>
</fieldset>
<% } %>
<div>
<%=Html.ActionLink("Back to List", "Index") %>
</div>
View Delete
1. Terakhir buat View untuk menangani proses Delete data.
2. Masuk ke HomeController.cs, klik kana pada ActionResult “Delete” – pilih “Add View” – kemudian check “Create a strongly-typed view” – pada View Content pilih “Empty”.
3. Tuliskan kode berikut pada Delete View.
<h2>Delete Confirmation</h2>
<div>
<p>Please confirm you want to deleted Product :
<i> <%=Html.Encode(Model.Name) %>? </i> </p>
</div>
<% using (Html.BeginForm()) { %>
<input name="confirmButton" type="submit" value="Delete" />
<% } %>
4. Kemudian buat juga Deleted View untuk menampilkan konfirmasi bahwa data sudah berhasil didelete.
<h2>Product Deleted</h2>
<div>
<p>Your product was successfully deleted.</p>
</div>
<div>
<p><a href="/Home">Click for view Product</a></p>
</div>
Tutorial selanjutnya adalah menambahkan JQuery kedalam aplikasi ASP.NET MVC
Actual Training 