모델 바인딩 및 웹 양식을 사용하여 데이터 검색 및 표시

  • 아티클

이 자습서 시리즈에서는 ASP.NET Web Forms 프로젝트에서 모델 바인딩을 사용하는 기본 측면을 보여 줍니다. 모델 바인딩을 사용하면 데이터 원본 개체(예: ObjectDataSource 또는 SqlDataSource)를 처리하는 것보다 데이터 상호 작용이 더 간단해집니다. 이 시리즈는 소개 자료로 시작하여 이후 자습서에서 고급 개념으로 이동합니다.

모델 바인딩 패턴은 모든 데이터 액세스 기술에서 작동합니다. 이 자습서에서는 Entity Framework를 사용하지만 가장 친숙한 데이터 액세스 기술을 사용할 수 있습니다. GridView, ListView, DetailsView 또는 FormView 컨트롤과 같은 데이터 바인딩된 서버 컨트롤에서 데이터를 선택, 업데이트, 삭제 및 만드는 데 사용할 메서드의 이름을 지정합니다. 이 자습서에서는 SelectMethod에 대한 값을 지정합니다.

해당 메서드 내에서 데이터를 검색하기 위한 논리를 제공합니다. 다음 자습서에서는 UpdateMethod, DeleteMethod 및 InsertMethod에 대한 값을 설정합니다.

C# 또는 Visual Basic에서 전체 프로젝트를 다운로드 할 수 있습니다. 다운로드 가능한 코드는 Visual Studio 2012 이상에서 작동합니다. 이 자습서에 표시된 Visual Studio 2017 템플릿과 약간 다른 Visual Studio 2012 템플릿을 사용합니다.

자습서에서는 Visual Studio에서 애플리케이션을 실행합니다. 호스팅 공급자에 애플리케이션을 배포하고 인터넷을 통해 사용할 수 있도록 할 수도 있습니다. Microsoft는 에서 최대 10개의 웹 사이트에 대한 무료 웹 호스팅을 제공합니다.
무료 Azure 평가판 계정. Azure App Service Web Apps Visual Studio 웹 프로젝트를 배포하는 방법에 대한 자세한 내용은 Visual Studio를 사용하여 ASP.NET 웹 배포 시리즈를 참조하세요. 이 자습서에서는 Entity Framework Code First 마이그레이션 사용하여 SQL Server 데이터베이스를 Azure SQL 데이터베이스에 배포하는 방법도 보여줍니다.

자습서에서 사용되는 소프트웨어 버전

  • Microsoft Visual Studio 2017 또는 Microsoft Visual Studio Community 2017

이 자습서는 Visual Studio 2012 및 Visual Studio 2013 작동하지만 사용자 인터페이스 및 프로젝트 템플릿에는 몇 가지 차이점이 있습니다.

빌드할 내용

이 자습서에서는 다음을 수행합니다.

  • 과정에 등록한 학생이 있는 대학을 반영하는 데이터 개체 빌드
  • 개체에서 데이터베이스 테이블 빌드
  • 테스트 데이터를 이용해 데이터베이스 작성
  • 웹 양식에 데이터 표시

프로젝트 만들기

  1. Visual Studio 2017에서 ContosoUniversityModelBinding이라는 ASP.NET 웹 애플리케이션(.NET Framework) 프로젝트를 만듭니다.

    프로젝트 만들기

  2. 확인을 선택합니다. 템플릿을 선택하는 대화 상자가 나타납니다.

    웹 양식 선택

  3. Web Forms 템플릿을 선택합니다.

  4. 필요한 경우 인증을 개별 사용자 계정으로 변경합니다.

  5. 확인을 선택하여 프로젝트를 만듭니다.

사이트 모양 수정

사이트 모양을 사용자 지정하기 위해 몇 가지 사항을 변경합니다.

  1. Site.Master 파일을 엽니다.

  2. 제목을 변경하여 내 ASP.NET 애플리케이션이 아닌 Contoso University를 표시합니다.

    <title><%: Page.Title %> - Contoso University</title>

  3. 헤더 텍스트를 애플리케이션 이름에서 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>

  4. 탐색 헤더 링크를 사이트 적절한 링크로 변경합니다.

    정보 및 연락처에 대한 링크를 제거하고 대신 만들 학생 페이지에 대한 링크를 제거합니다.

    <ul class="nav navbar-nav">
    <li><a runat="server" href="~/">Home</a></li>
    <li><a runat="server" href="~/Students">Students</a></li>
</ul>

  5. Site.Master를 저장합니다.

학생 데이터를 표시하는 웹 양식 추가

  1. 솔루션 탐색기 프로젝트를 마우스 오른쪽 단추로 클릭하고 추가를 선택한 다음 새 항목을 선택합니다.

  2. 새 항목 추가 대화 상자에서 마스터 페이지 템플릿이 있는 웹 양식을 선택하고 이름을 Students.aspx로 지정합니다.

    페이지 만들기

  3. 추가를 선택합니다.

  4. 웹 양식의 master 페이지에서 Site.Master를 선택합니다.

  5. 확인을 선택합니다.

데이터 모델 추가

Models 폴더에 UniversityModels.cs라는 클래스를 추가합니다.

  1. 모델을 마우스 오른쪽 단추로 클릭하고 추가를 선택한 다음 새 항목을 선택합니다. 새 항목 추가 대화 상자가 나타납니다.

  2. 왼쪽 탐색 메뉴에서 코드를선택한 다음 클래스를 선택합니다.

    모델 클래스 만들기

  3. 클래스 이름을 UniversityModels.cs로 지정하고 추가를 선택합니다.

    이 파일에서 , , StudentEnrollment및 Course 클래스를 다음과 같이 정의SchoolContext합니다.

    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
    }
}

    클래스는 SchoolContext 데이터베이스 연결 및 데이터 변경 내용을 관리하는 에서 DbContext파생됩니다.

    클래스에서 Student , LastName및 Year 속성에 FirstName적용되는 특성을 확인합니다. 이 자습서에서는 데이터 유효성 검사에 이러한 특성을 사용합니다. 코드를 단순화하기 위해 이러한 속성만 데이터 유효성 검사 특성으로 표시됩니다. 실제 프로젝트에서는 유효성 검사가 필요한 모든 속성에 유효성 검사 특성을 적용합니다.

  4. UniversityModels.cs를 저장합니다.

클래스에 따라 데이터베이스 설정

이 자습서에서는 Code First 마이그레이션 사용하여 개체 및 데이터베이스 테이블을 만듭니다. 이러한 표에는 학생 및 해당 과정에 대한 정보가 저장됩니다.

  1. 도구>NuGet 패키지 관리자>패키지 관리자 콘솔을 선택합니다.

  2. 패키지 관리자 콘솔에서 다음 명령을 실행합니다.
    enable-migrations -ContextTypeName ContosoUniversityModelBinding.Models.SchoolContext

    명령이 성공적으로 완료되면 마이그레이션을 사용하도록 설정되었다는 메시지가 나타납니다.

    마이그레이션 사용

    Configuration.cs라는 파일이 생성되었습니다. 클래스에는 Configuration 테스트 데이터로 Seed 데이터베이스 테이블을 미리 채울 수 있는 메서드가 있습니다.

데이터베이스 미리 채우기

  1. Configuration.cs를 엽니다.

  2. Seed 메서드에 다음 코드를 추가합니다. 또한 네임스페이 using 스에 대한 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();
        }
    }
}

  3. Configuration.cs를 저장합니다.

  4. 패키지 관리자 콘솔에서 명령 추가 마이그레이션 초기를 실행합니다.

  5. update-database 명령을 실행합니다.

    이 명령을 실행할 때 예외가 발생하면 및 값이 StudentID 메서드 값과 CourseID 다를 Seed 수 있습니다. 해당 데이터베이스 테이블을 열고 및 CourseID에 대한 StudentID 기존 값을 찾습니다. 테이블을 시드하기 위한 코드에 해당 값을 추가합니다 Enrollments .

GridView 컨트롤 추가

채워진 데이터베이스 데이터를 사용하면 이제 해당 데이터를 검색하고 표시할 준비가 되었습니다.

  1. Students.aspx를 엽니다.

  2. 자리 표시자를 MainContent 찾습니다. 해당 자리 표시자 내에서 이 코드를 포함하는 GridView 컨트롤을 추가합니다.

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

    참고 사항:

    • GridView 요소의 SelectMethod 속성에 대해 설정된 값을 확인합니다. 이 값은 다음 단계에서 만드는 GridView 데이터를 검색하는 데 사용되는 메서드를 지정합니다.

    • 속성은 ItemType 이전에 만든 클래스로 Student 설정됩니다. 이 설정을 사용하면 태그에서 클래스 속성을 참조할 수 있습니다. 예를 들어 클래스에는 Student 라는 컬렉션이 있습니다 Enrollments. 를 사용하여 Item.Enrollments 해당 컬렉션을 검색한 다음 LINQ 구문을 사용하여 각 학생의 등록된 크레딧 합계를 검색할 수 있습니다.

  3. Students.aspx를 저장합니다.

데이터를 검색하는 코드 추가

Students.aspx 코드 숨김 파일에서 값에 지정된 메서드를 추가합니다 SelectMethod .

  1. Students.aspx.cs를 엽니다.

  2. 및 System.Data.Entity 네임스페이 ContosoUniversityModelBinding. Models 스에 대한 문을 추가 using 합니다.

    using ContosoUniversityModelBinding.Models;
using System.Data.Entity;

  3. 에 대해 지정한 메서드를 추가합니다.SelectMethod

    public IQueryable<Student> studentsGrid_GetData()
{
    SchoolContext db = new SchoolContext();
    var query = db.Students.Include(s => s.Enrollments.Select(e => e.Course));
    return query;
}

    절은 Include 쿼리 성능을 향상하지만 필수는 아닙니다. 절이 Include 없으면 지연 로드를 사용하여 데이터가 검색됩니다. 여기에는 관련 데이터가 검색될 때마다 데이터베이스에 별도의 쿼리를 보내는 작업이 포함됩니다. 절을 Include 사용하면 즉시 로드를 사용하여 데이터가 검색됩니다. 즉, 단일 데이터베이스 쿼리가 모든 관련 데이터를 검색합니다. 관련 데이터를 사용하지 않으면 더 많은 데이터가 검색되므로 즉시 로드가 덜 효율적입니다. 그러나 이 경우 각 레코드에 대해 관련 데이터가 표시되므로 즉시 로드하면 최상의 성능을 얻을 수 있습니다.

    관련 데이터를 로드할 때 성능 고려 사항에 대한 자세한 내용은 ASP.NET MVC 애플리케이션에서 Entity Framework를 사용하여 관련 데이터 읽기 문서의 지연, 열망 및 명시적 관련 데이터 로드 섹션을 참조하세요.

    기본적으로 데이터는 키로 표시된 속성의 값을 기준으로 정렬됩니다. 절을 OrderBy 추가하여 다른 정렬 값을 지정할 수 있습니다. 이 예제에서는 기본 StudentID 속성이 정렬에 사용됩니다. 데이터 정렬, 페이징 및 필터링 문서에서 사용자가 정렬할 열을 선택할 수 있습니다.

  4. Students.aspx.cs를 저장합니다.

애플리케이션 실행

웹 애플리케이션(F5)을 실행하고 학생 페이지로 이동하여 다음을 표시합니다.

데이터 표시

모델 바인딩 메서드 자동 생성

이 자습서 시리즈를 통해 작업할 때 자습서에서 프로젝트로 코드를 복사하기만 하면 됩니다. 그러나 이 방법의 한 가지 단점은 모델 바인딩 메서드에 대한 코드를 자동으로 생성하기 위해 Visual Studio에서 제공하는 기능을 인식하지 못할 수 있다는 것입니다. 자체 프로젝트에서 작업할 때 자동 코드 생성은 시간을 절약하고 작업을 구현하는 방법을 이해하는 데 도움이 될 수 있습니다. 이 섹션에서는 자동 코드 생성 기능에 대해 설명합니다. 이 섹션은 정보만 제공하고 프로젝트에서 구현해야 하는 코드를 포함하지 않습니다.

태그 코드에서 SelectMethod, , UpdateMethodInsertMethod또는 DeleteMethod 속성에 대한 값을 설정할 때 새 메서드 만들기 옵션을 선택할 수 있습니다.

메서드 만들기

Visual Studio는 적절한 서명을 사용하여 코드 숨김에 메서드를 만들 뿐만 아니라 작업을 수행하기 위한 구현 코드도 생성합니다. 자동 코드 생성 기능을 사용하기 전에 속성을 처음 설정하는 ItemType 경우 생성된 코드는 작업에 해당 형식을 사용합니다. 예를 들어 속성을 설정할 UpdateMethod 때 다음 코드가 자동으로 생성됩니다.

// 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();

    }
}

다시 말하지만, 이 코드를 프로젝트에 추가할 필요가 없습니다. 다음 자습서에서는 새 데이터를 업데이트, 삭제 및 추가하는 메서드를 구현합니다.

요약

이 자습서에서는 데이터 모델 클래스를 만들고 해당 클래스에서 데이터베이스를 생성했습니다. 데이터베이스 테이블을 테스트 데이터로 채웠습니다. 모델 바인딩을 사용하여 데이터베이스에서 데이터를 검색한 다음 GridView에 데이터를 표시했습니다.

이 시리즈의 다음 자습서 에서는 데이터를 업데이트, 삭제 및 만들 수 있습니다.

다음