다음을 통해 공유

연습: FormView 웹 서버 컨트롤을 사용하여 웹 페이지에 서식 지정된 데이터 표시

  • 아티클

업데이트: 2007년 11월

ASP.NET은 데이터 레코드를 표시 및 편집할 수 있는 다양한 컨트롤을 제공합니다. 이 연습에서는 한 번에 데이터 레코드를 하나씩 사용하는 FormView 컨트롤로 작업합니다. FormView 컨트롤의 주요 기능은 사용자가 직접 템플릿을 정의하여 레코드 레이아웃을 만들 수 있다는 것입니다. 템플릿을 사용하여 컨트롤 내의 데이터 레이아웃 및 모양을 완전하게 제어할 수 있습니다. 또한 FormView 컨트롤은 데이터 레코드의 편집, 삽입 및 삭제와 같은 업데이트 작업도 지원합니다. 데이터 소스에서 FormView 컨트롤에 둘 이상의 레코드를 제공할 경우 레코드를 개별적으로 페이징할 수 있습니다.

참고:

또한 데이터의 미리 정의된 레이아웃을 제공하는 DetailsView 컨트롤을 사용하여 개별 데이터 레코드를 편집할 수도 있습니다. 자세한 내용은 DetailsView 웹 서버 컨트롤 개요를 참조하십시오.

이 연습에서 수행할 작업은 다음과 같습니다.

  • 페이지를 만들어 마스터/세부 사항 정보 표시

  • FormView 컨트롤을 사용하여 데이터 레코드에 대한 자유 형식 레이아웃 만들기

  • 편집을 허용하도록 FormView 컨트롤 구성

사전 요구 사항

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

  • Microsoft Visual Web Developer

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

    참고:

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

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

    Microsoft Windows XP나 Windows Server 2003을 사용하고 있는 경우 MDAC 2.7이 이미 설치되어 있습니다. 그러나 Microsoft Windows 2000을 사용하는 경우 컴퓨터에 이미 설치된 MDAC를 업그레이드해야 할 수도 있습니다. 자세한 내용은 MSDN Library에서 "Microsoft Data Access Components (MDAC) Installation"을 참조하십시오.

웹 사이트 만들기

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

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

  1. Visual Web Developer를 엽니다.

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

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

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

  4. 위치 상자에 웹 사이트의 페이지를 보관할 폴더의 이름을 입력합니다.

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

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

  6. 확인을 클릭합니다.

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

드롭다운 목록을 마스터로 사용

이 연습 부분에서는 페이지에 드롭다운 목록을 추가한 후 제품 이름 목록으로 채웁니다. 사용자가 제품을 하나 선택하면 페이지의 FormView 컨트롤에 해당 제품에 대한 세부 정보가 표시됩니다.

드롭다운 목록을 만들고 채우려면

  1. Default.aspx 페이지로 전환하거나 이 페이지를 엽니다. 이미 만들어진 웹 사이트로 작업할 경우 이 연습에서 사용할 수 있는 페이지를 추가하거나 엽니다.

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

  3. 페이지에 제품 정보 표시를 입력합니다.

  4. 도구 상자의 표준 그룹에서 DropDownList 컨트롤을 페이지로 끌어 옵니다.

  5. DropDownList 작업 메뉴가 나타나지 않으면 DropDownList 컨트롤을 마우스 오른쪽 단추로 클릭한 다음 스마트 태그 표시를 클릭합니다.

  6. DropDownList작업 메뉴에서 AutoPostBack 사용 확인란을 선택합니다.

  7. 데이터 소스 선택을 클릭하여 데이터 소스 구성 마법사를 엽니다.

  8. 데이터 소스 선택 목록에서 **<새 데이터 소스>**를 클릭합니다.

  9. 데이터베이스를 클릭합니다.

    이렇게 하면 SQL 문을 지원하는 데이터베이스에서 데이터를 가져오게 됩니다.

    데이터 소스의 ID 지정 상자에 기본 데이터 소스 컨트롤 이름이 표시됩니다. 이 이름을 그대로 둘 수 있습니다.

  10. 확인을 클릭합니다.

    연결을 선택할 수 있는 페이지가 표시됩니다.

  11. 새 연결 단추를 클릭합니다.

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

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

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

  12. 연결 추가 대화 상자에서 다음을 수행합니다.

    1. 서버 이름 상자에 SQL Server가 실행되고 있는 컴퓨터의 이름을 입력합니다.

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

    3. 데이터베이스 이름 선택 또는 입력 단추를 선택한 다음 Northwind를 입력합니다.

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

    마법사로 돌아가며 연결 정보가 채워져서 표시됩니다.

  13. 다음을 클릭합니다.

  14. 예, 이 연결을 다음으로 저장합니다. 확인란을 선택하고 다음을 클릭합니다. 기본 연결 문자열 이름을 그대로 둘 수 있습니다.

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

  15. 테이블 또는 뷰의 열 지정을 클릭합니다.

  16. 이름 목록에서 Products를 클릭합니다.

  17. 열에서 ProductID 및 ProductName을 선택합니다.

  18. 다음을 클릭합니다.

  19. 쿼리 테스트를 클릭하여 원하는 데이터를 가져오는지 확인합니다.

  20. 마침을 클릭합니다.

    마법사로 돌아갑니다.

  21. DropDownList에 표시할 데이터 필드 선택 목록에서 ProductName을 클릭합니다.

  22. DropDownList의 값에 대한 데이터 필드 선택 목록에서 ProductID를 선택합니다.

    이렇게 하면 항목이 선택될 때 ProductID 필드가 항목의 값으로 반환되도록 지정됩니다.

  23. 확인을 클릭합니다.

계속하기 전에 드롭다운 목록을 테스트합니다.

드롭다운 목록을 테스트하려면

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

  2. 페이지가 표시되면 드롭다운 목록을 확인합니다.

  3. 제품 이름을 선택하여 포스트백이 수행되는지 확인합니다.

FormView 컨트롤 추가

이제 FormView 컨트롤을 추가하여 제품 정보를 표시합니다. FormView 컨트롤은 사용자가 페이지에 추가한 또 다른 데이터 소스 컨트롤에서 해당 데이터를 가져옵니다. 이러한 데이터 소스 컨트롤은 DropDownList 컨트롤에서 현재 선택되어 있는 항목에 대한 제품 레코드를 가져오는 매개 변수가 있는 쿼리를 포함합니다.

FormView 컨트롤을 추가하려면

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

  2. FormView 작업 메뉴가 나타나지 않으면 FormView 컨트롤을 마우스 오른쪽 단추로 클릭한 후 스마트 태그 표시를 클릭합니다.

  3. FormView 작업 메뉴의 데이터 소스 선택 목록에서 **<새 데이터 소스>**를 클릭합니다.

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

  4. 데이터베이스를 클릭합니다.

    FormView 컨트롤은 DropDownList 컨트롤의 경우와 동일한 테이블에서 데이터를 가져옵니다.

    데이터 소스의 ID 지정 상자에 기본 데이터 소스 컨트롤 이름이 표시됩니다. 이 이름을 그대로 둘 수 있습니다.

  5. 확인을 클릭합니다.

    데이터 소스 구성 마법사가 시작됩니다.

  6. 응용 프로그램이 데이터베이스에 연결하기 위해 사용해야 하는 데이터 연결 목록에서 연습 앞부분에서 만들어 저장했던 연결을 선택합니다.

  7. 다음을 클릭합니다.

    SQL 문을 만들 수 있는 페이지가 표시됩니다.

  8. 테이블 또는 뷰의 열 지정의 이름 목록에서 Products를 선택합니다.

  9. 열 상자에서 ProductID, ProductName 및 UnitPrice를 선택합니다.

  10. WHERE 단추를 클릭합니다.

    그러면 WHERE 절 추가 대화 상자가 표시됩니다.

  11. 열 목록에서 ProductID를 선택합니다.

  12. 연산자 목록에서 **=**을 선택합니다.

  13. 소스 목록에서 Control을 선택합니다.

  14. 매개 변수 속성의 컨트롤 ID 목록에서 DropDownList1을 선택합니다.

    마지막 두 단계에서는 해당 쿼리가 이전에 추가한 DropDownList 컨트롤에서 제품 ID에 대한 검색 값을 가져오도록 지정합니다.

  15. 추가를 클릭합니다.

  16. 확인을 클릭하여 WHERE 절 추가 대화 상자를 닫습니다.

  17. 고급을 클릭합니다.

    고급 SQL 생성 옵션 대화 상자가 표시됩니다.

  18. Insert, Update 및 Delete 문 생성 확인란을 선택합니다.

    이 옵션을 선택하면 마법사는 사용자가 구성한 Select 문에 따라 SQL Update 문을 만듭니다. 이 연습 뒷부분에서 FormView 컨트롤을 사용하여 레코드를 편집 및 삽입합니다. 이 작업을 위해서는 데이터 소스 컨트롤에 Update 문이 있어야 합니다.

  19. 확인을 클릭합니다.

  20. 다음을 클릭합니다.

  21. 미리 보기 페이지에서 쿼리 테스트를 클릭합니다.

    WHERE 절에 사용할 값을 묻는 대화 상자가 표시됩니다.

  22. 값 상자에 4를 입력한 다음 확인을 클릭합니다.

    제품 정보가 표시됩니다.

  23. 마침을 클릭합니다.

FormView 컨트롤에서 레이아웃 사용자 지정

FormView 컨트롤을 사용하면 표시되는 레코드의 레이아웃을 정의할 수 있습니다. 이 연습 단원에서는 템플릿을 편집하여 레코드 레이아웃을 사용자 지정합니다. 레이아웃으로 HTML 표를 사용합니다.

레이아웃의 서식을 지정하려면

  1. FormView 컨트롤을 클릭하여 선택한 다음 컨트롤 오른쪽의 크기 조정 핸들을 끌어 현재 페이지 너비만큼 컨트롤을 늘립니다.

  2. 컨트롤 아래쪽의 크기 조정 핸들을 끌어 컨트롤 높이를 약 400픽셀로 변경합니다. 높이를 정확히 맞추지 않아도 됩니다.

  3. 컨트롤을 마우스 오른쪽 단추로 클릭하고 템플릿 편집을 클릭한 다음 ItemTemplate을 클릭합니다.

    컨트롤이 항목 템플릿 편집 모드로 다시 표시됩니다. 항목 템플릿에는 페이지 실행 시 데이터 레코드를 표시하는 데 사용되는 정적 텍스트와 컨트롤이 포함되어 있습니다. 기본적으로 Visual Web Developer는 데이터 소스의 각 데이터 열에 대해 데이터 바인딩된 Label 컨트롤로 항목 템플릿을 채웁니다. 또한 Visual Web Developer는 캡션으로 사용되는 각 레이블에 대한 텍스트를 생성합니다.

    또한 템플릿은 텍스트 편집, 삭제 및 새로 만들기를 나타내는 3개의 LinkButton 컨트롤로 생성됩니다.

  4. 항목 템플릿 위쪽에 삽입 지점을 두고 Enter 키를 몇 번 눌러 공간을 만든 후 템플릿 위쪽에 제목으로 제품 정보를 입력합니다.

  5. 컨트롤 및 정적 텍스트 아래에 커서를 놓은 다음 표 메뉴에서 표 삽입을 클릭합니다.

    텍스트 및 컨트롤에 대한 컨테이너로 HTML 표를 만듭니다.

  6. 표 삽입 대화 상자에서 행과 열을 각각 4와 2로 설정합니다.

  7. 확인을 클릭하여 표 삽입 대화 상자를 닫습니다.

  8. 표의 모든 셀을 선택한 다음 표 메뉴에서 셀 서식을 선택합니다.

    셀 속성 대화 상자가 표시됩니다.

  9. 너비와 높이를 각각 35픽셀(px)과 30픽셀(px)로 설정합니다.

  10. 확인을 클릭하여 셀 속성 대화 상자를 닫습니다.

  11. ProductIdLabel 컨트롤을 오른쪽 위 셀로 끌어 옵니다.

  12. ProductNameLabel 컨트롤을 오른쪽 두 번째 셀로 끌어 옵니다.

  13. UnitPriceLabel 컨트롤을 오른쪽 세 번째 셀로 끌어 옵니다.

  14. 왼쪽 열에서 Label 컨트롤에 대한 캡션으로 정적 텍스트를 입력합니다. 예를 들어, ProductIdLabel 컨트롤 옆의 셀에 ID를 입력합니다. 원하는 캡션 텍스트를 입력할 수 있습니다.

  15. 오른쪽 열을 마우스 오른쪽 단추로 클릭하고 선택을 클릭한 다음 열을 클릭합니다.

  16. 속성 창에서 align을 right으로 설정하여 캡션 텍스트를 오른쪽에 정렬합니다.

  17. 오른쪽 열을 선택한 후 오른쪽 테두리를 끌어 긴 제품 이름도 표시될 수 있을 만큼 표를 늘립니다.

  18. Visual Web Developer에서 생성한 텍스트(예: ProductID)를 선택한 후 삭제합니다.

  19. FormView 컨트롤의 제목 표시줄을 마우스 오른쪽 단추로 클릭한 다음 템플릿 편집 끝내기를 클릭합니다.

    템플릿 편집기가 닫히고 사용자가 만든 레이아웃으로 컨트롤이 표시됩니다.

FormView 컨트롤 테스트

이제 레이아웃을 테스트할 수 있습니다.

FormView 컨트롤을 테스트하려면

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

  2. DropDownList 컨트롤에서 제품 이름을 클릭합니다.

    FormView 컨트롤에 해당 제품에 대한 세부 정보가 표시됩니다.

  3. 다른 제품을 선택하고 FormView 컨트롤에 해당 제품에 대한 정보가 표시되는지 확인합니다.

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

FormView 컨트롤에 편집 및 삽입 기능 추가

FormView 컨트롤은 개별 레코드를 표시할 수 있으며 편집, 삭제 및 삽입도 지원합니다.

이 연습 부분에서는 현재 표시된 레코드를 편집하는 기능을 추가합니다. 레코드를 편집하려면 텍스트 상자 및 기타 컨트롤을 포함하는 다른 템플릿을 정의합니다.

FormView 컨트롤에 편집 기능을 추가하려면

  1. FormView 컨트롤을 마우스 오른쪽 단추로 클릭하고 템플릿 편집을 클릭한 후 EditItemTemplate을 클릭합니다.

    템플릿 편집기가 표시되며 해당 컨트롤이 편집 모드에 있을 때 레코드의 레이아웃을 정의하는 EditItemTemplate 속성을 표시합니다. Visual Web Developer는 키가 아닌 각 데이터 열에 대해 TextBox 컨트롤로 편집 템플릿을 채우고 캡션에 해당하는 정적 텍스트를 추가합니다. 이 방법은 항목 템플릿의 생성 방식과 비슷합니다. 차이점은 편집 템플릿에서는 Visual Web Developer가 텍스트 상자를 생성한다는 것입니다.

    이전과 마찬가지로 편집 중에 변경 내용을 저장 및 삭제하는 데 사용되는 업데이트 및 취소LinkButton 컨트롤을 포함하는 템플릿이 생성됩니다.

  2. 필요에 따라 이 연습 앞부분에서 항목 템플릿으로 작업할 때처럼 레이아웃 표를 추가하고 컨트롤을 정렬합니다.

  3. FormView 컨트롤을 마우스 오른쪽 단추로 클릭하고 템플릿 편집을 클릭한 후 InsertItemTemplate을 클릭합니다.

    EditItemTemplate 속성을 지정할 때처럼 Visual Web Developer는 레이블 및 TextBox 컨트롤의 템플릿 레이아웃을 자동으로 만듭니다. 사용자가 Products 테이블에 새 레코드를 삽입하려고 하면 해당 컨트롤이 표시됩니다. 또한 삽입 및 취소LinkButton 컨트롤을 포함하는 템플릿이 생성됩니다.

  4. 필요에 따라 항목 편집 템플릿으로 작업할 때처럼 레이아웃 표를 추가하고 컨트롤을 정렬합니다.

  5. FormView 컨트롤을 마우스 오른쪽 단추로 클릭하고 템플릿 편집 끝내기를 클릭합니다.

    보안 정보:

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

편집 및 삽입 테스트

이제 편집 및 삽입 작업을 테스트할 수 있습니다.

FormView 컨트롤의 편집 기능을 테스트하려면

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

  2. DropDownList 컨트롤에서 제품을 선택합니다.

    FormView 컨트롤에 제품 정보가 표시됩니다.

  3. 편집을 클릭합니다.

    FormView 컨트롤은 편집 모드로 전환됩니다.

  4. 제품 이름이나 단가를 변경합니다.

  5. 업데이트를 클릭합니다.

    레코드가 저장되며 FormView 컨트롤은 디스플레이 모드로 전환됩니다. 화면에 변경 내용이 반영됩니다.

  6. 다른 제품을 선택합니다.

  7. 편집을 클릭합니다.

  8. 제품 이름을 변경합니다.

  9. 취소를 클릭합니다.

    변경 내용이 저장되지 않았는지 확인합니다.

FormView 컨트롤의 삽입 기능을 테스트하려면

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

    FormView 컨트롤은 삽입 모드로 전환되며 2개의 빈 텍스트 상자를 표시합니다.

  2. 새 제품 이름과 가격을 입력한 후 삽입을 클릭합니다.

    레코드는 데이터베이스에 저장되고 FormView 컨트롤은 (ItemTemplate) 뷰를 표시하도록 전환됩니다.

    참고:

    드롭다운 목록에는 새 레코드가 표시되지 않습니다. 이러한 기능은 다음 단원에서 설명합니다.

드롭다운 목록에 업데이트된 제품 이름 다시 표시

이제 페이지에서 Products 데이터베이스 테이블에 있는 레코드를 보거나 편집하거나 삭제할 수 있습니다. 그러나 해당 드롭다운 목록은 사용자가 FormView 컨트롤에서 변경한 내용과 아직 동기화되지 않았습니다. 예를 들어, 새 Products 레코드를 삽입해도 사용자가 페이지를 닫았다가 다시 열 때까지 드롭다운 목록에 새 레코드가 표시되지 않습니다. 또한 사용자의 의도와는 다르게 처음에는 페이지에 Products 테이블의 첫 번째 레코드가 표시됩니다.

이러한 사소한 문제점을 수정하기 위해 약간의 코드를 추가할 수 있습니다. 이 연습 단원에서는 다음과 같은 작업을 수행합니다.

  • 사용자가 레코드를 편집하거나 삽입할 때마다 드롭다운 목록을 업데이트합니다.

  • 페이지가 처음 나타날 때 드롭다운 목록에 텍스트 "(선택)"을 추가하고 사용자가 처음 선택을 수행하면 이 텍스트를 제거합니다.

레코드를 편집 또는 삽입할 때 드롭다운 목록을 업데이트하려면

  1. 페이지의 디자인 뷰에서 FormView 컨트롤을 선택합니다.

  2. 속성 창에서 이벤트 단추를 클릭하여 FormView 컨트롤에 대한 이벤트 목록을 표시합니다.

  3. ItemInserted 상자를 두 번 클릭합니다.

    Visual Web Developer는 코드 편집 뷰로 전환한 후 ItemInserted 이벤트에 대한 처리기를 만듭니다.

  4. 이벤트 처리기에 다음의 강조 표시된 코드를 추가합니다.

    Protected Sub FormView1_ItemInserted(ByVal sender As Object, _
   ByVal e As System.Web.UI.WebControls.FormViewInsertedEventArgs) _
   Handles FormView1.ItemInserted
      DropDownList1.DataBind()
End Sub

    [C#]

    protected void FormView1_ItemInserted(object sender, 
        FormViewInsertedEventArgs e)
{
    DropDownList1.DataBind();
}

    이 코드는 새 레코드가 삽입된 후에 실행됩니다. 또한 Products 테이블에 드롭다운 목록을 다시 바인딩하여 목록의 내용이 새로 고쳐지도록 합니다.

  5. 디자인 뷰로 전환합니다. 코드 숨김 페이지로 작업할 경우 Default.aspx 페이지로 전환한 다음 디자인 뷰로 전환합니다.

  6. 속성 창에서 이벤트 단추를 클릭하여 FormView 컨트롤에 대한 이벤트 목록을 표시합니다.

  7. ItemUpdated 상자를 두 번 클릭합니다.

    Visual Web Developer는 코드 편집 뷰로 전환한 후 ItemUpdated 이벤트에 대한 이벤트 처리기를 만듭니다.

  8. 다음의 강조 표시된 코드를 추가합니다.

    Protected Sub FormView1_ItemUpdated(ByVal sender As Object, _
   ByVal e As System.Web.UI.WebControls.FormViewUpdatedEventArgs) _
   Handles FormView1.ItemUpdated
      DropDownList1.DataBind()
End Sub

    [C#]

    protected void FormView1_ItemUpdated(object sender, 
    FormViewUpdatedEventArgs e)
{
    DropDownList1.DataBind();
}

    이 코드는 레코드가 업데이트된 후에 실행됩니다. 또한 Products 테이블에 드롭다운 목록을 다시 바인딩하여 목록의 내용이 새로 고쳐지도록 합니다.

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

  10. 레코드 하나의 제품 이름을 편집하고 업데이트를 클릭한 후 드롭다운 목록을 검토하여 업데이트된 이름이 표시되는지 확인합니다.

  11. 새 제품 레코드를 삽입하고 삽입을 클릭한 후 드롭다운 목록을 검토하여 새 이름이 목록에 추가되었는지 확인합니다.

최종 단계로 "(선택)"을 표시한 후 사용자가 항목을 선택한 경우에만 FormView 컨트롤을 표시하도록 드롭다운 목록을 변경합니다.

  1. 디자인 뷰에서 페이지의 빈 부분을 두 번 클릭합니다.

    Visual Web Developer는 해당 페이지의 Load 이벤트에 대한 이벤트 처리기를 만듭니다.

  2. 처리기에 다음의 강조 표시된 코드를 추가합니다.

    [Visual Basic]

    Protected Sub Page_Load(ByVal sender As Object, _
        ByVal e As System.EventArgs) Handles Me.Load
    If Not IsPostBack Then        FormView1.Visible = False    End If
End Sub

    [C#]

    protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        FormView1.Visible = false;
    }
}

    이 코드는 페이지가 실행될 때 실행됩니다. 이 코드는 먼저 포스트백 작업인지 테스트합니다. 그렇지 않을 경우 페이지가 처음 실행된 것입니다. 포스트백이 아닌 경우 사용자가 보거나 편집할 레코드를 명시적으로 선택한 경우에만 FormView 컨트롤을 표시하려고 하므로 이 컨트롤은 숨겨집니다.

  3. 페이지에 대한 디자인 뷰에서 DropDownList 컨트롤을 선택합니다.

  4. 속성 창에서 항목 상자의 줄임표(...)를 클릭합니다.

    ListItem 컬렉션 편집기 대화 상자가 나타납니다.

  5. 추가를 클릭하여 새 항목을 만듭니다.

  6. ListItem 속성의 텍스트 상자에 (선택)을 입력합니다.

  7. 확인을 클릭하여 ListItem 컬렉션 편집기 대화 상자를 닫습니다.

  8. 속성 상자에서 AppendDataBoundItems를 true로 설정합니다.

    데이터 바인딩 중에 드롭다운 목록이 채워지면 사용자가 정의한 (선택) 항목에 제품 정보가 추가됩니다.

  9. 속성 창에서 이벤트 단추를 클릭하여 DropDownList 컨트롤에 대한 이벤트 목록을 표시합니다.

  10. SelectedIndexChanged 상자를 두 번 클릭합니다.

  11. 다음의 강조 표시된 코드를 추가합니다.

    [Visual Basic]

    Protected Sub DropDownList1_SelectedIndexChanged(ByVal sender _
    As Object, ByVal e As System.EventArgs) _
    Handles DropDownList1.SelectedIndexChanged
        If DropDownList1.Items(0).Text = "(Select)" Then            DropDownList1.Items.RemoveAt(0)        End If        FormView1.Visible = True
End Sub

    [C#]

    protected void DropDownList1_SelectedIndexChanged(object sender, 
    EventArgs e)
{
    if(DropDownList1.Items[0].Text == "(Select)")    {        DropDownList1.Items.RemoveAt(0);    }    FormView1.Visible = true;
}

    사용자가 DropDownList 컨트롤의 항목을 선택하면 이 코드가 실행됩니다. 사용자가 처음 항목을 선택한 후에는 항목을 선택할지 묻는 메시지를 표시할 필요가 없으므로 이전에 추가한 "(선택)" 항목(항목이 있는지 먼저 확인)은 제거됩니다. 또한 사용자들이 선택한 레코드를 확인할 수 있도록 FormView 컨트롤이 표시(숨김 해제)됩니다.

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

    페이지에는 단어 **(선택)**이 표시된 드롭다운 목록만 표시됩니다.

  13. 목록에서 항목을 선택합니다.

    해당 항목이 FormView 컨트롤에 표시됩니다.

  14. 드롭다운 목록을 확인합니다. 목록에는 단어 **(선택)**이 더 이상 나타나지 않습니다.

다음 단계

이 연습에서는 FormView 컨트롤을 통해 사용자 지정 레이아웃을 사용하여 개별 데이터 레코드를 표시하고 편집하는 기본 단계를 살펴보았습니다. FormView 컨트롤을 사용하면 이 연습에서 수행했던 것보다 더 정교한 서식 지정을 수행할 수 있습니다. 또한 선택 모드 및 삽입 모드를 비롯한 기타 모드에 대한 템플릿과 레코드와 함께 표시되는 머리글 및 바닥글에 대한 템플릿을 만들 수도 있습니다. FormView를 사용할 수 있는 다른 시나리오에 대해서는 다음을 참조하십시오.

FormView 웹 서버 컨트롤의 템플릿 만들기

FormView 웹 서버 컨트롤을 사용하여 데이터 수정

참고 항목

개념

FormView 웹 서버 컨트롤 개요

참조

DetailsView 웹 서버 컨트롤 개요