ASP.NET MVC Hands On Labs (Part3 – Membuat View)

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”

image

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.

image

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.

image

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”.

image

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>

image

 

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”.

image

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>

image

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”.

image

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>

image

Tutorial selanjutnya adalah menambahkan JQuery kedalam aplikasi ASP.NET MVC

4 thoughts on “ASP.NET MVC Hands On Labs (Part3 – Membuat View)

  1. Sepertinya aq mengalami kesulitan pada saat membuat viewnya. terdapat error : The model item passed into the dictionary is of type ‘System.Data.Linq.DataQuery`1[ComputerStore.Models.Product]’, but this dictionary requires a model item of type ‘ComputerStore.Models.Product’.

    Itu kenapa ya?
    Mohon penjelasannya.

  2. mas untuk select master page ny itu yang di folder shared kok ndak ada pembahasannya
    sy agak miss di bagian itu ,…

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s