Mengambil dan menampilkan data dengan pengikatan model dan formulir web

Artikel
07/13/2023

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.

Pola pengikatan model berfungsi dengan teknologi akses data apa pun. Dalam tutorial ini, Anda akan menggunakan Kerangka Kerja Entitas, 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 hingga 10 situs web di
akun uji coba Azure gratis. Untuk informasi tentang cara menyebarkan proyek web Visual Studio ke Azure App Service Web Apps, lihat ASP.NET Web Deployment menggunakan seri Visual Studio. Tutorial itu juga menunjukkan cara menggunakan Migrasi Pertama Kode Kerangka Kerja Entitas untuk menyebarkan database SQL Server Anda ke database Azure SQL.

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

Dialam 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 Aplikasi Web ASP.NET (.NET Framework) yang disebut ContosoUniversityModelBinding.
PilihOK. 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 menjadi 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 situs yang sesuai.

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.
PilihOK.

Menambahkan 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 SchoolContextkelas , , StudentEnrollment, 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.

Student Di kelas , perhatikan atribut yang diterapkan ke FirstNameproperti , 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 Migrasi Pertama Kode untuk membuat objek dan tabel database. Tabel ini menyimpan informasi tentang siswa dan kursus mereka.

Pilih Alat>NuGet Package Manager>Packet Manager Console.
Di Konsol Pengelola Paket, 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 using pernyataan untuk ContosoUniversityModelBinding. Models namespace.

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 perintah add-migration inisial.
Jalankan perintah update-database.

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

Menambahkan kontrol GridView

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

Buka Students.aspx.

Temukan tempat penampung MainContent . 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>

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 yang Student 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 terdaftar setiap siswa.

Simpan Students.aspx.

Menambahkan kode untuk mengambil data

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

Buka Students.aspx.cs.
Tambahkan using pernyataan untuk ContosoUniversityModelBinding. Models namespace layanan dan System.Data.Entity .
```
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 klausul , data diambil menggunakan pemuatan malas, yang melibatkan pengiriman kueri terpisah ke database setiap kali data terkait diambil. Include Dengan klausul , data diambil menggunakan pemuatan yang bersemangat, yang berarti kueri database tunggal mengambil semua data terkait. Jika data terkait tidak digunakan, pemuatan yang bersemangat 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, lihat bagian Pemuatan Malas, Bersemangat, dan Eksplisit Data Terkait di bagian Membaca Data Terkait dengan Kerangka Kerja Entitas dalam artikel Aplikasi MVC ASP.NET .

Secara default, data diurutkan berdasarkan nilai properti yang ditandai sebagai kunci. Anda dapat menambahkan klausul OrderBy 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.

Menjalankan aplikasi

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

Bagikan melalui