연습: GridView 웹 서버 컨트롤에서 저장 프로시저를 사용하여 데이터 표시
업데이트: 2007년 11월
이 연습에서는 저장 프로시저를 사용하여 GridView 컨트롤에 데이터를 표시하는 방법을 보여 줍니다. 저장 프로시저는 응용 프로그램 코드 대신 Microsoft SQL Server 데이터베이스에 저장되는 SQL 쿼리로, 쿼리 코드보다 안전하며 일반적으로 실행 속도가 더 빠릅니다. 이 연습에서는 저장 프로시저의 결과를 검색하는 SqlDataSource 컨트롤을 만듭니다. SqlDataSource 컨트롤은 GridView 컨트롤의 데이터 소스 역할을 수행합니다. GridView 컨트롤은 저장 프로시저가 생성한 결과를 읽고 행과 테이블을 만들어 데이터를 표시합니다.
이 연습을 통해 다음 작업을 수행하는 방법을 배웁니다.
Visual Web Developer에서 SQL Server 데이터베이스에 연결합니다.
SqlDataSource 컨트롤을 사용하여 데이터 액세스와 바인딩을 관리합니다.
GridView 컨트롤에 표시할 데이터를 반환하는 저장 프로시저를 추가합니다.
저장 프로시저에서 반환된 데이터를 GridView 컨트롤에 표시합니다.
사전 요구 사항
이 연습을 완료하려면 다음과 같은 요건을 갖추어야 합니다.
Visual Studio 2008 또는 Visual Web Developer 2008 Express Edition
.gif "참고")
참고:이 연습에서 사용하는 새 저장 프로시저 추가 기능은 Visual Web Developer 2005 Express Edition에서 지원되지 않습니다.
SQL Server Express Edition. SQL Server가 설치되어 있으면 대신 이를 사용할 수 있지만 일부 절차가 약간 달라집니다.
MDAC(Microsoft Data Access Components) 버전 2.7 이상
Microsoft Windows XP나 Windows Server 2003을 사용하는 경우에는 MDAC 2.7이 컴퓨터에 이미 설치되어 있습니다. 그러나 Microsoft Windows 2000을 사용하는 경우에는 컴퓨터에 설치되어 있는 MDAC를 업그레이드해야 할 수도 있습니다. 자세한 내용은 MSDN 웹 사이트에서 Microsoft Data Access Components (MDAC) Installation을 참조하십시오.
SQL Server Northwind 데이터베이스에 대한 액세스 권한. SQL Server 샘플 Northwind 데이터베이스를 다운로드 및 설치하는 방법에 대한 자세한 내용은 Microsoft SQL Server 웹 사이트의 예제 데이터베이스 설치를 참조하십시오.
참고:SQL Server에 로그인하는 방법에 대한 자세한 내용은 서버 관리자에게 문의하십시오.
웹 사이트 만들기
다음 단계에 따라 새 웹 사이트와 페이지를 만듭니다.
파일 시스템 웹 사이트를 만들려면
Visual Web Developer를 엽니다.
파일 메뉴에서 새로 만들기를 클릭한 다음 웹 사이트를 클릭합니다. Visual Web Developer Express Edition을 사용하는 경우 파일 메뉴에서 새웹 사이트를 클릭합니다.
새 웹 사이트 대화 상자가 나타납니다.
Visual Studio에 설치되어 있는 템플릿에서 ASP.NET 웹 사이트를 클릭합니다.
첫 번째 위치 상자에서 파일 시스템을 선택하고 두 번째 상자에 웹 사이트의 페이지를 보관할 폴더의 이름을 입력합니다.
예를 들어, 폴더 이름 C:\WebSites\StoredProcedure를 입력합니다.
언어 목록에서 작업할 프로그래밍 언어를 클릭합니다.
확인을 클릭합니다.
Visual Web Developer Express Edition에서 폴더 및 Default.aspx라는 새 페이지를 만듭니다.
데이터를 반환하는 저장 프로시저 추가
ASP.NET 웹 페이지의 데이터를 표시하려면 다음과 같은 요건을 갖추어야 합니다.
데이터 소스에 대한 연결(예: 데이터베이스)
다음 절차에서는 SQL Server Northwind 데이터베이스에 대한 연결을 만듭니다.
표시할 데이터를 반환하는 저장 프로시저
저장 프로시저를 실행하고 결과를 관리하는 페이지의 데이터 소스 컨트롤
데이터를 표시하기 위한 페이지의 컨트롤
다음 절차에서는 GridView 컨트롤에 데이터를 표시합니다. GridView 컨트롤은 SqlDataSource 컨트롤에서 데이터를 가져옵니다.
첫 단계에서는 저장 프로시저를 만듭니다.
데이터를 반환하는 저장 프로시저를 만들려면
서버 탐색기에서 데이터 연결을 마우스 오른쪽 단추로 클릭한 다음 연결 추가를 클릭합니다. Visual Web Developer Express Edition을 사용하는 경우 데이터베이스 탐색기를 사용합니다.
연결 추가 대화 상자가 표시됩니다.
데이터 소스 목록에 **Microsoft SQL Server (SqlClient)**가 표시되지 않으면 변경을 클릭하고 데이터 소스 변경 대화 상자에서 Microsoft SQL Server를 선택합니다.
연결 속성 대화 상자 대신 데이터 소스 선택 대화 상자가 표시되면 데이터 소스 목록에서 사용할 데이터 소스의 형식을 선택합니다. 이 연습에서 데이터 소스 형식은 Microsoft SQL Server입니다. 데이터 공급자 목록에서 .NET Framework Data Provider for SQL Server를 클릭한 다음 계속을 클릭합니다.
참고:Visual Web Developer에 서버 탐색기 탭이 표시되지 않으면 보기 메뉴에서 서버 탐색기를 클릭합니다. Visual Web Developer Express Edition을 사용하는 경우에는 보기 메뉴에서 데이터베이스 탐색기를 클릭합니다.
연결 추가 상자의 서버 이름 텍스트 상자에 서버 이름을 입력합니다.
서버에 로그온 섹션에서 실행 중인 SQL Server 데이터베이스에 액세스하는 데 적합한 옵션(통합 보안 또는 특정 ID와 암호)을 선택하고 필요한 경우 사용자 이름과 암호를 입력합니다.
암호를 입력한 경우 암호 저장 확인란을 선택합니다.
데이터베이스 이름 선택 또는 입력에 Northwind를 입력합니다.
연결 테스트를 클릭하고 제대로 작동하는지 확인한 다음 확인을 클릭합니다.
서버 탐색기의 데이터 연결 아래에 새 연결이 생성되어 표시됩니다.
서버 탐색기의 데이터 연결 아래에서 방금 만든 데이터 연결을 확장합니다. Visual Web Developer Express Edition을 사용하는 경우 데이터베이스 탐색기를 사용합니다.
데이터 연결이 확장되어 테이블, 뷰 및 저장 프로시저와 같은 자식 연결을 포함합니다.
저장 프로시저를 마우스 오른쪽 단추로 클릭한 다음 새 저장 프로시저 추가를 클릭합니다.
참고:새 저장 프로시저 추가 기능은 Visual Web Developer 2005 Express Edition에서 지원되지 않습니다.
새 저장 프로시저에 다음 코드를 추가하여 기존 코드를 덮어씁니다.
CREATE PROCEDURE GetEmployees AS Select EmployeeID, LastName, FirstName from Employees RETURN창을 닫고 예를 클릭하여 저장 프로시저를 만듭니다.
참고:프로시저를 저장하면 CREATE 키워드가 ALTER로 변경됩니다.
데이터를 표시하기 위한 GridView 컨트롤 추가
데이터 소스에 대한 연결을 설정한 후 다음과 같은 요건을 갖추어야 합니다.
저장 프로시저를 실행하고 결과를 관리하는 페이지의 데이터 소스 컨트롤
데이터를 표시하기 위한 페이지의 컨트롤
다음 절차에서는 GridView 컨트롤에 데이터를 표시합니다. GridView 컨트롤은 SqlDataSource 컨트롤에서 데이터를 가져옵니다.
이러한 요소를 웹 사이트에 별도로 추가할 수도 있지만 GridView 컨트롤을 사용하여 데이터 표시를 시각화한 다음 마법사를 사용하여 연결과 데이터 소스 컨트롤을 만들어 시작하는 것이 가장 편리합니다. 다음 절차에서는 페이지에 데이터를 표시하기 위해 필요한 요소를 만드는 방법을 설명합니다.
데이터를 표시하기 위한 GridView 컨트롤을 추가하고 구성하려면
Default.aspx 페이지로 전환하거나 이 페이지를 연 다음 디자인 뷰로 전환합니다.
도구 상자의 데이터 그룹에서 GridView 컨트롤을 페이지로 끌어 옵니다.
GridView 작업 메뉴의 데이터 소스 선택 목록에서 새 데이터 소스를 클릭합니다.
그러면 데이터 소스 구성 마법사 대화 상자가 나타납니다.
데이터베이스를 선택한 다음 확인을 클릭합니다.
이렇게 하면 SQL Server 데이터베이스에서 데이터가 검색됩니다.
데이터 소스의 ID 지정 상자에 기본 데이터 소스 컨트롤 이름(SqlDataSource1)이 표시됩니다. 이 이름을 그대로 둡니다.
데이터 소스 구성 - SqlDataSource1 마법사에 연결을 선택할 수 있는 페이지가 표시됩니다.
응용 프로그램이 데이터베이스에 연결하기 위해 사용해야 하는 데이터 연결 목록에서 이전 절차에서 만든 연결을 입력한 후 다음을 클릭합니다.
구성 파일에 연결 문자열을 저장하도록 선택할 수 있는 페이지가 표시됩니다. 구성 파일에 연결 문자열을 저장할 경우 두 가지 장점이 있습니다.
페이지에 저장하는 것보다 안전합니다.
여러 페이지에서 동일한 연결 문자열을 사용할 수 있습니다.
예, 이 연결을 다음으로 저장합니다. 확인란을 선택하고 다음을 클릭합니다.
데이터베이스에서 검색하려는 데이터를 지정할 수 있는 페이지가 표시됩니다.
사용자 지정 SQL 문 또는 저장 프로시저 지정 옵션을 선택하고 다음을 클릭합니다.
사용자 지정 문 또는 저장 프로시저 정의 페이지에서 저장 프로시저를 선택한 다음 이전에 만든 저장 프로시저(GetEmployees)를 선택합니다.
다음을 클릭합니다.
쿼리 테스트를 클릭하여 원하는 데이터를 검색하는지 확인합니다.
마침을 클릭합니다.
저장 프로시저에서 반환하는 데이터를 표시하기 위한 DetailsView 컨트롤 추가
매개 변수를 사용하는 저장 프로시저에서 반환하는 데이터를 표시할 수 있습니다. 다음 절차에서는 DetailsView 컨트롤을 만들어 GridView 컨트롤에서 선택된 행에 대한 계산된 값을 표시합니다. GridView 행은 직원 레코드를 나타내고, DetailsView 컨트롤은 선택한 직원에 대해 계산된 총 판매액을 보여 줍니다.
이를 위해서는 다음 요소를 만들어야 합니다.
직원 ID를 매개 변수로 가져와 값을 반환하는 저장 프로시저
저장 프로시저를 실행하고 결과를 관리하는 페이지의 두 번째 데이터 소스 컨트롤. 두 데이터 소스 컨트롤 모두 같은 Northwind 데이터베이스에 대한 연결을 나타냅니다. 이 연습의 앞부분에서 만든 SQL Server Northwind 데이터베이스에 대한 연결을 다시 사용합니다.
데이터를 표시하기 위한 페이지의 DetailsView 컨트롤
첫 단계에서는 저장 프로시저를 만듭니다.
DetailsView 컨트롤에 표시할 데이터를 반환하는 저장 프로시저를 만들려면
서버 탐색기의 데이터 연결 아래에서 앞에서 만든 데이터 연결을 확장합니다. Visual Web Developer Express Edition을 사용하는 경우 데이터베이스 탐색기를 사용하여 이 작업을 수행합니다.
저장 프로시저를 마우스 오른쪽 단추로 클릭한 다음 새 저장 프로시저 추가를 클릭합니다.
참고:새 저장 프로시저 추가 기능은 Visual Web Developer 2005 Express Edition에서 지원되지 않습니다.
새 저장 프로시저에 다음 코드를 추가하여 기존 코드를 덮어씁니다.
CREATE PROCEDURE EmployeeSales @Employee int AS SELECT SUM([Order Subtotals].Subtotal) AS Total FROM Employees INNER JOIN Orders INNER JOIN [Order Subtotals] ON Orders.OrderID = [Order Subtotals].OrderID ON Employees.EmployeeID = Orders.EmployeeID WHERE (Employees.EmployeeID = @Employee)창을 닫고 예를 클릭하여 저장 프로시저를 만듭니다.
참고:프로시저를 저장하면 CREATE 키워드가 ALTER로 변경됩니다.
데이터를 제공할 저장 프로시저를 만든 후에는 다음 요소를 만들어야 합니다.
저장 프로시저를 실행하고 결과를 관리하는 페이지의 데이터 소스 컨트롤
데이터를 표시하기 위한 페이지의 컨트롤
다음 절차에서는 DetailsView 컨트롤에 데이터를 표시합니다. DetailsView 컨트롤은 SqlDataSource 컨트롤에서 데이터를 가져옵니다.
이러한 요소를 웹 사이트에 별도로 추가할 수도 있지만 DetailsView 컨트롤을 사용하여 데이터 표시를 시각화한 다음 마법사를 사용하여 연결과 데이터 소스 컨트롤을 만들어 시작하는 것이 가장 편리합니다. 다음 절차에서는 페이지에 데이터를 표시하기 위해 필요한 요소를 만드는 방법을 설명합니다.
다음 단계에서는 GridView 컨트롤에 대해 행 선택이 가능하도록 설정합니다. 선택된 행은 저장 프로시저에 전달되는 EmployeeID 매개 변수를 결정합니다.
GridView 컨트롤에 대해 행 선택이 가능하도록 설정하려면
GridView 컨트롤을 마우스 오른쪽 단추로 클릭한 다음 스마트 태그 표시를 클릭합니다.
GridView 작업 창에서 선택 가능을 선택합니다.
다음 단계에서는 저장 프로시저의 결과를 표시하기 위한 컨트롤을 만듭니다.
데이터를 표시하기 위한 DetailsView 컨트롤을 추가하고 구성하려면
Default.aspx 페이지로 전환하거나 이 페이지를 연 다음 디자인 뷰로 전환합니다.
도구 상자의 데이터 그룹에서 DetailsView 컨트롤을 페이지로 끌어 옵니다.
DetailsView 작업 메뉴의 데이터 소스 선택 목록에서 새 데이터 소스를 클릭합니다.
그러면 데이터 소스 구성 마법사 대화 상자가 나타납니다.
데이터베이스를 선택한 다음 확인을 클릭합니다.
이렇게 하면 SQL Server 데이터베이스에서 데이터가 검색됩니다.
데이터 소스의 ID 지정 상자에 기본 데이터 소스 컨트롤 이름(SqlDataSource2)이 표시됩니다. 이 이름을 그대로 둡니다.
데이터 소스 구성 - SqlDataSource2 마법사에 연결을 선택할 수 있는 페이지가 표시됩니다.
응용 프로그램이 데이터베이스에 연결하기 위해 사용해야 하는 데이터 연결 목록에서 앞에서 만든 연결을 입력한 후 다음을 클릭합니다.
사용자 지정 SQL 문 또는 저장 프로시저 지정 옵션을 선택하고 다음을 클릭합니다.
사용자 지정 문 또는 저장 프로시저 정의 페이지에서 저장 프로시저를 선택한 다음 이전에 만든 저장 프로시저(EmployeeSales)를 선택합니다.
다음을 클릭합니다.
매개 변수 정의 페이지가 표시됩니다.
매개 변수 소스 목록에서 컨트롤을 선택합니다.
ControlID 목록에서 GridView1을 선택합니다.
쿼리 테스트를 클릭하여 원하는 데이터를 검색하는지 확인합니다. 매개 변수 값 편집기 대화 상자에서 값 1을 입력한 다음 확인을 클릭합니다. 값 1은 데이터베이스에 있는 직원 ID입니다. 데이터 검색이 올바르게 이루어지면 192107.6000과 같은 값이 반환됩니다. 데이터베이스의 데이터가 수정된 경우 반환되는 값이 다를 수 있습니다.
마침을 클릭합니다.
페이지 테스트
이제 페이지를 실행할 수 있습니다.
페이지를 테스트하려면
Ctrl+F5를 눌러 페이지를 실행합니다.
페이지가 브라우저에 표시됩니다. GridView 컨트롤에 Employees 테이블의 모든 데이터 행이 표시됩니다.
GridView 컨트롤의 데이터 행에서 선택 링크를 클릭합니다.
선택한 행의 세부 정보와 저장 프로시저의 선택한 직원에 대한 총 판매액 계산 결과가 DetailsView 컨트롤에 표시됩니다.
브라우저를 닫습니다.
다음 단계
이 연습에서는 데이터 소스 컨트롤과 함께 SQL Server 저장 프로시저를 사용하여 ASP.NET 웹 페이지에 데이터를 표시할 수 있는 방법에 대해 설명했습니다. SqlDataSource 컨트롤을 사용하는 경우에는 SQL 문을 사용하는 것과 같은 방법으로 저장 프로시저를 사용할 수 있습니다. 또한 저장 프로시저는 웹 페이지의 값과 연결할 수 있는 매개 변수를 사용할 수 있습니다. 저장 프로시저를 사용하는 다음과 같은 시나리오를 탐색할 수 있습니다. 이러한 시나리오에서는 SQL 문을 사용하여 데이터 관련 기능을 수행합니다.
참고 항목
작업
방법: 데이터 소스 컨트롤을 사용하는 경우 연결 문자열 보안 유지