Mengambil dan menampilkan data dengan pengikatan model dan formulir web

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

Pola pengikatan model berfungsi dengan teknologi akses data apa pun. Dalam tutorial ini, Anda akan menggunakan Entity Framework, tetapi Anda dapat menggunakan teknologi akses data yang paling akrab bagi Anda. Dari kontrol server terikat data, seperti kontrol GridView, ListView, DetailsView, atau FormView, Anda menentukan nama metode yang akan digunakan untuk memilih, memperbarui, menghapus, dan membuat data. Dalam tutorial ini, Anda akan menentukan nilai untuk SelectMethod.

Dalam metode itu, Anda menyediakan logika untuk mengambil data. Dalam tutorial berikutnya, Anda akan mengatur nilai untuk UpdateMethod, DeleteMethod dan InsertMethod.

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

Dalam tutorial, Anda menjalankan aplikasi di Visual Studio. Anda juga dapat menyebarkan aplikasi ke penyedia hosting dan membuatnya tersedia melalui internet. Microsoft menawarkan hosting web gratis untuk maksimal 10 situs web dalam
akun uji coba Azure gratis. Untuk informasi tentang cara menyebarkan proyek web Visual Studio ke Azure App Service Web Apps, lihat ASP.NET Penyebaran Web menggunakan seri Visual Studio . Tutorial itu juga menunjukkan cara menggunakan Migrasi Pertama Kode Kerangka Kerja Entitas untuk menyebarkan database SQL Server Anda ke Azure SQL Database.

Versi perangkat lunak yang digunakan dalam tutorial

Microsoft Visual Studio 2017 atau Microsoft Visual Studio Community 2017

Tutorial ini juga berfungsi dengan Visual Studio 2012 dan Visual Studio 2013, tetapi ada beberapa perbedaan dalam antarmuka pengguna dan templat proyek.

Apa yang akan Anda bangun

Dalam tutorial ini, Anda akan:

Membangun objek data yang mencerminkan universitas dengan siswa yang terdaftar dalam kursus
Membangun tabel database dari objek
Mengisi database dengan data pengujian
Menampilkan data dalam formulir web

Membuat proyek

Di Visual Studio 2017, buat proyek ASP.NET Web Application (.NET Framework) yang disebut ContosoUniversityModelBinding.
Pilih OK. Kotak dialog untuk memilih templat muncul.
Pilih templat Formulir Web .
Jika perlu, ubah autentikasi menjadi Akun Pengguna Individual.
Pilih OK untuk membuat proyek.

Mengubah tampilan situs

Buat beberapa perubahan untuk mengkustomisasi tampilan situs.

Buka file Site.Master.
Ubah judul untuk menampilkan Contoso University dan bukan Aplikasi ASP.NET Saya.
```
<title><%: Page.Title %> - Contoso University</title>
```

Ubah teks header dari Nama aplikasi ke Contoso University.

<div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" runat="server" href="~/">Contoso University</a>
</div>

Ubah tautan header navigasi ke tautan yang sesuai dengan situs.

Hapus tautan untuk Tentang dan Kontak dan, sebagai gantinya, tautkan ke halaman Siswa , yang akan Anda buat.
```
<ul class="nav navbar-nav">
    <li><a runat="server" href="~/">Home</a></li>
    <li><a runat="server" href="~/Students">Students</a></li>
</ul>
```
Simpan Site.Master.

Menambahkan formulir web untuk menampilkan data siswa

Di Penjelajah Solusi, klik kanan proyek Anda, pilih Tambahkan lalu Item Baru.
Dalam kotak dialog Tambahkan Item Baru , pilih templat Formulir Web dengan Halaman Master dan beri nama Students.aspx.
Pilih Tambahkan.
Untuk halaman master formulir web, pilih Site.Master.
Pilih OK.

Tambahkan model data

Di folder Model , tambahkan kelas bernama UniversityModels.cs.

Klik kanan Model, pilih Tambahkan, lalu Item Baru. Kotak dialog Tambahkan Item Baru muncul.
Dari menu navigasi kiri, pilih Kode, lalu Kelas.

Beri nama kelas UniversityModels.cs dan pilih Tambahkan.

Dalam file ini, tentukan kelas SchoolContext, Student, Enrollment, dan Course sebagai berikut:

using System;
using System.Collections.Generic;
using System.Data.Entity;
using System.ComponentModel.DataAnnotations;

namespace ContosoUniversityModelBinding.Models
{
    public class SchoolContext : DbContext
    {
        public DbSet<Student> Students { get; set; }
        public DbSet<Enrollment> Enrollments { get; set; }
        public DbSet<Course> Courses { get; set; }
    }

    public class Student
    {
        [Key, Display(Name = "ID")]
        [ScaffoldColumn(false)]
        public int StudentID { get; set; }

        [Required, StringLength(40), Display(Name="Last Name")]
        public string LastName { get; set; }

        [Required, StringLength(20), Display(Name = "First Name")]
        public string FirstName { get; set; }

        [EnumDataType(typeof(AcademicYear)), Display(Name = "Academic Year")]
        public AcademicYear Year { get; set; }

        public virtual ICollection<Enrollment> Enrollments { get; set; }
    }

    public class Enrollment
    {
        [Key]
        public int EnrollmentID { get; set; }
        public int CourseID { get; set; }
        public int StudentID { get; set; }
        public decimal? Grade { get; set; }
        public virtual Course Course { get; set; }
        public virtual Student Student { get; set; }
    }

    public class Course
    {
        [Key]
        public int CourseID { get; set; }
        public string Title { get; set; }
        public int Credits { get; set; }
        public virtual ICollection<Enrollment> Enrollments { get; set; }
    } 

    public enum AcademicYear
    {
        Freshman,
        Sophomore,
        Junior,
        Senior
    }
}

Kelas SchoolContext berasal dari DbContext, yang mengelola koneksi database dan perubahan dalam data.

Di kelas Student, perhatikan atribut yang diterapkan ke properti FirstName, LastName, dan Year. Tutorial ini menggunakan atribut ini untuk validasi data. Untuk menyederhanakan kode, hanya properti ini yang ditandai dengan atribut validasi data. Dalam proyek nyata, Anda akan menerapkan atribut validasi ke semua properti yang memerlukan validasi.

Simpan UniversityModels.cs.

Menyiapkan database berdasarkan kelas

Tutorial ini menggunakan Code First Migrations untuk membuat objek dan tabel database. Tabel ini menyimpan informasi tentang siswa dan kursus mereka.

Pilih Alat>NuGet Package Manager>Packet Manager Console.
Di Package Manager Console, jalankan perintah ini:
enable-migrations -ContextTypeName ContosoUniversityModelBinding.Models.SchoolContext

Jika perintah berhasil diselesaikan, pesan yang menyatakan migrasi telah diaktifkan muncul.

Perhatikan bahwa file bernama Configuration.cs telah dibuat. Kelas Configuration memiliki Seed metode, yang dapat mengisi tabel database terlebih dahulu dengan data pengujian.

Mengisi database terlebih dahulu

Buka Configuration.cs.

Tambahkan kode berikut ke metode Seed. Selain itu, tambahkan pernyataan using untuk namespace ContosoUniversityModelBinding. Models.

namespace ContosoUniversityModelBinding.Migrations
{
    using System;
    using System.Data.Entity;
    using System.Data.Entity.Migrations;
    using System.Linq;
    using ContosoUniversityModelBinding.Models;

    internal sealed class Configuration : DbMigrationsConfiguration<SchoolContext>
    {
        public Configuration()
        {
            AutomaticMigrationsEnabled = false;
        }

        protected override void Seed(SchoolContext context)
        {

            context.Students.AddOrUpdate(
                 new Student { 
                     FirstName = "Carson", 
                     LastName = "Alexander", 
                     Year = AcademicYear.Freshman },
                 new Student { 
                     FirstName = "Meredith", 
                     LastName = "Alonso", 
                     Year = AcademicYear.Freshman },
                 new Student { 
                     FirstName = "Arturo", 
                     LastName = "Anand", 
                     Year = AcademicYear.Sophomore },
                 new Student { 
                     FirstName = "Gytis", 
                     LastName = "Barzdukas", 
                     Year = AcademicYear.Sophomore },
                 new Student { 
                     FirstName = "Yan", 
                     LastName = "Li", 
                     Year = AcademicYear.Junior },
                 new Student { 
                     FirstName = "Peggy", 
                     LastName = "Justice", 
                     Year = AcademicYear.Junior },
                 new Student { 
                     FirstName = "Laura", 
                     LastName = "Norman", 
                     Year = AcademicYear.Senior },
                 new Student { 
                     FirstName = "Nino", 
                     LastName = "Olivetto", 
                     Year = AcademicYear.Senior }
                 );

            context.SaveChanges();

            context.Courses.AddOrUpdate(
                new Course { Title = "Chemistry", Credits = 3 },
                new Course { Title = "Microeconomics", Credits = 3 },
                new Course { Title = "Macroeconomics", Credits = 3 },
                new Course { Title = "Calculus", Credits = 4 },
                new Course { Title = "Trigonometry", Credits = 4 },
                new Course { Title = "Composition", Credits = 3 },
                new Course { Title = "Literature", Credits = 4 }
                );

            context.SaveChanges();

            context.Enrollments.AddOrUpdate(
                new Enrollment { StudentID = 1, CourseID = 1, Grade = 1 },
                new Enrollment { StudentID = 1, CourseID = 2, Grade = 3 },
                new Enrollment { StudentID = 1, CourseID = 3, Grade = 1 },
                new Enrollment { StudentID = 2, CourseID = 4, Grade = 2 },
                new Enrollment { StudentID = 2, CourseID = 5, Grade = 4 },
                new Enrollment { StudentID = 2, CourseID = 6, Grade = 4 },
                new Enrollment { StudentID = 3, CourseID = 1 },
                new Enrollment { StudentID = 4, CourseID = 1 },
                new Enrollment { StudentID = 4, CourseID = 2, Grade = 4 },
                new Enrollment { StudentID = 5, CourseID = 3, Grade = 3 },
                new Enrollment { StudentID = 6, CourseID = 4 },
                new Enrollment { StudentID = 7, CourseID = 5, Grade = 2 }
                );

            context.SaveChanges();
        }
    }
}

Simpan Configuration.cs.
Di Konsol Manajer Paket, jalankan add-migration initial.
Jalankan perintah update-database.

Jika Anda menerima pengecualian saat menjalankan perintah ini, StudentID dan CourseID nilai-nilai mungkin berbeda dari nilai dari metode Seed. Buka tabel database tersebut dan temukan nilai yang sudah ada untuk StudentID dan CourseID. Tambahkan nilai-nilai tersebut ke kode untuk inisialisasi tabel Enrollments.

Menambahkan kontrol GridView

Dengan data database yang diisi, Anda sekarang siap untuk mengambil data tersebut dan menampilkannya.

Buka Students.aspx.

Temukan MainContent penanda. Dalam tempat penampung tersebut, tambahkan kontrol GridView yang menyertakan kode ini.

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
    <asp:GridView runat="server" ID="studentsGrid"
        ItemType="ContosoUniversityModelBinding.Models.Student" DataKeyNames="StudentID" 
        SelectMethod="studentsGrid_GetData"
        AutoGenerateColumns="false">
        <Columns>
            <asp:DynamicField DataField="StudentID" />
            <asp:DynamicField DataField="LastName" />
            <asp:DynamicField DataField="FirstName" />
            <asp:DynamicField DataField="Year" />          
            <asp:TemplateField HeaderText="Total Credits">
              <ItemTemplate>
                <asp:Label Text="<%# Item.Enrollments.Sum(en => en.Course.Credits) %>" 
                    runat="server" />
              </ItemTemplate>
            </asp:TemplateField>        
        </Columns>
    </asp:GridView>
</asp:Content>

Hal yang perlu diperhatikan:

Perhatikan nilai yang ditetapkan untuk SelectMethod properti di elemen GridView. Nilai ini menentukan metode yang digunakan untuk mengambil data GridView, yang Anda buat di langkah berikutnya.
Properti ItemType diatur ke kelas Student yang dibuat sebelumnya. Pengaturan ini memungkinkan Anda mereferensikan properti kelas dalam markup. Misalnya, Student kelas memiliki koleksi bernama Enrollments. Anda dapat menggunakan Item.Enrollments untuk mengambil koleksi tersebut lalu menggunakan sintaks LINQ untuk mengambil jumlah kredit yang didaftarkan setiap siswa.

Simpan Mahasiswa.aspx.

Menambahkan kode untuk mengambil data

Dalam file code-behind Students.aspx, tambahkan metode yang ditentukan untuk nilai SelectMethod.

Buka Students.aspx.cs.
Tambahkan using pernyataan untuk ContosoUniversityModelBinding. Models dan System.Data.Entity namespace.
```
using ContosoUniversityModelBinding.Models;
using System.Data.Entity;
```
Tambahkan metode yang Anda tentukan untuk SelectMethod:
```
public IQueryable<Student> studentsGrid_GetData()
{
    SchoolContext db = new SchoolContext();
    var query = db.Students.Include(s => s.Enrollments.Select(e => e.Course));
    return query;
}
```
Klausa Include meningkatkan performa kueri tetapi tidak diperlukan. Include Tanpa klausa, data diambil menggunakan pemuatan malas, yang melibatkan pengiriman kueri terpisah ke database setiap kali data terkait diambil. Dari klausa Include, data diambil menggunakan eager loading, yang berarti satu kueri basis data mengambil semua data terkait. Jika data terkait tidak digunakan, pemuatan awalan kurang efisien karena lebih banyak data diambil. Namun, dalam hal ini, pemuatan yang bersemangat memberi Anda performa terbaik karena data terkait ditampilkan untuk setiap rekaman.

Untuk informasi selengkapnya tentang pertimbangan performa saat memuat data terkait, silakan lihat bagian Pemuatan Data Terkait Secara Malas, Eager, dan Eksplisit di artikel Membaca Data Terkait dengan Kerangka Kerja Entitas dalam Aplikasi ASP.NET MVC.

Secara default, data diurutkan menurut nilai properti yang ditandai sebagai kunci. Anda dapat menambahkan OrderBy klausa untuk menentukan nilai pengurutan yang berbeda. Dalam contoh ini, properti default StudentID digunakan untuk pengurutan. Di artikel Pengurutan, Penomoran, dan Pemfilteran Data , pengguna diaktifkan untuk memilih kolom untuk pengurutan.
Simpan Students.aspx.cs.

Jalankan aplikasi Anda

Jalankan aplikasi web Anda (F5) dan navigasikan ke halaman Siswa , yang menampilkan hal berikut:

perlihatkan data

Pembuatan otomatis metode pengikatan model

Saat mengerjakan seri tutorial ini, Anda cukup menyalin kode dari tutorial ke proyek Anda. Namun, salah satu kerugian dari pendekatan ini adalah Anda mungkin tidak mengetahui fitur yang disediakan oleh Visual Studio untuk secara otomatis menghasilkan kode untuk metode pengikatan model. Saat mengerjakan proyek Anda sendiri, pembuatan kode otomatis dapat menghemat waktu Anda dan membantu Anda memahami cara menerapkan operasi. Bagian ini menjelaskan fitur pembuatan kode otomatis. Bagian ini hanya bersifat informasi dan tidak berisi kode apa pun yang perlu Anda terapkan dalam proyek Anda.

Saat mengatur nilai untuk SelectMethodproperti , UpdateMethod, InsertMethod, atau DeleteMethod dalam kode markup, Anda dapat memilih opsi Buat Metode Baru .

membuat metode

Visual Studio tidak hanya membuat metode di kode belakang dengan tanda tangan yang tepat, tetapi juga menghasilkan kode implementasi untuk melakukan operasi. Jika Anda terlebih dahulu mengatur ItemType properti sebelum menggunakan fitur pembuatan kode otomatis, kode yang dihasilkan menggunakan jenis tersebut untuk operasi. Misalnya, saat mengatur UpdateMethod properti, kode berikut secara otomatis dihasilkan:

// The id parameter name should match the DataKeyNames value set on the control
public void studentsGrid_UpdateItem(int id)
{
    ContosoUniversityModelBinding.Models.Student item = null;
    // Load the item here, e.g. item = MyDataLayer.Find(id);
    if (item == null)
    {
        // The item wasn't found
        ModelState.AddModelError("", String.Format("Item with id {0} was not found", id));
        return;
    }
    TryUpdateModel(item);
    if (ModelState.IsValid)
    {
        // Save changes here, e.g. MyDataLayer.SaveChanges();

    }
}

Sekali lagi, kode ini tidak perlu ditambahkan ke proyek Anda. Dalam tutorial berikutnya, Anda akan menerapkan metode untuk memperbarui, menghapus, dan menambahkan data baru.

Ringkasan

Dalam tutorial ini, Anda membuat kelas model data dan menghasilkan database dari kelas tersebut. Anda mengisi tabel database dengan data pengujian. Anda menggunakan pengikatan model untuk mengambil data dari database, lalu menampilkan data dalam GridView.

Dalam tutorial berikutnya dalam seri ini, Anda akan mengaktifkan pembaruan, penghapusan, dan pembuatan data.

Berikutnya

Saran dan Komentar

Apakah halaman ini membantu?

Last updated on 2026-02-21