Menambahkan Kolom ke Model

oleh Scott Hanselman

Ini adalah tutorial pemula yang memperkenalkan dasar-dasar ASP.NET MVC. Anda akan membuat aplikasi web sederhana yang membaca dan menulis dari database. Kunjungi pusat pembelajaran MVC ASP.NET untuk menemukan tutorial dan sampel MVC ASP.NET lainnya.

Di bagian ini kita akan membahas bagaimana kita dapat membuat perubahan pada skema database kita, dan menangani perubahan dalam aplikasi kita.

Mari kita tambahkan Kolom "Peringkat" ke tabel Film. Kembali ke IDE dan klik Database Explorer. Klik kanan tabel Film dan pilih Buka Definisi Tabel.

Tambahkan kolom "Peringkat" seperti yang terlihat di bawah ini. Karena kami tidak memiliki Peringkat apa pun sekarang, kolom dapat mengizinkan null. Klik Simpan.

Selanjutnya, kembali ke Penjelajah Solusi dan buka file Movies.edmx (yang ada di folder \Model). Klik kanan pada permukaan desain (area putih) dan pilih Perbarui Model dari Database.

Ini akan meluncurkan "Wizard Pembaruan". Klik tab Refresh di dalamnya dan klik Selesai. Kelas Model film kami kemudian akan diperbarui dengan kolom baru.

Setelah mengklik Selesai, Anda dapat melihat Kolom Peringkat baru telah ditambahkan ke Entitas Film dalam model kami.

Kami telah menambahkan kolom dalam model database, tetapi Tampilan tidak mengetahuinya.

Perbarui Tampilan dengan Perubahan Model

Ada beberapa cara kami dapat memperbarui templat tampilan kami untuk mencerminkan kolom Peringkat baru. Karena kami membuat Tampilan ini dengan menghasilkannya melalui dialog Tambahkan Tampilan, kami dapat menghapusnya dan membuatnya kembali. Namun, biasanya orang akan telah membuat modifikasi pada templat Tampilan mereka dari pembuatan perancah awal dan akan ingin menambahkan atau menghapus bidang secara manual, seperti yang kita lakukan dengan bidang ID untuk Buat.

Buka templat \Views\Movies\Index.aspx dan tambahkan <Peringkat</th> ke>kepala tabel Film. Aku menambahkan punyaku setelah Genre. Kemudian, dalam posisi kolom yang sama tetapi lebih rendah ke bawah, tambahkan baris untuk menghasilkan Peringkat baru kami.

<td>
  <%: item.Rating %>
</td>

Templat Index.aspx akhir kami akan terlihat seperti ini:

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<IEnumerable<Movies.Models.Movie>>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    Movie List
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <h2>My Movie List</h2>
    <table>
        <tr>
            <th>Id</th>
            <th>Title</th>
            <th>ReleaseDate</th>
            <th>Genre</th>
            <th>Rating</th>
            <th>Price</th>
        </tr>
        <% foreach (var item in Model)
           { %>
        <tr>
            <td><%: item.Id %></td>
            <td><%: item.Title %></td>
            <td><%: String.Format("{0:g}", item.ReleaseDate) %></td>
            <td><%: item.Genre %></td>
            <td><%: item.Rating %></td>
            <td><%: String.Format("{0:F}", item.Price) %></td>
        </tr>
        <% } %>
    </table>
    <p>
        <%: Html.ActionLink("Create New", "Create") %>
    </p>
</asp:Content>

Mari kita buka templat \Views\Movies\Create.aspx dan tambahkan Label dan Kotak Teks untuk properti Peringkat baru kami:

<div class="editor-label">
    <%: Html.LabelFor(model => model.Rating) %>
</div>
<div class="editor-field">
    <%: Html.TextBoxFor(model => model.Rating)%>
    <%: Html.ValidationMessageFor(model => model.Rating)%>
</div>

Templat Create.aspx akhir kami akan terlihat seperti ini, dan mari kita ubah judul browser dan judul h2> sekunder <menjadi sesuatu seperti "Buat Film" saat kami berada di sini!

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<Movies.Models.Movie>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    Create a Movie
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <script src="../../Scripts/MicrosoftAjax.js" type="text/javascript"></script>
    <script src="../../Scripts/MicrosoftMvcValidation.js" type="text/javascript"></script>
    <h2>Create a Movie</h2>
    <% Html.EnableClientValidation(); %>
    <% using (Html.BeginForm()) {%>
        <%: Html.ValidationSummary(true) %>

        <fieldset>
            <legend>Fields</legend>
           
            <div class="editor-label">
                <%: Html.LabelFor(model => model.Title) %>
            </div>
            <div class="editor-field">
                <%: Html.TextBoxFor(model => model.Title) %>
                <%: Html.ValidationMessageFor(model => model.Title) %>
            </div>
           
            <div class="editor-label">
                <%: Html.LabelFor(model => model.ReleaseDate) %>
            </div>
            <div class="editor-field">
                <%: Html.TextBoxFor(model => model.ReleaseDate) %>
                <%: Html.ValidationMessageFor(model => model.ReleaseDate) %>
            </div>
           
            <div class="editor-label">
                <%: Html.LabelFor(model => model.Genre) %>
            </div>
            <div class="editor-field">
                <%: Html.TextBoxFor(model => model.Genre) %>
                <%: Html.ValidationMessageFor(model => model.Genre) %>
            </div>

            <div class="editor-label">
                <%: Html.LabelFor(model => model.Rating) %>
            </div>
            <div class="editor-field">
                <%: Html.TextBoxFor(model => model.Rating)%>
                <%: Html.ValidationMessageFor(model => model.Rating)%>
            </div>

            <div class="editor-label">
                <%: Html.LabelFor(model => model.Price) %>
            </div>
            <div class="editor-field">
                <%: Html.TextBoxFor(model => model.Price) %>
                <%: Html.ValidationMessageFor(model => model.Price) %>
            </div>
           
            <p>
                <input type="submit" value="Create" />
            </p>
        </fieldset>

    <% } %>

    <div>
        <%: Html.ActionLink("Back to List", "Index") %>
    </div>

</asp:Content>

Jalankan aplikasi Anda dan sekarang Anda memiliki bidang baru di database yang telah ditambahkan ke halaman Buat. Tambahkan Film baru - kali ini dengan Peringkat - dan klik Buat.

Setelah Anda mengklik Buat, Anda dikirim ke halaman Indeks tempat Film baru Anda dicantumkan dengan Kolom Peringkat baru dalam database

Tutorial dasar ini membuat Anda mulai membuat Pengontrol, mengaitkannya dengan Tampilan dan meneruskan data yang dikodekan secara permanen. Kemudian kami membuat dan merancang Database dan memasukkan beberapa data ke dalamnya. Kami mengambil data dari database dan menampilkannya dalam tabel HTML. Kemudian kami menambahkan formulir Buat yang memungkinkan pengguna menambahkan data ke database itu sendiri dari dalam Aplikasi Web. Kami menambahkan validasi, lalu membuat validasi menggunakan JavaScript di sisi klien. Akhirnya, kami mengubah database untuk menyertakan kolom data baru, lalu memperbarui dua halaman kami untuk membuat dan menampilkan data baru ini.

Saya sekarang mendorong Anda untuk beralih ke tutorial tingkat menengah kami "MVC Music Store" serta banyak video dan sumber daya di https://asp.net/mvc untuk mempelajari lebih lanjut tentang ASP.NET MVC!

Nikmati!

• Scott Hanselman - http://hanselman.com dan @shanselman di Twitter.

Sebelumnya