연습: GridView 웹 서버 컨트롤에서 편집하는 동안 드롭다운 목록 표시
업데이트: 2007년 11월
GridView 컨트롤에는 기본적으로 편집할 텍스트 상자가 표시됩니다. ASP.NET GridView 컨트롤의 기본 제공 고급 기능을 사용하여 편집 표시에 드롭다운 목록을 추가할 수 있습니다. 이 작업은 별도의 코드를 작성하지 않고 Web Form에서 직접 수행할 수 있습니다. 이 연습에서 수행할 작업은 다음과 같습니다.
사전 요구 사항
이 연습을 따라 하려면 다음과 같은 요건을 갖추어야 합니다.
Microsoft Visual Web Developer(Visual Studio)
SQL Server Express Edition. SQL Server가 설치되어 있으면 대신 이를 사용할 수 있지만 일부 절차가 약간 달라집니다.
사용자 컴퓨터에 설치된 Northwind 샘플 데이터베이스. SQL Server 샘플 Northwind 데이터베이스를 다운로드 및 설치하는 방법에 대한 자세한 내용은 Microsoft SQL Server 웹 사이트의 예제 데이터베이스 설치를 참조하십시오.
.gif "참고")
참고:이외 다른 여러 가지 방법으로 Northwind 데이터베이스에 연결할 수 있습니다.
웹 사이트 및 페이지 만들기
다음 단계에 따라 새 웹 사이트와 페이지를 만듭니다.
파일 시스템 웹 사이트를 만들려면
Visual Web Developer를 엽니다.
파일 메뉴에서 새로 만들기를 클릭한 다음 웹 사이트를 클릭합니다. Visual Web Developer Express를 사용하는 경우 파일 메뉴에서 새웹 사이트를 클릭합니다.
새 웹 사이트 대화 상자가 나타납니다.
Visual Studio에 설치되어 있는 템플릿에서 ASP.NET 웹 사이트를 클릭합니다.
위치 상자에서 파일 시스템을 선택하고 웹 사이트의 페이지를 보관할 폴더의 이름을 입력합니다.
예를 들어, 폴더 이름 C:\WebSites\DropDownEdit를 입력합니다.
언어 목록에서 작업할 프로그래밍 언어를 클릭합니다.
확인을 클릭합니다.
Visual Web Developer에서 해당 폴더와 Default.aspx라는 새 페이지를 만듭니다.
SQL 데이터 소스에 대한 연결 만들기
시작하려면 Northwind 데이터베이스에 대한 연결을 만들어야 합니다.
SQL Server에 대한 연결을 만들려면
서버 탐색기에서 데이터 연결을 마우스 오른쪽 단추로 클릭하고 연결 추가를 클릭합니다. Visual Web Developer Express를 사용하는 경우 데이터베이스 탐색기를 사용합니다.
연결 추가 대화 상자가 나타납니다.
데이터 소스 목록에 Microsoft SQL Server 데이터베이스 파일(SqlClient)이 표시되지 않으면 변경을 클릭하고 데이터 소스 변경 대화 상자에서 Microsoft SQL Server 데이터베이스 파일(SqlClient)을 선택합니다.
데이터 소스 선택 페이지가 나타나면 데이터 소스 목록에서 사용할 데이터 소스의 형식을 선택합니다. 이 연습에서 데이터 소스 형식은 Microsoft SQL Server입니다. 데이터 공급자 목록에서 .NET Framework Data Provider for SQL Server를 클릭한 다음 계속을 클릭합니다.
참고:Visual Web Developer에 서버 탐색기 탭이 표시되지 않으면 보기 메뉴에서 서버 탐색기를 클릭합니다. 데이터베이스 탐색기 탭이 표시되지 않으면 보기 메뉴에서 데이터베이스 탐색기를 클릭합니다.
데이터베이스 파일 이름 필드에서 Northwind 샘플 데이터베이스를 설치한 위치를 입력하거나 찾습니다.
Northwnd.mdf 데이터베이스 파일을 선택하고 열기를 클릭합니다.
암호 저장 확인란을 선택합니다.
연결 테스트를 클릭하고 제대로 작동하는지 확인한 다음 확인을 클릭합니다.
서버 탐색기의 데이터 연결 아래에 새 연결이 만들어졌습니다.
GridView 컨트롤을 구성하여 데이터베이스 데이터 표시
이 연습 부분에서는 표에 데이터를 동적으로 채웁니다.
간단한 정렬을 사용하려면
Default.aspx 파일로 전환하거나 이 파일을 엽니다.
디자인 뷰로 전환합니다.
도구 상자의 데이터 그룹에서 GridView 컨트롤을 페이지로 끌어 옵니다.
GridView 작업 메뉴의 데이터 소스선택 상자에서 <새 데이터 소스>를 클릭합니다.
데이터 소스 구성 마법사가 나타납니다.
데이터베이스를 클릭합니다.
이는 SQL Server나 그 밖의 OLE-DB 호환 데이터베이스와 같이 SQL 문을 지원하는 데이터베이스에서 데이터를 가져오려 한다는 의미입니다.
데이터 소스의 ID 지정 상자에 기본 데이터 소스 컨트롤 이름인 SqlDataSource1이 표시됩니다. 이 이름을 그대로 둘 수 있습니다.
확인을 클릭합니다.
데이터 소스 구성 마법사가 표시됩니다.
"SQL Server에 대한 연결을 만들려면"에서 만든 연결을 응용 프로그램이 데이터베이스에 연결하기 위해 사용해야 하는 데이터 연결 상자에 입력한 후 다음을 클릭합니다.
마법사는 구성 파일에 연결 문자열을 저장할 수 있는 페이지를 표시합니다. 구성 파일에 연결 문자열을 저장할 경우 두 가지 장점이 있습니다.
페이지에 저장하는 것보다 안전합니다.
여러 페이지에서 동일한 연결 문자열을 사용할 수 있습니다.
예, 이 연결을 다음으로 저장합니다. 확인란을 선택하고 다음을 클릭합니다.
데이터베이스에서 가져올 데이터를 지정할 수 있는 페이지가 표시됩니다.
테이블 또는 뷰의 열 지정의 이름 상자에서 Employees를 클릭합니다.
열에서 EmployeeId, LastName, FirstName, HireDate 및 City 확인란을 선택합니다.
마법사는 만들고 있는 SQL 문을 페이지 아래쪽의 상자에 표시합니다.
참고:마법사에서는 선택 기준(WHERE 절) 및 기타 SQL 쿼리 옵션을 지정할 수 있습니다. 이 연습에서는 선택이나 정렬 옵션 없이 간단한 문을 만듭니다.
고급을 클릭하고 Insert, Update 및 Delete 문 생성 확인란을 선택한 다음 확인을 클릭합니다.
이렇게 하면 앞에서 구성한 Select 문을 기반으로 SqlDataSource1 컨트롤에 대해 Insert, Update 및 Delete 문이 생성됩니다.
참고:또는 사용자 지정 SQL 문 또는 저장 프로시저 지정을 선택하고 SQL 쿼리를 입력하여 문을 수동으로 만들 수 있습니다.
다음을 클릭합니다.
쿼리 테스트를 클릭하여 원하는 데이터가 검색되는지 확인합니다.
마침을 클릭합니다.
GridView 컨트롤을 마우스 오른쪽 단추로 클릭한 다음 스마트 태그 표시를 선택합니다. GridView 작업 메뉴에서 편집 사용 상자를 선택합니다.
이제 페이지를 테스트할 수 있습니다.
페이지를 테스트하려면
Ctrl+F5를 눌러 페이지를 실행합니다.
GridView 컨트롤에 EmployeeId, LastName, FirstName, HireDate 및 City 열이 표시됩니다.
행 옆에 있는 편집 링크를 클릭합니다.
편집하기 위해 선택한 행이 LastName, FirstName, HireDate 및 City 열에 편집 가능한 텍스트 상자로 표시됩니다. EmployeeId는 키 필드이며 편집할 수 없으므로 텍스트 상자에 표시되지 않습니다.
LastName과 같은 필드를 변경하고 업데이트를 클릭합니다.
GridView 컨트롤에 EmployeeId, LastName, FirstName, HireDate 및 City 열과 함께 새 값으로 업데이트된 LastName 열이 표시됩니다.
브라우저를 닫습니다.
GridView 컨트롤에서 편집하는 동안 드롭다운 목록 표시
이 연습 부분에서는 표에서 행을 편집하는 동안 선택할 드롭다운 목록을 추가할 수 있습니다.
편집하는 동안 드롭다운 목록을 표시하려면
도구 상자의 데이터 노드에서 SqlDataSource 컨트롤을 페이지로 끌어 옵니다.
SqlDataSource2라는 새 데이터 소스 컨트롤이 만들어집니다.
SqlDataSource 작업 메뉴에서 데이터 소스 구성을 선택합니다.
앞에서 만든 연결을 응용 프로그램이 데이터베이스에 연결하기 위해 사용해야 하는 데이터 연결 상자에 입력합니다.
다음을 클릭합니다.
Select 문 구성 페이지에서 테이블 또는 뷰의 열 지정을 선택한 후 이름 상자에서 Employees를 클릭합니다.
City 열만 선택한 다음 고유한 행만 반환 확인란을 선택합니다. 다음을 클릭합니다.
쿼리 테스트를 클릭하여 데이터를 미리 본 다음 마침을 클릭합니다.
GridView 컨트롤을 마우스 오른쪽 단추로 클릭한 다음 스마트 태그 표시를 선택합니다. GridView 작업 메뉴에서 열 편집을 선택합니다.
필드 대화 상자의 선택한 필드 목록에서 City를 선택합니다.
이 필드를 TemplateField로 변환 링크를 클릭합니다.
확인을 클릭하여 필드 대화 상자를 닫습니다.
GridView 컨트롤을 마우스 오른쪽 단추로 클릭한 다음 스마트 태그 표시를 선택합니다. GridView 작업 메뉴에서 템플릿 편집을 선택합니다.
표시 드롭다운 목록에서 EditItemTemplate을 선택합니다.
템플릿에서 기본 TextBox 컨트롤을 마우스 오른쪽 단추로 클릭한 다음 삭제를 선택하여 이 컨트롤을 제거합니다.
도구 상자의 표준 탭에서 DropDownList 컨트롤을 템플릿으로 끌어 옵니다.
DropDownList 컨트롤을 마우스 오른쪽 단추로 클릭한 다음 스마트 태그 표시를 클릭합니다. DropDownList 작업 메뉴에서 데이터 소스선택을 클릭합니다.
SqlDataSource2를 선택합니다.
확인을 클릭합니다.
DropDownList 작업 메뉴에서 데이터 바인딩 편집을 선택합니다. DropDownList 컨트롤의 SelectedValue 속성이 DataBindings 대화 상자에서 선택됩니다.
필드 바인딩 라디오 단추를 클릭하고 바인딩 대상에 City를 선택합니다.
양방향 데이터 바인딩 확인란을 선택합니다.
확인을 클릭합니다.
GridView 컨트롤을 마우스 오른쪽 단추로 클릭한 다음 스마트 태그 표시를 선택합니다. GridView 작업 메뉴에서 템플릿 편집 끝내기를 클릭합니다.
.gif "보안 정보")
보안 정보:ASP.NET 웹 페이지의 사용자 입력에는 잠재적으로 악의적인 클라이언트 스크립트가 포함될 수 있습니다. 기본적으로 ASP.NET 웹 페이지에서는 사용자 입력의 유효성을 검사하여 입력에 HTML 요소나 스크립트가 포함되지 않도록 합니다. 이러한 유효성 검사를 사용하는 이상, 사용자 입력에 있는 스크립트 또는 HTML 요소를 명시적으로 검사할 필요가 없습니다. 자세한 내용은 스크립트 악용 개요를 참조하십시오.
이제 페이지를 테스트할 수 있습니다.
페이지를 테스트하려면
Ctrl+F5를 눌러 페이지를 실행합니다.
GridView 컨트롤에 EmployeeId, LastName, FirstName, HireDate 및 City 열이 표시됩니다.
행 옆에 있는 편집 링크를 클릭합니다.
현재 City 값이 드롭다운 목록에서 미리 선택되어 있습니다.
드롭다운 목록에서 다른 City 값을 선택하고 업데이트를 클릭합니다.
City 필드가 드롭다운 목록에서 선택된 값으로 업데이트됩니다.
다음 단계
이 연습에서는 컨트롤에 바인딩된 열의 값으로 채워진 드롭다운 목록을 표시하는 방법을 보여 주었지만 이외 다른 여러 가지 방법으로 드롭다운 목록을 채울 수 있습니다. 다른 테이블의 값으로 드롭다운 목록을 채우는 방법을 보려면 DataItem에 대한 예제를 참조하십시오.
참고 항목
작업
방법: 데이터 소스 컨트롤을 사용하는 경우 연결 문자열 보안 유지