Memperbarui, menghapus, dan membuat data dengan pengikatan model dan formulir web

oleh Tom FitzMacken

Seri tutorial ini menunjukkan aspek dasar penggunaan pengikatan model dengan proyek ASP.NET Web Forms. Pengikatan model membuat interaksi data lebih lurus ke depan daripada berurusan dengan objek sumber data (seperti ObjectDataSource atau SqlDataSource). Seri ini dimulai dengan materi pengantar dan beralih ke konsep yang lebih canggih dalam tutorial selanjutnya.

Tutorial ini menunjukkan cara membuat, memperbarui, dan menghapus data dengan pengikatan model. Anda akan mengatur properti berikut:

• DeleteMethod
• InsertMethod
• UpdateMethod

Properti ini menerima nama metode yang menangani operasi yang sesuai. Dalam metode itu, Anda menyediakan logika untuk berinteraksi dengan data.

Tutorial ini dibangun pada proyek yang dibuat di bagian pertama seri.

Anda dapat mengunduh proyek lengkap di C# atau VB. Kode yang dapat diunduh berfungsi dengan Visual Studio 2012 atau Visual Studio 2013. Ini menggunakan templat Visual Studio 2012, yang sedikit berbeda dari templat Visual Studio 2013 yang ditunjukkan dalam tutorial ini.

Apa yang akan Anda bangun

Dialam tutorial ini, Anda akan:

1. Menambahkan templat data dinamis
2. Mengaktifkan pembaruan dan penghapusan data melalui metode pengikatan model
3. Menerapkan aturan validasi data - Mengaktifkan pembuatan rekaman baru dalam database

Menambahkan templat data dinamis

Untuk memberikan pengalaman pengguna terbaik dan meminimalkan pengulangan kode, Anda akan menggunakan templat data dinamis. Anda dapat dengan mudah mengintegrasikan templat data dinamis bawaan ke situs Anda yang ada dengan menginstal paket NuGet.

Dari Kelola Paket NuGet, instal DynamicDataTemplatesCS.

Perhatikan bahwa proyek Anda sekarang menyertakan folder bernama DynamicData. Di folder tersebut, Anda akan menemukan templat yang secara otomatis diterapkan ke kontrol dinamis dalam formulir web Anda.

Mengaktifkan pembaruan dan penghapusan

Memungkinkan pengguna memperbarui dan menghapus rekaman dalam database sangat mirip dengan proses untuk mengambil data. Di properti UpdateMethod dan DeleteMethod , Anda menentukan nama metode yang melakukan operasi tersebut. Dengan kontrol GridView, Anda juga dapat menentukan pembuatan otomatis tombol edit dan hapus. Kode yang disorot berikut menunjukkan penambahan ke kode GridView.

<asp:GridView runat="server" ID="studentsGrid"
    ItemType="ContosoUniversityModelBinding.Models.Student" DataKeyNames="StudentID"
    SelectMethod="studentsGrid_GetData"
    UpdateMethod="studentsGrid_UpdateItem" DeleteMethod="studentsGrid_DeleteItem"
    AutoGenerateEditButton="true" AutoGenerateDeleteButton="true"  
    AutoGenerateColumns="false">

Dalam file code-behind, tambahkan pernyataan penggunaan untuk System.Data.Entity.Infrastructure.

using System.Data.Entity.Infrastructure;

Kemudian, tambahkan metode pembaruan dan penghapusan berikut.

public void studentsGrid_UpdateItem(int studentID)
{
    using (SchoolContext db = new SchoolContext())
    {
        Student item = null;
        item = db.Students.Find(studentID);
        if (item == null)
        {
            ModelState.AddModelError("", 
              String.Format("Item with id {0} was not found", studentID));
            return;
        }
              
        TryUpdateModel(item);
        if (ModelState.IsValid)
        {
            db.SaveChanges();
        }
    }
}

public void studentsGrid_DeleteItem(int studentID)
{
    using (SchoolContext db = new SchoolContext())
    {
        var item = new Student { StudentID = studentID };
        db.Entry(item).State = EntityState.Deleted;
        try
        {
            db.SaveChanges();
        }
        catch (DbUpdateConcurrencyException)
        {
            ModelState.AddModelError("", 
              String.Format("Item with id {0} no longer exists in the database.", studentID));
        }
    }
}

Metode TryUpdateModel menerapkan nilai terikat data yang cocok dari formulir web ke item data. Item data diambil berdasarkan nilai parameter id.

Menerapkan persyaratan validasi

Atribut validasi yang Anda terapkan ke properti FirstName, LastName, dan Year di kelas Siswa secara otomatis diberlakukan saat memperbarui data. Kontrol DynamicField menambahkan validator klien dan server berdasarkan atribut validasi. Properti FirstName dan LastName keduanya diperlukan. FirstName tidak boleh melebihi 20 karakter, dan LastName tidak boleh melebihi 40 karakter. Tahun harus berupa nilai yang valid untuk enumerasi AcademicYear.

Jika pengguna melanggar salah satu persyaratan validasi, pembaruan tidak dilanjutkan. Untuk melihat pesan kesalahan, tambahkan kontrol ValidationSummary di atas GridView. Untuk menampilkan kesalahan validasi dari pengikatan model, atur properti ShowModelStateErrors yang diatur ke true.

<asp:ValidationSummary ShowModelStateErrors="true" runat="server" />

Jalankan aplikasi web, dan perbarui dan hapus salah satu catatan.

Perhatikan bahwa ketika dalam mode edit, nilai untuk properti Tahun secara otomatis dirender sebagai daftar drop-down. Properti Tahun adalah nilai enumerasi, dan templat data dinamis untuk nilai enumerasi menentukan daftar drop-down untuk pengeditan. Anda dapat menemukan templat tersebut dengan membuka file Enumeration_Edit.ascx di folder DynamicData/FieldTemplates .

Jika Anda memberikan nilai yang valid, pembaruan berhasil diselesaikan. Jika Anda melanggar salah satu persyaratan validasi, pembaruan tidak dilanjutkan dan pesan kesalahan ditampilkan di atas kisi.

Menambahkan rekaman baru

Kontrol GridView tidak menyertakan properti InsertMethod dan karenanya tidak dapat digunakan untuk menambahkan rekaman baru dengan pengikatan model. Anda dapat menemukan properti InsertMethod di kontrol FormView, DetailsView, atau ListView . Dalam tutorial ini, Anda akan menggunakan kontrol FormView untuk menambahkan rekaman baru.

Pertama, tambahkan tautan ke halaman baru yang akan Anda buat untuk menambahkan rekaman baru. Di atas ValidationSummary, tambahkan:

<asp:HyperLink NavigateUrl="~/AddStudent" Text="Add New Student" runat="server" />

Tautan baru akan muncul di bagian atas konten untuk halaman Siswa.

Kemudian, tambahkan formulir web baru menggunakan halaman master, dan beri nama AddStudent. Pilih Site.Master sebagai halaman master.

Anda akan merender bidang untuk menambahkan siswa baru dengan menggunakan kontrol DynamicEntity . Kontrol DynamicEntity merender properti yang dapat diedit di kelas yang ditentukan dalam properti ItemType. Properti StudentID ditandai dengan atribut [ScaffoldColumn(false)] sehingga tidak dirender. Di tempat penampung MainContent halaman AddStudent, tambahkan kode berikut.

<asp:ValidationSummary runat="server" ShowModelStateErrors="true" />
<asp:FormView runat="server" ID="addStudentForm"
    ItemType="ContosoUniversityModelBinding.Models.Student" 
    InsertMethod="addStudentForm_InsertItem" DefaultMode="Insert"
    RenderOuterTable="false" OnItemInserted="addStudentForm_ItemInserted">
    <InsertItemTemplate>
        <fieldset>
            <ol>
                <asp:DynamicEntity runat="server" Mode="Insert" />
            </ol>
            <asp:Button runat="server" Text="Insert" CommandName="Insert" />
            <asp:Button runat="server" Text="Cancel" CausesValidation="false" OnClick="cancelButton_Click" />
        </fieldset>
    </InsertItemTemplate>
</asp:FormView>

Dalam file code-behind (AddStudent.aspx.cs), tambahkan pernyataan penggunaan untuk namespace ContosoUniversityModelBinding.Models .

using ContosoUniversityModelBinding.Models;

Kemudian, tambahkan metode berikut untuk menentukan cara menyisipkan rekaman baru dan penanganan aktivitas untuk tombol batalkan.

public void addStudentForm_InsertItem()
{
    var item = new Student();
            
    TryUpdateModel(item);
    if (ModelState.IsValid)
    {
        using (SchoolContext db = new SchoolContext())
        {
            db.Students.Add(item);
            db.SaveChanges();
        }
    }
}

protected void cancelButton_Click(object sender, EventArgs e)
{
    Response.Redirect("~/Students");
}

protected void addStudentForm_ItemInserted(object sender, FormViewInsertedEventArgs e)
{
    Response.Redirect("~/Students");
}

Simpan semua perubahan.

Jalankan aplikasi web dan buat siswa baru.

Klik Sisipkan dan perhatikan bahwa siswa baru telah dibuat.

Kesimpulan

Dalam tutorial ini, Anda mengaktifkan pembaruan, penghapusan, dan pembuatan data. Anda memastikan aturan validasi diterapkan saat berinteraksi dengan data.

Dalam tutorial berikutnya dalam seri ini, Anda akan mengaktifkan pengurutan, penomoran halaman, dan pemfilteran data.

SebelumnyaBerikutnya