연습: DetailsView 웹 서버 컨트롤을 사용하여 웹 페이지에서 데이터 편집 및 삽입

업데이트: 2007년 11월

Microsoft Visual Web Developer에서는 몇 줄의 코드만 사용하여 레코드를 업데이트하고 데이터베이스에 새 레코드를 삽입하기 위한 데이터 입력 폼을 만들 수 있습니다. 편집 가능한 형식으로 레코드를 표시하는 DetailsView 및 GridView 컨트롤과 데이터 액세스를 캡슐화하는 데이터 소스 컨트롤 조합을 사용하면 코드를 전혀 사용하지 않고도 기존 레코드를 편집하거나 새 레코드를 삽입할 수 있는 데이터 입력 페이지를 만들 수 있습니다.

이 연습을 통해 다음 작업을 수행하는 방법을 배웁니다.

• 데이터 입력 페이지를 만듭니다.

• 데이터베이스를 업데이트하고 데이터를 삽입하는 데 필요한 정보로 데이터 소스 컨트롤을 구성합니다.

• DetailsView 컨트롤을 사용하여 개별 레코드를 보고 변경하고 새 레코드를 삽입합니다.

• GridView 컨트롤을 사용하여 데이터 입력 페이지에서 데이터베이스를 수정할 수 있도록 합니다.

사전 요구 사항

이 연습을 따라 하려면 다음과 같은 요건을 갖추어야 합니다.

• Visual Web Developer

• MDAC(Microsoft Data Access Components) 버전 2.7 이상

  Microsoft Windows XP나 Windows Server 2003 운영 체제를 사용하는 경우 MDAC 2.7이 이미 설치되어 있습니다. 그러나 Microsoft Windows 2000 Server 운영 체제를 사용하는 경우 컴퓨터에 이미 설치된 MDAC를 업그레이드해야 할 수도 있습니다. 최신 MDAC 버전을 다운로드하려면 Data Access and Storage Developer Center를 참조하십시오.

• SQL Server Northwind 데이터베이스에 대한 액세스 권한 SQL Server 샘플 Northwind 데이터베이스를 다운로드 및 설치하는 방법에 대한 자세한 내용은 Microsoft SQL Server 웹 사이트의 예제 데이터베이스 설치를 참조하십시오.

  참고:
  SQL Server가 실행되는 컴퓨터에 로그온하는 방법에 대한 자세한 내용은 서버 관리자에게 문의하십시오.

• 샘플 Northwind 데이터베이스에서 데이터를 수정하기 위한 권한

웹 사이트 및 페이지 만들기

다음 단계에 따라 새 웹 사이트와 페이지를 만듭니다.

새 파일 시스템 웹 사이트를 만들려면

1. Visual Web Developer를 엽니다.

2. 파일 메뉴에서 새로 만들기를 클릭한 다음 웹 사이트를 클릭합니다. Visual Web Developer Express를 사용하는 경우 파일 메뉴에서 새웹 사이트를 클릭합니다.

   새 웹 사이트 대화 상자가 나타납니다.

3. Visual Studio에 설치되어 있는 템플릿에서 ASP.NET 웹 사이트를 클릭합니다.

4. 위치 상자에서 파일 시스템을 선택하고 웹 사이트의 페이지를 보관할 폴더의 이름을 입력합니다.

   예를 들어, 폴더 이름 C:\WebSites\EditData를 입력합니다.

5. 언어 목록에서 작업할 프로그래밍 언어를 클릭합니다.

   선택하는 프로그래밍 언어는 웹 사이트의 기본 언어가 되지만 페이지마다 개별적으로 프로그래밍 언어를 설정할 수 있습니다.

6. 확인을 클릭합니다.

   Visual Web Developer에서는 폴더와 Default.aspx라는 새 페이지를 만듭니다.

SQL Server에 연결

다음 단계는 SQL Server 데이터베이스에 대한 연결을 설정하는 것입니다.

SQL Server 데이터베이스에 대한 연결을 만들려면

1. 서버 탐색기에서 데이터 연결을 마우스 오른쪽 단추로 클릭하고 연결 추가를 클릭합니다. Visual Web Developer Express를 사용하는 경우 데이터베이스 탐색기를 사용합니다.

   연결 추가 대화 상자가 나타납니다.

   • 데이터 소스 목록에 **Microsoft SQL Server (SqlClient)**가 표시되지 않으면 변경을 클릭하고 데이터 소스 변경 대화 상자에서 Microsoft SQL Server를 선택합니다.

   • 데이터 소스 선택 페이지가 나타나면 데이터 소스 목록에서 사용할 데이터 소스의 형식을 선택합니다. 이 연습에서 데이터 소스 형식은 Microsoft SQL Server입니다. 데이터 공급자 목록에서 .NET Framework Data Provider for SQL Server를 클릭하고 계속을 클릭합니다.

   참고:
   Visual Web Developer에 서버 탐색기 탭이 표시되지 않으면 보기 메뉴에서 서버 탐색기를 클릭합니다. Express Edition에 데이터베이스 탐색기 탭이 표시되지 않으면 보기 메뉴에서 데이터베이스 탐색기를 클릭합니다.

2. 연결 추가 상자의 서버 이름 상자에 서버 이름을 입력합니다.

3. 서버에 로그온 섹션에서 실행 중인 SQL Server 데이터베이스에 액세스하는 데 적합한 옵션(통합 보안 또는 특정 ID와 암호)을 선택하고 필요한 경우 사용자 이름과 암호를 입력합니다. 암호를 입력한 경우에는 암호 저장 확인란을 선택합니다.

4. 데이터베이스 이름 선택 또는 입력에서 Northwind를 입력합니다.

5. 연결 테스트를 클릭하고 제대로 작동하는지 확인한 다음 확인을 클릭합니다.

   서버 탐색기의 데이터 연결에 새 연결이 만들어졌습니다.

데이터 입력 페이지 만들기

이 단원에서는 데이터 입력 페이지를 만들고 Northwind 데이터베이스의 Employees 테이블에 저장되어 있는 직원 데이터를 볼 수 있도록 DetailsView 컨트롤을 구성합니다. 페이지에 대한 데이터 액세스를 처리하기 위해 SQL 데이터 소스 컨트롤을 구성합니다.

데이터 입력 페이지를 만들고 DetailsView 컨트롤을 구성하려면

1. 웹 사이트 메뉴에서 새 항목 추가를 클릭합니다.

   새 항목 추가 대화 상자가 나타납니다.

2. Visual Studio에 설치되어 있는템플릿에서 Web Form을 클릭한 후 이름 상자에 EditEmployees.aspx를 입력합니다.

3. 추가를 클릭합니다.

4. EditEmployees.aspx 페이지를 엽니다.

5. 디자인 뷰로 전환합니다.

6. 직원 편집을 입력하고 해당 텍스트를 선택한 후 텍스트의 서식을 제목으로 지정합니다.

7. 도구 상자의 데이터그룹에서 DetailsView 컨트롤을 페이지로 끌어 옵니다.

8. DetailsView 컨트롤을 마우스 오른쪽 단추로 클릭하고 속성을 클릭한 후 AllowPaging을 true로 설정합니다.

   이렇게 하면 표시된 개별 직원 항목을 페이징할 수 있습니다.

다음 단계는 데이터베이스 쿼리에 사용할 수 있는 데이터 소스 컨트롤을 만들고 구성하는 것입니다. 서버 탐색기나 데이터베이스 탐색기에서 페이지로 데이터 요소를 끌어 오는 등 여러 가지 방법으로 데이터 소스 컨트롤을 만들 수 있습니다. 이 연습에서는 DetailsView 컨트롤에서 데이터 소스 컨트롤을 구성합니다.

데이터 소스 컨트롤을 구성하려면

1. DetailsView 컨트롤을 마우스 오른쪽 단추로 클릭한 다음 스마트 태그 표시를 클릭합니다.

2. ODetailsView 작업 메뉴의 데이터 소스 선택 상자에서 **<새 데이터 소스>**를 클릭합니다.

   데이터 소스 구성 마법사 대화 상자가 나타납니다.

3. **데이터 소스 형식을 선택하십시오.**에서 데이터베이스를 클릭합니다.

4. 기본 이름 SqlDataSource1을 그대로 두고 확인을 클릭합니다.

   데이터 소스 구성 마법사는 데이터 연결 선택 페이지를 표시합니다.

5. "SQL Server 데이터베이스에 대한 연결을 만들려면"에서 만든 연결을 응용 프로그램이 데이터베이스에 연결하기 위해 사용해야 하는 데이터 연결 상자에 입력한 후 다음을 클릭합니다.

   마법사는 구성 파일에 연결 문자열을 저장할 수 있는 페이지를 표시합니다. 구성 파일에 연결 문자열을 저장할 경우 두 가지 장점이 있습니다.

   • 페이지에 저장하는 것보다 안전합니다.

   • 여러 페이지에서 동일한 연결 문자열을 사용할 수 있습니다.

6. 예, 이 연결을 다음으로 저장합니다. 확인란을 선택하고 다음을 클릭합니다.

   마법사는 데이터베이스에서 검색할 데이터를 지정할 수 있는 페이지를 표시합니다.

7. Select 문 구성 페이지에서 테이블 또는 뷰의 열 지정을 선택한 후 이름 상자에서 Employees를 클릭합니다.

8. 열에서 EmployeeID, LastName, FirstName 및 HireDate 확인란을 선택한 후 다음을 클릭합니다.

9. 쿼리 테스트를 클릭하여 데이터를 미리 본 후 마침을 클릭합니다.

이제 직원 레코드 표시 페이지를 테스트할 수 있습니다.

직원 레코드 표시를 테스트하려면

1. Ctrl+F5를 눌러 페이지를 실행합니다.

   첫 번째 직원 레코드가 DetailsView 컨트롤에 표시됩니다.

2. 페이지 번호 링크를 클릭하여 추가 직원 레코드를 확인합니다.

3. 브라우저를 닫습니다.

GridView 컨트롤의 편집 작업 허용

현재는 직원 레코드를 볼 수 있지만 편집할 수는 없습니다. 이 단원에서는 GridView 컨트롤을 추가한 후 개별 레코드를 편집할 수 있도록 구성합니다.

참고:
GridView 컨트롤은 레코드 목록을 제공하며 사용자가 편집할 수 있도록 허용합니다. 그러나 레코드를 삽입할 수는 없습니다. 이 연습의 뒷부분에서 새 레코드를 추가할 수 있는 DetailsView 컨트롤을 사용합니다.

편집을 지원하려면 업데이트를 수행하는 SQL 문을 사용하여 앞에서 만든 데이터 소스 컨트롤(SqlDataSource1)을 구성해야 합니다.

GridView 컨트롤을 추가하여 편집을 허용하려면

1. 도구 상자의 데이터 그룹에서 GridView 컨트롤을 페이지로 끌어 옵니다.

2. GridView 컨트롤을 마우스 오른쪽 단추로 클릭하고 스마트 태그 표시를 클릭한 후 GridView 작업 메뉴의 데이터 소스 선택 상자에서 SqlDataSource1을 클릭합니다.

3. GridView 작업 메뉴에서 데이터 소스 구성을 클릭합니다.

4. 다음을 클릭하여 마법사의 Select 문 구성 페이지로 이동합니다.

5. Select 문 구성 페이지에서 고급을 클릭하고 Insert, Update 및 Delete 문 생성 확인란을 선택한 후 확인을 클릭합니다.

   이렇게 하면 앞에서 구성한 Select 문을 기반으로 SqlDataSource1 컨트롤에 대해 Insert, Update 및 Delete 문이 생성됩니다.

   참고:
   또는 사용자 지정 SQL 문 또는 저장 프로시저 지정을 선택하고 SQL 쿼리를 입력하여 수동으로 문을 만들 수 있습니다.

6. 다음을 클릭하고 마침을 클릭합니다.

   이제 SqlDataSource 컨트롤이 추가 SQL 문으로 구성되었습니다.

   참고:
   SqlDataSource 컨트롤을 선택하고 DeleteQuery, InsertQuery 및 UpdateQuery 속성을 확인하여 마법사로 생성한 문을 검토할 수 있습니다. 또한 소스 뷰로 전환한 후 컨트롤의 태그를 검토하여 업데이트된 컨트롤 속성을 확인할 수도 있습니다.

7. GridView 작업 메뉴에서 페이징 사용 및 편집 사용 확인란을 선택합니다.

   보안 정보:
   ASP.NET 웹 페이지의 사용자 입력에는 잠재적으로 악의적인 클라이언트 스크립트가 포함될 수 있습니다. 기본적으로 ASP.NET 웹 페이지에서는 사용자 입력의 유효성을 검사하여 입력에 스크립트나 HTML 요소가 포함되지 않도록 합니다. 이러한 유효성 검사를 사용하는 이상, 사용자 입력에 있는 스크립트 또는 HTML 요소를 명시적으로 검사할 필요가 없습니다. 자세한 내용은 스크립트 악용 개요를 참조하십시오.

이제 직원 레코드 편집 작업을 테스트할 수 있습니다.

GridView 컨트롤에서 편집 작업을 테스트하려면

1. Ctrl+F5를 눌러 페이지를 실행합니다.

   GridView 컨트롤의 텍스트 상자에 데이터가 표시됩니다.

2. GridView 컨트롤의 행을 하나 선택하고 편집을 클릭합니다.

3. 레코드를 변경한 후 업데이트를 클릭합니다.

   이제 GridView 컨트롤과 DetailsView 컨트롤에 모두 업데이트된 데이터가 표시됩니다.

4. 브라우저를 닫습니다.

DetailsView 컨트롤을 사용하여 편집, 삭제 및 삽입 허용

GridView 컨트롤을 사용하여 레코드를 편집할 수 있지만 데이터를 삽입할 수는 없습니다. 이 단원에서는 레코드를 개별적으로 확인하고 삭제, 삽입 및 업데이트할 수 있도록 DetailsView 컨트롤을 수정합니다.

DetailsView 컨트롤을 사용하여 삭제, 삽입 및 업데이트를 허용하려면

1. DetailsView 컨트롤을 마우스 오른쪽 단추로 클릭한 다음 스마트 태그 표시를 클릭합니다.

2. DetailsView 작업 메뉴에서 삽입 사용, 편집 사용 및 삭제 사용 확인란을 선택합니다.

   이 연습의 앞부분에서 DetailsView 컨트롤을 사용할 때는 편집, 삽입 및 삭제 작업을 허용하는 옵션을 사용할 수 없었습니다. 그 이유는 DetailsView 컨트롤이 바인딩된 SqlDataSource1 컨트롤에 필요한 SQL 문이 없었기 때문입니다. 이제 Update 문을 포함하도록 데이터 소스 컨트롤을 구성했으므로 DetailsView 컨트롤에 대해 업데이트 옵션을 사용할 수 있습니다.

이제 DetailsView 컨트롤의 삭제, 삽입 및 업데이트 작업을 테스트할 수 있습니다.

DetailsView 컨트롤의 업데이트, 삽입 및 삭제 작업을 테스트하려면

1. Ctrl+F5를 눌러 페이지를 실행합니다.

   DetailsView 컨트롤에 직원 레코드가 표시됩니다.

2. DetailsView 컨트롤에서 편집을 클릭합니다.

   이제 DetailsView 컨트롤의 텍스트 상자에 데이터가 표시됩니다.

3. 레코드를 변경한 후 업데이트를 클릭합니다.

   업데이트된 레코드가 컨트롤에 표시됩니다.

4. DetailsView 컨트롤에서 새로 만들기를 클릭합니다.

   이제 컨트롤은 각 열에 대해 빈 텍스트 상자를 표시합니다.

5. 각 열의 값을 입력합니다.

   Employees 테이블에는 자동 증가 키 열이 있으므로 레코드를 저장할 때 EmployeeID 값이 자동으로 할당됩니다.

6. 작업이 끝나면 삽입을 클릭합니다.

   새 레코드가 마지막 레코드로 추가됩니다.

   참고:
   이 연습에서 Employees 테이블에 새 레코드를 삽입해도 오류는 발생하지 않습니다. 하지만 프로덕션 데이터로 작업할 경우에는 테이블에 DetailsView 컨트롤 구성 시 사용자가 알고 있어야만 하는 외래 키 제약 조건과 같은 제약 조건이 있을 수 있습니다.

7. DetailsView 컨트롤의 페이징 기능을 사용하여 마지막 레코드로 이동한 후에 삭제를 클릭합니다.

   새 레코드가 제거됩니다.

   참고:
   데이터를 삽입하는 경우처럼 삭제를 허용하도록 DetailsView 컨트롤을 구성할 때는 데이터 행에 적용되는 제약 조건을 항상 잘 알고 있어야 합니다.

다음 단계

이 연습에서는 데이터 레코드를 수정할 수 있는 웹 페이지를 만드는 기본 방법에 대해 설명했습니다. ASP.NET 웹 페이지의 추가 데이터 기능을 확인할 수 있습니다. 예를 들어, 다음과 같은 작업을 할 수 있습니다.

• 관련 테이블의 레코드로 작업합니다. 자세한 내용은 연습: Visual Studio에서 마스터/세부 사항 웹 페이지 만들기를 참조하십시오.

• 데이터 액세스를 위해 중간 계층 구성 요소를 사용합니다. 자세한 내용은 연습: 사용자 지정 비즈니스 개체에 데이터 바인딩을 참조하십시오.

• 다른 방법을 사용하여 웹 페이지에서 데이터 액세스를 구성합니다. 자세한 내용은 연습: 웹 페이지의 기본 데이터 액세스를 참조하십시오.

참고 항목

작업

연습: Access 데이터베이스 데이터를 표시할 웹 페이지 만들기

개념

데이터 소스 컨트롤 개요

데이터 소스 컨트롤을 사용하여 데이터에 바인딩