Mulai menggunakan Entity Framework 4.0 Database First dan ASP.NET 4 Web Forms - Bagian 2

2023-07-13

Aplikasi web sampel Contoso University menunjukkan cara membuat aplikasi ASP.NET Web Forms menggunakan Entity Framework 4.0 dan Visual Studio 2010. Untuk informasi tentang seri tutorial, lihat tutorial pertama dalam seri

Kontrol EntityDataSource

Dalam tutorial sebelumnya Anda membuat situs web, database, dan model data. Dalam tutorial ini Anda bekerja dengan EntityDataSource kontrol yang disediakan ASP.NET untuk memudahkan bekerja dengan model data Kerangka Kerja Entitas. Anda akan membuat GridView kontrol untuk menampilkan dan mengedit data siswa, DetailsView kontrol untuk menambahkan siswa baru, dan DropDownList kontrol untuk memilih departemen (yang akan Anda gunakan nanti untuk menampilkan kursus terkait).

Perhatikan bahwa dalam aplikasi ini Anda tidak akan menambahkan validasi input ke halaman yang memperbarui database, dan beberapa penanganan kesalahan tidak akan sekuat yang diperlukan dalam aplikasi produksi. Itu membuat tutorial tetap berfokus pada Kerangka Kerja Entitas dan mencegahnya menjadi terlalu lama. Untuk detail tentang cara menambahkan fitur ini ke aplikasi Anda, lihat Memvalidasi Input Pengguna di Halaman Web ASP.NET dan Penanganan Kesalahan di Halaman dan Aplikasi ASP.NET.

Menambahkan dan Mengonfigurasi Kontrol EntityDataSource

Anda akan mulai dengan mengonfigurasi EntityDataSource kontrol untuk membaca Person entitas dari People kumpulan entitas.

Pastikan Visual Studio terbuka dan Anda bekerja dengan proyek yang Anda buat di bagian 1. Jika Anda belum membangun proyek sejak membuat model data atau sejak perubahan terakhir yang Anda buat, buat proyek sekarang. Perubahan pada model data tidak tersedia untuk perancang hingga proyek dibangun.

Buat halaman web baru menggunakan Formulir Web menggunakan templat Halaman Master , dan beri nama Students.aspx.

Tentukan Site.Master sebagai halaman master. Semua halaman yang Anda buat untuk tutorial ini akan menggunakan halaman master ini.

Dalam tampilan Sumber , tambahkan h2 judul ke Content kontrol bernama Content2, seperti yang diperlihatkan dalam contoh berikut:

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
   <h2>Student List</h2>
</asp:Content>

Dari tab Data kotak Alat, seret EntityDataSource kontrol ke halaman, letakkan di bawah judul, dan ubah ID menjadi StudentsEntityDataSource:

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <h2>Student List</h2>
    <asp:EntityDataSource ID="StudentsEntityDataSource" runat="server">
    </asp:EntityDataSource>
</asp:Content>

Beralih ke tampilan Desain , klik tag pintar kontrol sumber data, lalu klik Konfigurasi Sumber Data untuk meluncurkan wizard Konfigurasi Sumber Data .

Di langkah wizard Konfigurasi ObjectContext , pilih SchoolEntities sebagai nilai untuk Koneksi Bernama, dan pilih SchoolEntities sebagai nilai DefaultContainerName . Lalu, klik Berikutnya.

Catatan: Jika Anda mendapatkan kotak dialog berikut pada saat ini, Anda harus membangun proyek sebelum melanjutkan.

Di langkah Konfigurasi Pemilihan Data, pilih Orang sebagai nilai untuk EntitySetName. Di bawah Pilih, pastikan kotak centang Pilih A akan dipilih. Kemudian pilih opsi untuk mengaktifkan pembaruan dan penghapusan. Setelah selesai, klik Selesai.

Mengonfigurasi Aturan Database untuk Mengizinkan Penghapusan

Anda akan membuat halaman yang memungkinkan pengguna menghapus siswa dari Person tabel, yang memiliki tiga hubungan dengan tabel lain (Course, StudentGrade, dan OfficeAssignment). Secara default, database akan mencegah Anda menghapus baris Person jika ada baris terkait di salah satu tabel lainnya. Anda bisa menghapus baris terkait secara manual terlebih dahulu, atau Anda bisa mengonfigurasi database untuk menghapusnya secara otomatis saat Anda menghapus Person baris. Untuk catatan siswa dalam tutorial ini, Anda akan mengonfigurasi database untuk menghapus data terkait secara otomatis. Karena siswa hanya dapat memiliki baris terkait dalam StudentGrade tabel, Anda hanya perlu mengonfigurasi salah satu dari tiga hubungan.

Jika Anda menggunakan file School.mdf yang Anda unduh dari proyek yang berjalan dengan tutorial ini, Anda dapat melewati bagian ini karena perubahan konfigurasi ini telah dilakukan. Jika Anda membuat database dengan menjalankan skrip, konfigurasikan database dengan melakukan prosedur berikut.

Di Server Explorer, buka diagram database yang Anda buat di bagian 1. Klik kanan hubungan antara Person dan StudentGrade (garis antar tabel), lalu pilih Properti.

Di jendela Properti , perluas SPESIFIKASI INSERT dan UPDATE dan atur properti DeleteRule ke Cascade.

Simpan dan tutup diagram. Jika Anda ditanya apakah Anda ingin memperbarui database, klik Ya.

Untuk memastikan bahwa model membuat entitas yang berada dalam memori tetap sinkron dengan apa yang dilakukan database, Anda harus mengatur aturan yang sesuai dalam model data. Buka SchoolModel.edmx, klik kanan garis asosiasi antara Person dan StudentGrade, lalu pilih Properti.

Di jendela Properti , atur End1 OnDelete ke Cascade.

Simpan dan tutup file SchoolModel.edmx , lalu bangun kembali proyek.

Secara umum, ketika database berubah, Anda memiliki beberapa pilihan tentang cara menyinkronkan model:

Untuk jenis perubahan tertentu (seperti menambahkan atau menyegarkan tabel, tampilan, atau prosedur tersimpan), klik kanan di perancang dan pilih Perbarui Model dari Database agar perancang membuat perubahan secara otomatis.
Meregenerasi model data.
Buat pembaruan manual seperti ini.

Dalam hal ini, Anda bisa saja meregenerasi model atau merefresh tabel yang terpengaruh oleh perubahan hubungan, tetapi kemudian Anda harus membuat perubahan nama bidang lagi (dari FirstName ke FirstMidName).

Menggunakan Kontrol GridView untuk Membaca dan Memperbarui Entitas

Di bagian ini Anda akan menggunakan GridView kontrol untuk menampilkan, memperbarui, atau menghapus siswa.

Buka atau beralih ke Students.aspx dan beralihlah ke tampilan Desain . Dari tab Datakotak Alat, seret GridView kontrol ke sebelah kanan EntityDataSource kontrol, beri nama StudentsGridView, klik tag pintar, lalu pilih StudentsEntityDataSource sebagai sumber data.

Klik Refresh Skema (klik Ya jika Anda diminta untuk mengonfirmasi), lalu klik Aktifkan Halaman, Aktifkan Pengurutan, Aktifkan Pengeditan, dan Aktifkan Penghapusan.

Klik Edit Kolom.

Dalam kotak Bidang yang dipilih , hapus PersonID, LastName, dan HireDate. Anda biasanya tidak menampilkan kunci rekaman kepada pengguna, tanggal perekrutan tidak relevan dengan siswa, dan Anda akan meletakkan kedua bagian nama dalam satu bidang, sehingga Anda hanya memerlukan salah satu bidang nama.)

Pilih bidang FirstMidName lalu klik Konversi bidang ini menjadi Bidang Templat.

Lakukan hal yang sama untuk EnrollmentDate.

Klik OK lalu beralih ke tampilan Sumber . Perubahan yang tersisa akan lebih mudah dilakukan langsung di markup. GridView Markup kontrol sekarang terlihat seperti contoh berikut.

<asp:GridView ID="StudentsGridView" runat="server" AllowPaging="True" 
        AllowSorting="True" AutoGenerateColumns="False" DataKeyNames="PersonID" 
        DataSourceID="StudentsEntityDataSource">
        <Columns>
            <asp:CommandField ShowDeleteButton="True" ShowEditButton="True" />
            <asp:TemplateField HeaderText="FirstMidName" SortExpression="FirstMidName">
                <EditItemTemplate>
                    <asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("FirstMidName") %>'></asp:TextBox>
                </EditItemTemplate>
                <ItemTemplate>
                    <asp:Label ID="Label1" runat="server" Text='<%# Bind("FirstMidName") %>'></asp:Label>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="EnrollmentDate" SortExpression="EnrollmentDate">
                <EditItemTemplate>
                    <asp:TextBox ID="TextBox2" runat="server" Text='<%# Bind("EnrollmentDate") %>'></asp:TextBox>
                </EditItemTemplate>
                <ItemTemplate>
                    <asp:Label ID="Label2" runat="server" Text='<%# Bind("EnrollmentDate") %>'></asp:Label>
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>

Kolom pertama setelah bidang perintah adalah bidang templat yang saat ini menampilkan nama depan. Ubah markup untuk bidang templat ini agar terlihat seperti contoh berikut:

<asp:TemplateField HeaderText="Name" SortExpression="LastName">
                <EditItemTemplate>
                    <asp:TextBox ID="LastNameTextBox" runat="server" Text='<%# Bind("LastName") %>'></asp:TextBox>
                    <asp:TextBox ID="FirstNameTextBox" runat="server" Text='<%# Bind("FirstMidName") %>'></asp:TextBox>
                </EditItemTemplate>
                <ItemTemplate>
                    <asp:Label ID="LastNameLabel" runat="server" Text='<%# Eval("LastName") %>'></asp:Label>,
                    <asp:Label ID="FirstNameLabel" runat="server" Text='<%# Eval("FirstMidName") %>'></asp:Label>
                </ItemTemplate>
            </asp:TemplateField>

Dalam mode tampilan, dua Label kontrol menampilkan nama depan dan belakang. Dalam mode edit, dua kotak teks disediakan sehingga Anda dapat mengubah nama depan dan belakang. Seperti halnya Label kontrol dalam mode tampilan, Anda menggunakan Bind ekspresi dan Eval persis seperti yang Anda lakukan dengan kontrol sumber data ASP.NET yang terhubung langsung ke database. Satu-satunya perbedaan adalah Anda menentukan properti entitas alih-alih kolom database.

Kolom terakhir adalah bidang templat yang menampilkan tanggal pendaftaran. Ubah markup untuk bidang ini agar terlihat seperti contoh berikut:

<asp:TemplateField HeaderText="Enrollment Date" SortExpression="EnrollmentDate">
                <EditItemTemplate>
                    <asp:TextBox ID="EnrollmentDateTextBox" runat="server" Text='<%# Bind("EnrollmentDate", "{0:d}") %>'></asp:TextBox>
                </EditItemTemplate>
                <ItemTemplate>
                    <asp:Label ID="EnrollmentDateLabel" runat="server" Text='<%# Eval("EnrollmentDate", "{0:d}") %>'></asp:Label>
                </ItemTemplate>
            </asp:TemplateField>

Dalam mode tampilan dan edit, string format "{0,d}" menyebabkan tanggal ditampilkan dalam format "tanggal pendek". (Komputer Anda mungkin dikonfigurasi untuk menampilkan format ini secara berbeda dari gambar layar yang ditunjukkan dalam tutorial ini.)

Perhatikan bahwa di setiap bidang templat ini, perancang menggunakan Bind ekspresi secara default, tetapi Anda telah mengubahnya menjadi Eval ekspresi dalam ItemTemplate elemen. Bind Ekspresi membuat data tersedia di GridView properti kontrol jika Anda perlu mengakses data dalam kode. Di halaman ini Anda tidak perlu mengakses data ini dalam kode, sehingga Anda dapat menggunakan Eval, yang lebih efisien. Untuk informasi selengkapnya, lihat Mengeluarkan data Anda dari kontrol data.

Merevisi Markup Kontrol EntityDataSource untuk Meningkatkan Performa

Dalam markup untuk EntityDataSource kontrol, hapus ConnectionString atribut dan DefaultContainerName dan ganti dengan ContextTypeName="ContosoUniversity.DAL.SchoolEntities" atribut . Ini adalah perubahan yang harus Anda lakukan setiap kali Anda membuat EntityDataSource kontrol, kecuali Anda perlu menggunakan koneksi yang berbeda dari yang dikodekan secara permanen di kelas konteks objek. ContextTypeName Menggunakan atribut memberikan manfaat berikut:

Performa yang lebih baik. EntityDataSource Saat kontrol menginisialisasi model data menggunakan ConnectionString atribut dan DefaultContainerName , kontrol melakukan pekerjaan tambahan untuk memuat metadata pada setiap permintaan. Ini tidak diperlukan jika Anda menentukan ContextTypeName atribut .
Pemuatan malas diaktifkan secara default di kelas konteks objek yang dihasilkan (seperti SchoolEntities dalam tutorial ini) di Entity Framework 4.0. Ini berarti bahwa properti navigasi dimuat dengan data terkait secara otomatis tepat saat Anda membutuhkannya. Pemuatan malas dijelaskan secara lebih rinci nanti dalam tutorial ini.
Kustomisasi apa pun yang telah Anda terapkan ke kelas konteks objek (dalam hal ini, SchoolEntities kelas ) akan tersedia untuk kontrol yang menggunakan EntityDataSource kontrol. Menyesuaikan kelas konteks objek adalah topik lanjutan yang tidak tercakup dalam seri tutorial ini. Untuk informasi selengkapnya, lihat Memperluas Jenis yang Dihasilkan Kerangka Kerja Entitas.

Markup sekarang akan menyerupai contoh berikut (urutan properti mungkin berbeda):

<asp:EntityDataSource ID="StudentsEntityDataSource" runat="server"
        ContextTypeName="ContosoUniversity.DAL.SchoolEntities" EnableFlattening="False"
        EntitySetName="People"
        EnableDelete="True" EnableUpdate="True">
    </asp:EntityDataSource>

Atribut EnableFlattening mengacu pada fitur yang diperlukan dalam versi Kerangka Kerja Entitas sebelumnya karena kolom kunci asing tidak diekspos sebagai properti entitas. Versi saat ini memungkinkan untuk menggunakan asosiasi kunci asing, yang berarti properti kunci asing diekspos untuk semua asosiasi tetapi banyak-ke-banyak. Jika entitas Anda memiliki properti kunci asing dan tidak ada jenis kompleks, Anda dapat membiarkan atribut ini diatur ke False. Jangan hapus atribut dari markup, karena nilai defaultnya adalah True. Untuk informasi selengkapnya, lihat Meratakan Objek (EntityDataSource).

Jalankan halaman dan Anda melihat daftar siswa dan karyawan (Anda akan memfilter hanya siswa di tutorial berikutnya). Nama depan dan nama belakang ditampilkan bersama-sama.

Untuk mengurutkan tampilan, klik nama kolom.

Klik Edit di baris mana pun. Kotak teks ditampilkan di mana Anda bisa mengubah nama depan dan belakang.

Tombol Hapus juga berfungsi. Klik hapus untuk baris yang memiliki tanggal pendaftaran dan baris menghilang. (Baris tanpa tanggal pendaftaran mewakili instruktur dan Anda mungkin mendapatkan kesalahan integritas referensial. Dalam tutorial berikutnya Anda akan memfilter daftar ini untuk menyertakan hanya siswa.)

Sekarang misalkan Anda ingin tahu berapa banyak kursus yang didaftarkan setiap siswa. Kerangka Kerja Entitas menyediakan informasi tersebut StudentGrades di properti Person navigasi entitas. Karena desain database tidak memungkinkan siswa untuk terdaftar dalam kursus tanpa memiliki nilai yang ditetapkan, untuk tutorial ini Anda dapat berasumsi bahwa memiliki baris dalam StudentGrade baris tabel yang terkait dengan kursus sama dengan terdaftar dalam kursus. (Properti Courses navigasi hanya untuk instruktur.)

Saat Anda menggunakan ContextTypeName atribut EntityDataSource kontrol, Kerangka Kerja Entitas secara otomatis mengambil informasi untuk properti navigasi saat Anda mengakses properti tersebut. Ini disebut pemuatan malas. Namun, ini bisa tidak efisien, karena menghasilkan panggilan terpisah ke database setiap kali informasi tambahan diperlukan. Jika Anda memerlukan data dari properti navigasi untuk setiap entitas yang dikembalikan oleh EntityDataSource kontrol, lebih efisien untuk mengambil data terkait bersama dengan entitas itu sendiri dalam satu panggilan ke database. Ini disebut pemuatan bersemangat, dan Anda menentukan pemuatan bersemangat untuk properti navigasi dengan mengatur Include properti EntityDataSource kontrol.

Di Students.aspx, Anda ingin menunjukkan jumlah kursus untuk setiap siswa, sehingga pemuatan yang bersemangat adalah pilihan terbaik. Jika Anda menampilkan semua siswa tetapi menunjukkan jumlah kursus hanya untuk beberapa dari mereka (yang akan memerlukan penulisan beberapa kode selain markup), pemuatan malas mungkin menjadi pilihan yang lebih baik.

Buka atau beralih ke Students.aspx, beralihlah ke tampilan Desain , pilih StudentsEntityDataSource, dan di jendela Properti atur properti Sertakan ke StudentGrades. (Jika Anda ingin mendapatkan beberapa properti navigasi, Anda dapat menentukan namanya dipisahkan dengan koma — misalnya, StudentGrades, Courses.)

Beralih ke tampilan Sumber . StudentsGridView Dalam kontrol, setelah elemen terakhirasp:TemplateField, tambahkan bidang templat baru berikut ini:

<asp:TemplateField HeaderText="Number of Courses">
                <ItemTemplate>
                    <asp:Label ID="Label1" runat="server" Text='<%# Eval("StudentGrades.Count") %>'></asp:Label>
                </ItemTemplate>
            </asp:TemplateField>

Eval Dalam ekspresi, Anda dapat mereferensikan properti StudentGradesnavigasi . Karena properti ini berisi koleksi, properti ini memiliki Count properti yang dapat Anda gunakan untuk menampilkan jumlah kursus tempat siswa terdaftar. Dalam tutorial selanjutnya, Anda akan melihat cara menampilkan data dari properti navigasi yang berisi entitas tunggal alih-alih koleksi. (Perhatikan bahwa Anda tidak dapat menggunakan BoundField elemen untuk menampilkan data dari properti navigasi.)

Jalankan halaman dan Anda sekarang melihat berapa banyak kursus yang didaftarkan setiap siswa.

Menggunakan Kontrol DetailsView untuk Menyisipkan Entitas

Langkah selanjutnya adalah membuat halaman yang memiliki DetailsView kontrol yang akan memungkinkan Anda menambahkan siswa baru. Tutup browser lalu buat halaman web baru menggunakan halaman master Site.Master . Beri nama halaman StudentsAdd.aspx, lalu beralihlah ke tampilan Sumber .

Tambahkan markup berikut untuk mengganti markup yang ada untuk Content kontrol bernama Content2:

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <h2>Add New Students</h2>
    <asp:EntityDataSource ID="StudentsEntityDataSource" runat="server"
        ContextTypeName="ContosoUniversity.DAL.SchoolEntities" EnableFlattening="False"
        EnableInsert="True" EntitySetName="People">
    </asp:EntityDataSource>
    <asp:DetailsView ID="StudentsDetailsView" runat="server" 
        DataSourceID="StudentsEntityDataSource" AutoGenerateRows="False"
        DefaultMode="Insert">
        <Fields>
            <asp:BoundField DataField="FirstMidName" HeaderText="First Name" 
                SortExpression="FirstMidName" />
            <asp:BoundField DataField="LastName" HeaderText="Last Name" 
                SortExpression="LastName" />
            <asp:BoundField DataField="EnrollmentDate" HeaderText="Enrollment Date" 
                SortExpression="EnrollmentDate" />
             <asp:CommandField ShowInsertButton="True" />
       </Fields>
    </asp:DetailsView>
</asp:Content>

Markup ini membuat EntityDataSource kontrol yang mirip dengan yang Anda buat di Students.aspx, kecuali mengaktifkan penyisipan. Seperti halnya GridView kontrol, bidang terikat kontrol dikodekan DetailsView persis seperti untuk kontrol data yang terhubung langsung ke database, kecuali bahwa mereka mereferensikan properti entitas. Dalam hal ini, DetailsView kontrol hanya digunakan untuk menyisipkan baris, jadi Anda telah mengatur mode default ke Insert.

Jalankan halaman dan tambahkan siswa baru.

Tidak ada yang akan terjadi setelah Anda menyisipkan siswa baru, tetapi jika Anda sekarang menjalankan Students.aspx, Anda akan melihat informasi siswa baru.

Menampilkan Data dalam Daftar Drop-Down

Dalam langkah-langkah berikut, Anda akan mengikat DropDownList kontrol ke kumpulan entitas menggunakan EntityDataSource kontrol. Di bagian tutorial ini, Anda tidak akan melakukan banyak hal dengan daftar ini. Namun, di bagian berikutnya, Anda akan menggunakan daftar untuk memungkinkan pengguna memilih departemen untuk menampilkan kursus yang terkait dengan departemen.

Buat halaman web baru bernama Courses.aspx. Dalam tampilan Sumber , tambahkan judul ke Content kontrol yang bernama Content2:

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <h2>Courses by Department</h2>
</asp:Content>

Dalam tampilan Desain , tambahkan EntityDataSource kontrol ke halaman seperti yang Anda lakukan sebelumnya, kecuali kali ini beri nama DepartmentsEntityDataSource. Pilih Departemen sebagai nilai EntitySetName , dan pilih hanya properti DepartmentID dan Name .

Dari tab Standarkotak Alat, seret DropDownList kontrol ke halaman, beri nama DepartmentsDropDownList, klik tag pintar, dan pilih Pilih Sumber Data untuk memulai Panduan Konfigurasi Sumber Data.

Di langkah Pilih Sumber Data , pilih DepartemenEntityDataSource sebagai sumber data, klik Refresh Skema, lalu pilih Nama sebagai bidang data untuk ditampilkan dan DepartmentID sebagai bidang data nilai. Klik OK.

Metode yang Anda gunakan untuk menggabungkan kontrol menggunakan Kerangka Kerja Entitas sama dengan kontrol sumber data ASP.NET lainnya kecuali Anda menentukan entitas dan properti entitas.

Beralih ke tampilan Sumber dan tambahkan "Pilih departemen:" segera sebelum DropDownList kontrol.

Select a department:
    <asp:DropDownList ID="DropDownList1" runat="server" 
        DataSourceID="EntityDataSource1" DataTextField="Name" 
        DataValueField="DepartmentID">
    </asp:DropDownList>

Sebagai pengingat, ubah markup untuk EntityDataSource kontrol pada saat ini dengan mengganti ConnectionString atribut dan DefaultContainerName dengan ContextTypeName="ContosoUniversity.DAL.SchoolEntities" atribut . Seringkali yang terbaik adalah menunggu hingga Anda membuat kontrol terikat data yang ditautkan ke kontrol sumber data sebelum Anda mengubah EntityDataSource markup kontrol, karena setelah Anda membuat perubahan, perancang tidak akan memberi Anda opsi Refresh Skema di kontrol terikat data.

Jalankan halaman dan Anda dapat memilih departemen dari daftar drop-down.

Ini menyelesaikan pengenalan menggunakan EntityDataSource kontrol. Bekerja dengan kontrol ini umumnya tidak berbeda dengan bekerja dengan kontrol sumber data ASP.NET lainnya, kecuali bahwa Anda mereferensikan entitas dan properti alih-alih tabel dan kolom. Satu-satunya pengecualian adalah ketika Anda ingin mengakses properti navigasi. Dalam tutorial berikutnya Anda akan melihat bahwa sintaks yang Anda gunakan dengan EntityDataSource kontrol mungkin juga berbeda dari kontrol sumber data lain saat Anda memfilter, mengelompokkan, dan mengurutkan data.

Sebelumnya Berikutnya

Bagikan melalui