Bagikan melalui

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

oleh Tom Dykstra

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

Memfilter, Mengurutkan, dan Mengelompokkan Data

Dalam tutorial sebelumnya Anda menggunakan EntityDataSource kontrol untuk menampilkan dan mengedit data. Dalam tutorial ini Anda akan memfilter, memesan, dan mengelompokkan data. Saat Anda melakukan ini dengan mengatur properti EntityDataSource kontrol, sintaksnya berbeda dari kontrol sumber data lainnya. Seperti yang akan Anda lihat, Anda dapat menggunakan QueryExtender kontrol untuk meminimalkan perbedaan ini.

Anda akan mengubah halaman Students.aspx untuk memfilter siswa, mengurutkan menurut nama, dan mencari nama. Anda juga akan mengubah halaman Courses.aspx untuk menampilkan kursus untuk departemen yang dipilih dan mencari kursus berdasarkan nama. Terakhir, Anda akan menambahkan statistik siswa ke halaman About.aspx .

Cuplikan layar jendela Internet Explorer, yang memperlihatkan tampilan Daftar Siswa dengan tabel siswa.

Cuplikan layar jendela Internet Explorer, yang menampilkan kursus menurut tampilan Departemen dan Kursus menurut Nama.

Cuplikan layar jendela Internet Explorer, yang memperlihatkan tampilan Statistik Badan Siswa dengan tabel tanggal pendaftaran.

Cuplikan layar jendela Internet Explorer, yang memperlihatkan tampilan Temukan Siswa menurut Nama dengan huruf g yang dimasukkan ke dalam kueri pencarian.

Menggunakan Properti EntityDataSource "Where" untuk Memfilter Data

Buka halaman Students.aspx yang Anda buat di tutorial sebelumnya. Seperti yang saat ini dikonfigurasi, GridView kontrol di halaman menampilkan semua nama dari People kumpulan entitas. Namun, Anda hanya ingin menampilkan siswa, yang dapat Anda temukan dengan memilih Person entitas yang memiliki tanggal pendaftaran non-null.

Beralih ke tampilan Desain dan pilih EntityDataSource kontrol. Di jendela Properti , setel properti Where ke it.EnrollmentDate is not null .

Gambar01

Sintaks yang Anda gunakan dalam Where properti EntityDataSource kontrol adalah Entity SQL. SQL entitas mirip dengan Transact-SQL, tetapi disesuaikan untuk digunakan dengan entitas daripada objek database. Dalam ekspresi it.EnrollmentDate is not null, kata it mewakili referensi ke entitas yang dikembalikan oleh kueri. Oleh karena itu, it.EnrollmentDate mengacu pada EnrollmentDate properti Person entitas yang EntityDataSource dikembalikan kontrol.

Jalankan halaman. Daftar siswa sekarang hanya berisi siswa. (Tidak ada baris yang ditampilkan di mana tidak ada tanggal pendaftaran.)

Cuplikan layar jendela Internet Explorer, yang memperlihatkan tampilan Daftar Siswa dengan tabel siswa.

Menggunakan Properti EntityDataSource "OrderBy" untuk Memesan Data

Anda juga ingin daftar ini dalam urutan nama saat pertama kali ditampilkan. Dengan halaman Students.aspx masih terbuka dalam tampilan Desain , dan dengan EntityDataSource kontrol masih dipilih, di jendela Properti atur properti OrderBy ke it.LastName.

Gambar05

Jalankan halaman. Daftar siswa sekarang berurutan menurut nama belakang.

Gambar04

Menggunakan Parameter Kontrol untuk Mengatur Properti "Where"

Seperti halnya kontrol sumber data lainnya, Anda dapat meneruskan nilai parameter ke Where properti . Pada halaman Courses.aspx yang Anda buat di bagian 2 tutorial, Anda dapat menggunakan metode ini untuk menampilkan kursus yang terkait dengan departemen yang dipilih pengguna dari daftar drop-down.

Buka Courses.aspx dan beralihlah ke tampilan Desain . Tambahkan kontrol kedua EntityDataSource ke halaman, dan beri CoursesEntityDataSourcenama . Sambungkan ke SchoolEntities model, dan pilih Courses sebagai nilai EntitySetName .

Di jendela Properti , klik elipsis di kotak properti Where . (Pastikan CoursesEntityDataSource kontrol masih dipilih sebelum menggunakan jendela Properti .)

Gambar06

Kotak dialog Editor Ekspresi ditampilkan. Dalam kotak dialog ini, pilih Buat ekspresi Where secara otomatis berdasarkan parameter yang disediakan, lalu klik Tambahkan Parameter. Beri nama parameter DepartmentID, pilih Kontrol sebagai nilai Sumber parameter , dan pilih DepartemenDropDownList sebagai nilai ControlID .

Gambar07

Klik Perlihatkan properti tingkat lanjut, dan di jendela Properti dari kotak dialog Editor Ekspresi , ubah properti menjadi TypeInt32.

Gambar15

Setelah selesai, klik OK.

Di bawah daftar drop-down, tambahkan GridView kontrol ke halaman dan beri CoursesGridViewnama . Sambungkan ke CoursesEntityDataSource kontrol sumber data, klik Refresh Skema, klik Edit Kolom, dan hapus DepartmentID kolom. GridView Markup kontrol menyerupai contoh berikut.

<asp:GridView ID="CoursesGridView" runat="server" AutoGenerateColumns="False" 
        DataKeyNames="CourseID" DataSourceID="CoursesEntityDataSource">
        <Columns>
            <asp:BoundField DataField="CourseID" HeaderText="ID" ReadOnly="True" 
                SortExpression="CourseID" />
            <asp:BoundField DataField="Title" HeaderText="Title" SortExpression="Title" />
            <asp:BoundField DataField="Credits" HeaderText="Credits" 
                SortExpression="Credits" />
        </Columns>
    </asp:GridView>

Saat pengguna mengubah departemen yang dipilih di daftar drop-down, Anda ingin daftar kursus terkait berubah secara otomatis. Untuk meluaskan hal ini, pilih daftar drop-down, dan di jendela Properti atur AutoPostBack properti ke True.

Gambar08

Sekarang setelah Anda selesai menggunakan perancang, beralihlah ke tampilan Sumber dan ganti ConnectionString properti CoursesEntityDataSource nama dan DefaultContainer kontrol dengan ContextTypeName="ContosoUniversity.DAL.SchoolEntities" atribut . Setelah selesai, markup untuk kontrol akan terlihat seperti contoh berikut.

<asp:EntityDataSource ID="CoursesEntityDataSource" runat="server" 
        ContextTypeName="ContosoUniversity.DAL.SchoolEntities" EnableFlattening="false"
        EntitySetName="Courses" 
        AutoGenerateWhereClause="true" Where="">
        <WhereParameters>
            <asp:ControlParameter ControlID="DepartmentsDropDownList" Type="Int32" 
                Name="DepartmentID" PropertyName="SelectedValue" />
        </WhereParameters>
    </asp:EntityDataSource>

Jalankan halaman dan gunakan daftar drop-down untuk memilih departemen yang berbeda. Hanya kursus yang ditawarkan oleh departemen yang dipilih yang ditampilkan dalam GridView kontrol.

Gambar09

Menggunakan Properti EntityDataSource "GroupBy" untuk Mengelompokkan Data

Misalkan Contoso University ingin menempatkan beberapa statistik tubuh siswa di halaman Tentang. Secara khusus, ia ingin menunjukkan perincian jumlah siswa berdasarkan tanggal mereka mendaftar.

Buka About.aspx, dan dalam tampilan Sumber , ganti konten BodyContent kontrol yang ada dengan "Statistik Badan Siswa" di antara h2 tag:

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <h2>Student Body Statistics</h2>
</asp:Content>

Setelah judul, tambahkan EntityDataSource kontrol dan beri StudentStatisticsEntityDataSourcenama . Sambungkan ke SchoolEntities, pilih People kumpulan entitas, dan biarkan kotak Pilih di wizard tidak berubah. Atur properti berikut ini di jendela Properti :

  • Untuk memfilter siswa saja, atur properti ke Whereit.EnrollmentDate is not null.
  • Untuk mengelompokkan hasil menurut tanggal pendaftaran, atur properti ke GroupByit.EnrollmentDate.
  • Untuk memilih tanggal pendaftaran dan jumlah siswa, atur properti ke Selectit.EnrollmentDate, Count(it.EnrollmentDate) AS NumberOfStudents.
  • Untuk memesan hasil berdasarkan tanggal pendaftaran, atur properti ke OrderByit.EnrollmentDate.

Dalam tampilan Sumber , ganti ConnectionString properti dan DefaultContainer nama dengan ContextTypeName properti . EntityDataSource Markup kontrol sekarang menyerupai contoh berikut.

<asp:EntityDataSource ID="StudentStatisticsEntityDataSource" runat="server" 
        ContextTypeName="ContosoUniversity.DAL.SchoolEntities" EnableFlattening="False" 
        EntitySetName="People"
        Select="it.EnrollmentDate, Count(it.EnrollmentDate) AS NumberOfStudents" 
        OrderBy="it.EnrollmentDate" GroupBy="it.EnrollmentDate"
        Where="it.EnrollmentDate is not null" >
    </asp:EntityDataSource>

Sintaks properti Select, GroupBy, dan Where menyerubungi Transact-SQL kecuali untuk it kata kunci yang menentukan entitas saat ini.

Tambahkan markup berikut untuk membuat GridView kontrol untuk menampilkan data.

<asp:GridView ID="StudentStatisticsGridView" runat="server" AutoGenerateColumns="False" 
        DataSourceID="StudentStatisticsEntityDataSource">
        <Columns>
            <asp:BoundField DataField="EnrollmentDate" DataFormatString="{0:d}" 
                HeaderText="Date of Enrollment" 
                ReadOnly="True" SortExpression="EnrollmentDate" />
            <asp:BoundField DataField="NumberOfStudents" HeaderText="Students" 
                ReadOnly="True" SortExpression="NumberOfStudents" />
        </Columns>
    </asp:GridView>

Jalankan halaman untuk melihat daftar yang memperlihatkan jumlah siswa menurut tanggal pendaftaran.

Cuplikan layar jendela Internet Explorer, yang memperlihatkan tampilan Statistik Badan Siswa dengan tabel tanggal pendaftaran.

Menggunakan Kontrol QueryExtender untuk Pemfilteran dan Pengurutan

Kontrol QueryExtender menyediakan cara untuk menentukan pemfilteran dan pengurutan dalam markup. Sintaksnya tidak bergantung pada sistem manajemen database (DBMS) yang Anda gunakan. Ini juga umumnya independen dari Kerangka Kerja Entitas, dengan pengecualian bahwa sintaks yang Anda gunakan untuk properti navigasi unik untuk Kerangka Kerja Entitas.

Di bagian tutorial ini Anda akan menggunakan QueryExtender kontrol untuk memfilter dan memesan data, dan salah satu bidang order-by akan menjadi properti navigasi.

(Jika Anda lebih suka menggunakan kode alih-alih markup untuk memperluas kueri yang secara otomatis dihasilkan oleh EntityDataSource kontrol, Anda dapat melakukannya dengan menangani QueryCreated peristiwa. Ini adalah cara QueryExtender kontrol memperluas EntityDataSource kueri kontrol juga.)

Buka halaman Courses.aspx , dan di bawah markup yang Anda tambahkan sebelumnya, sisipkan markup berikut untuk membuat judul, kotak teks untuk memasukkan string pencarian, tombol pencarian, dan EntityDataSource kontrol yang terikat ke Courses kumpulan entitas.

<h2>Courses by Name</h2>
    Enter a course name 
    <asp:TextBox ID="SearchTextBox" runat="server"></asp:TextBox>
     <asp:Button ID="SearchButton" runat="server" Text="Search" />
    <br /><br />
    <asp:EntityDataSource ID="SearchEntityDataSource" runat="server" 
        ContextTypeName="ContosoUniversity.DAL.SchoolEntities" EnableFlattening="False" 
        EntitySetName="Courses"  
        Include="Department" >
    </asp:EntityDataSource>

Perhatikan bahwa EntityDataSource properti kontrol Include diatur ke Department. Dalam database, Course tabel tidak berisi nama departemen; tabel berisi DepartmentID kolom kunci asing. Jika Anda mengkueri database secara langsung, untuk mendapatkan nama departemen bersama dengan data kursus, Anda harus bergabung dengan Course tabel dan Department . Dengan mengatur Include properti ke Department, Anda menentukan bahwa Kerangka Kerja Entitas harus melakukan pekerjaan mendapatkan entitas terkait Department saat mendapatkan Course entitas. Entitas Department kemudian disimpan di Department properti Course navigasi entitas. (Secara default, SchoolEntities kelas yang dihasilkan oleh perancang model data mengambil data terkait saat diperlukan, dan Anda telah mengikat kontrol sumber data ke kelas tersebut Include , sehingga pengaturan properti tidak diperlukan. Namun, mengaturnya meningkatkan performa halaman, karena jika tidak, Kerangka Kerja Entitas akan melakukan panggilan terpisah ke database untuk mengambil data untuk Course entitas dan untuk entitas terkait Department .)

Setelah kontrol yang EntityDataSource baru saja Anda buat, sisipkan markup berikut untuk membuat QueryExtender kontrol yang terikat ke EntityDataSource kontrol tersebut.

<asp:QueryExtender ID="SearchQueryExtender" runat="server" 
        TargetControlID="SearchEntityDataSource" >
        <asp:SearchExpression SearchType="StartsWith" DataFields="Title">
            <asp:ControlParameter ControlID="SearchTextBox" />
        </asp:SearchExpression>
        <asp:OrderByExpression DataField="Department.Name" Direction="Ascending">
            <asp:ThenBy DataField="Title" Direction="Ascending" />            
        </asp:OrderByExpression>
    </asp:QueryExtender>

Elemen SearchExpression menentukan bahwa Anda ingin memilih kursus yang judulnya cocok dengan nilai yang dimasukkan dalam kotak teks. Hanya karakter sebanyak yang dimasukkan dalam kotak teks yang akan dibandingkan, karena SearchType properti menentukan StartsWith.

Elemen OrderByExpression menentukan bahwa tataan hasil akan diurutkan berdasarkan judul kursus dalam nama departemen. Perhatikan bagaimana nama departemen ditentukan: Department.Name. Karena hubungan antara Course entitas dan Department entitas bersifat satu-ke-satu, Department properti navigasi berisi Department entitas. (Jika ini adalah hubungan satu-ke-banyak, properti akan berisi koleksi.) Untuk mendapatkan nama departemen, Anda harus menentukan Name properti Department entitas.

Terakhir, tambahkan GridView kontrol untuk menampilkan daftar kursus:

<asp:GridView ID="SearchGridView" runat="server" AutoGenerateColumns="False" 
        DataKeyNames="CourseID" DataSourceID="SearchEntityDataSource"  AllowPaging="true">
        <Columns>
            <asp:TemplateField HeaderText="Department">
                <ItemTemplate>
                    <asp:Label ID="Label2" runat="server" Text='<%# Eval("Department.Name") %>'></asp:Label>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:BoundField DataField="CourseID" HeaderText="ID"/>
            <asp:BoundField DataField="Title" HeaderText="Title" />
            <asp:BoundField DataField="Credits" HeaderText="Credits" />
        </Columns>
    </asp:GridView>

Kolom pertama adalah bidang templat yang menampilkan nama departemen. Ekspresi pengikatan data menentukan Department.Name, sama seperti yang Anda lihat dalam QueryExtender kontrol.

Jalankan halaman. Tampilan awal menunjukkan daftar semua kursus dalam urutan berdasarkan departemen dan kemudian berdasarkan judul kursus.

Cuplikan layar jendela Internet Explorer, yang memperlihatkan Kursus menurut Departemen dan Kursus menurut tampilan Nama.

Masukkan "m" dan klik Cari untuk melihat semua kursus yang judulnya dimulai dengan "m" (pencarian tidak peka huruf besar/kecil).

Gambar12

Menggunakan Operator "Suka" untuk Memfilter Data

Anda dapat mencapai efek yang mirip QueryExtender dengan jenis kontrol StartsWith, , Containsdan EndsWith pencarian dengan menggunakan Like operator di EntityDataSource properti kontrol Where . Di bagian tutorial ini, Anda akan melihat cara menggunakan Like operator untuk mencari siswa berdasarkan nama.

Buka Students.aspx dalam tampilan Sumber . GridView Setelah kontrol, tambahkan markup berikut:

<h2>Find Students by Name</h2>
    Enter any part of the name
    <asp:TextBox ID="SearchTextBox" runat="server" AutoPostBack="true"></asp:TextBox>
     <asp:Button ID="SearchButton" runat="server" Text="Search" />
    <br />
    <br />
    <asp:EntityDataSource ID="SearchEntityDataSource" runat="server" 
        ContextTypeName="ContosoUniversity.DAL.SchoolEntities" EnableFlattening="False" 
        EntitySetName="People"
        Where="it.EnrollmentDate is not null and (it.FirstMidName Like '%' + @StudentName + '%' or it.LastName Like '%' + @StudentName + '%')" >
        <WhereParameters>
            <asp:ControlParameter ControlID="SearchTextBox" Name="StudentName" PropertyName="Text" 
             Type="String" DefaultValue="%"/>
        </WhereParameters>
    </asp:EntityDataSource>
    <asp:GridView ID="SearchGridView" runat="server" AutoGenerateColumns="False" DataKeyNames="PersonID"
        DataSourceID="SearchEntityDataSource" AllowPaging="true">
        <Columns>
            <asp:TemplateField HeaderText="Name" SortExpression="LastName, FirstMidName">
                <ItemTemplate>
                    <asp:Label ID="LastNameFoundLabel" runat="server" Text='<%# Eval("LastName") %>'></asp:Label>, 
                    <asp:Label ID="FirstNameFoundLabel" runat="server" Text='<%# Eval("FirstMidName") %>'></asp:Label>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Enrollment Date" SortExpression="EnrollmentDate">
                <ItemTemplate>
                    <asp:Label ID="EnrollmentDateFoundLabel" runat="server" Text='<%# Eval("EnrollmentDate", "{0:d}") %>'></asp:Label>
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>

Markup ini mirip dengan apa yang telah Anda lihat sebelumnya kecuali untuk Where nilai properti. Bagian kedua dari Where ekspresi menentukan pencarian substring (LIKE %FirstMidName% or LIKE %LastName%) yang mencari nama depan dan belakang untuk apa pun yang dimasukkan dalam kotak teks.

Jalankan halaman. Awalnya Anda melihat semua siswa karena nilai default untuk StudentName parameter adalah "%".

Gambar13

Masukkan huruf "g" di kotak teks dan klik Cari. Anda melihat daftar siswa yang memiliki "g" baik di nama depan atau belakang.

Cuplikan layar jendela Internet Explorer, yang memperlihatkan tampilan Temukan Siswa menurut Nama dengan huruf g yang dimasukkan ke dalam kueri pencarian.

Sekarang Anda telah menampilkan, memperbarui, memfilter, mengurutkan, dan mengelompokkan data dari tabel individual. Dalam tutorial berikutnya Anda akan mulai bekerja dengan data terkait (skenario detail master).

SebelumnyaBerikutnya