모델 바인딩 및 웹 양식을 사용하여 데이터 업데이트, 삭제 및 만들기

Tom FitzMacken

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

이 자습서에서는 모델 바인딩을 사용하여 데이터를 만들고, 업데이트하고, 삭제하는 방법을 보여줍니다. 다음 속성을 설정합니다.

• DeleteMethod
• InsertMethod
• Updatemethod

이러한 속성은 해당 작업을 처리하는 메서드의 이름을 받습니다. 해당 메서드 내에서 데이터와 상호 작용하기 위한 논리를 제공합니다.

이 자습서는 시리즈의 첫 번째 부분에서 만든 프로젝트를 기반으로 합니다.

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

빌드할 내용

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

1. 동적 데이터 템플릿 추가
2. 모델 바인딩 방법을 통해 데이터 업데이트 및 삭제 사용
3. 데이터 유효성 검사 규칙 적용 - 데이터베이스에서 새 레코드 만들기 사용

동적 데이터 템플릿 추가

최상의 사용자 환경을 제공하고 코드 반복을 최소화하기 위해 동적 데이터 템플릿을 사용합니다. NuGet 패키지를 설치하여 미리 빌드된 동적 데이터 템플릿을 기존 사이트에 쉽게 통합할 수 있습니다.

NuGet 패키지 관리에서 DynamicDataTemplatesCS를 설치합니다.

이제 프로젝트에 DynamicData라는 폴더가 포함됩니다. 해당 폴더에서 웹 양식의 동적 컨트롤에 자동으로 적용되는 템플릿을 찾을 수 있습니다.

업데이트 및 삭제 사용

사용자가 데이터베이스에서 레코드를 업데이트하고 삭제할 수 있도록 하는 것은 데이터를 검색하는 프로세스와 매우 유사합니다. UpdateMethod 및 DeleteMethod 속성에서 해당 작업을 수행하는 메서드의 이름을 지정합니다. GridView 컨트롤을 사용하면 편집 및 삭제 단추의 자동 생성을 지정할 수도 있습니다. 다음 강조 표시된 코드는 GridView 코드에 추가된 내용을 보여 줍니다.

<asp:GridView runat="server" ID="studentsGrid"
    ItemType="ContosoUniversityModelBinding.Models.Student" DataKeyNames="StudentID"
    SelectMethod="studentsGrid_GetData"
    UpdateMethod="studentsGrid_UpdateItem" DeleteMethod="studentsGrid_DeleteItem"
    AutoGenerateEditButton="true" AutoGenerateDeleteButton="true"  
    AutoGenerateColumns="false">

코드 숨김 파일에서 System.Data.Entity.Infrastructure에 대한 using 문을 추가합니다.

using System.Data.Entity.Infrastructure;

그런 다음, 다음 업데이트 및 삭제 메서드를 추가합니다.

public void studentsGrid_UpdateItem(int studentID)
{
    using (SchoolContext db = new SchoolContext())
    {
        Student item = null;
        item = db.Students.Find(studentID);
        if (item == null)
        {
            ModelState.AddModelError("", 
              String.Format("Item with id {0} was not found", studentID));
            return;
        }
              
        TryUpdateModel(item);
        if (ModelState.IsValid)
        {
            db.SaveChanges();
        }
    }
}

public void studentsGrid_DeleteItem(int studentID)
{
    using (SchoolContext db = new SchoolContext())
    {
        var item = new Student { StudentID = studentID };
        db.Entry(item).State = EntityState.Deleted;
        try
        {
            db.SaveChanges();
        }
        catch (DbUpdateConcurrencyException)
        {
            ModelState.AddModelError("", 
              String.Format("Item with id {0} no longer exists in the database.", studentID));
        }
    }
}

TryUpdateModel 메서드는 웹 양식의 일치하는 데이터 바인딩된 값을 데이터 항목에 적용합니다. 데이터 항목은 id 매개 변수의 값을 기반으로 검색됩니다.

유효성 검사 요구 사항 적용

Student 클래스의 FirstName, LastName 및 Year 속성에 적용한 유효성 검사 특성은 데이터를 업데이트할 때 자동으로 적용됩니다. DynamicField 컨트롤은 유효성 검사 특성에 따라 클라이언트 및 서버 유효성 검사기를 추가합니다. FirstName 및 LastName 속성은 모두 필요합니다. FirstName의 길이는 20자를 초과할 수 없으며 LastName은 40자를 초과할 수 없습니다. Year는 AcademicYear 열거형에 유효한 값이어야 합니다.

사용자가 유효성 검사 요구 사항 중 하나를 위반하는 경우 업데이트가 진행되지 않습니다. 오류 메시지를 보려면 GridView 위에 ValidationSummary 컨트롤을 추가합니다. 모델 바인딩의 유효성 검사 오류를 표시하려면 ShowModelStateErrors 속성을 true로 설정합니다.

<asp:ValidationSummary ShowModelStateErrors="true" runat="server" />

웹 애플리케이션을 실행하고 레코드를 업데이트 및 삭제합니다.

편집 모드에서 Year 속성의 값은 드롭다운 목록으로 자동으로 렌더링됩니다. Year 속성은 열거형 값이며 열거형 값에 대한 동적 데이터 템플릿은 편집할 드롭다운 목록을 지정합니다. DynamicData/FieldTemplates 폴더에서 Enumeration_Edit.ascx 파일을 열어 해당 템플릿을 찾을 수 있습니다.

유효한 값을 제공하면 업데이트가 성공적으로 완료됩니다. 유효성 검사 요구 사항 중 하나를 위반하는 경우 업데이트가 진행되지 않고 표 위에 오류 메시지가 표시됩니다.

새 레코드 추가

GridView 컨트롤에는 InsertMethod 속성이 포함되어 있지 않으므로 모델 바인딩을 사용하여 새 레코드를 추가하는 데 사용할 수 없습니다. InsertMethod 속성은 FormView, DetailsView 또는 ListView 컨트롤에서 찾을 수 있습니다. 이 자습서에서는 FormView 컨트롤을 사용하여 새 레코드를 추가합니다.

먼저 새 레코드를 추가하기 위해 만들 새 페이지에 대한 링크를 추가합니다. ValidationSummary 위에 다음을 추가합니다.

<asp:HyperLink NavigateUrl="~/AddStudent" Text="Add New Student" runat="server" />

새 링크가 학생 페이지의 콘텐츠 맨 위에 표시됩니다.

그런 다음, master 페이지를 사용하여 새 웹 양식을 추가하고 이름을 AddStudent로 지정합니다. master 페이지로 Site.Master를 선택합니다.

DynamicEntity 컨트롤을 사용하여 새 학생을 추가하기 위한 필드를 렌더링합니다. DynamicEntity 컨트롤은 ItemType 속성에 지정된 클래스에서 편집 가능한 속성을 렌더링합니다. StudentID 속성이 렌더링되지 않도록 [ScaffoldColumn(false)] 특성으로 표시되었습니다. AddStudent 페이지의 MainContent 자리 표시자에서 다음 코드를 추가합니다.

<asp:ValidationSummary runat="server" ShowModelStateErrors="true" />
<asp:FormView runat="server" ID="addStudentForm"
    ItemType="ContosoUniversityModelBinding.Models.Student" 
    InsertMethod="addStudentForm_InsertItem" DefaultMode="Insert"
    RenderOuterTable="false" OnItemInserted="addStudentForm_ItemInserted">
    <InsertItemTemplate>
        <fieldset>
            <ol>
                <asp:DynamicEntity runat="server" Mode="Insert" />
            </ol>
            <asp:Button runat="server" Text="Insert" CommandName="Insert" />
            <asp:Button runat="server" Text="Cancel" CausesValidation="false" OnClick="cancelButton_Click" />
        </fieldset>
    </InsertItemTemplate>
</asp:FormView>

코드 숨김 파일(AddStudent.aspx.cs)에서 ContosoUniversityModelBinding.Models 네임스페이스에 대한 using 문을 추가합니다.

using ContosoUniversityModelBinding.Models;

그런 다음, 다음 메서드를 추가하여 취소 단추에 대한 새 레코드 및 이벤트 처리기를 삽입하는 방법을 지정합니다.

public void addStudentForm_InsertItem()
{
    var item = new Student();
            
    TryUpdateModel(item);
    if (ModelState.IsValid)
    {
        using (SchoolContext db = new SchoolContext())
        {
            db.Students.Add(item);
            db.SaveChanges();
        }
    }
}

protected void cancelButton_Click(object sender, EventArgs e)
{
    Response.Redirect("~/Students");
}

protected void addStudentForm_ItemInserted(object sender, FormViewInsertedEventArgs e)
{
    Response.Redirect("~/Students");
}

모든 변경 내용을 저장합니다.

웹 애플리케이션을 실행하고 새 학생을 만듭니다.

삽입을 클릭하고 새 학생이 만들어졌는지 확인합니다.

결론

이 자습서에서는 데이터 업데이트, 삭제 및 만들기를 사용하도록 설정했습니다. 데이터와 상호 작용할 때 유효성 검사 규칙이 적용되는지 확인했습니다.

이 시리즈의 다음 자습서 에서는 데이터 정렬, 페이징 및 필터링을 사용하도록 설정합니다.

이전다음