연습: AJAX 사용 데이터 응용 프로그램 만들기

아티클
08/20/2008

업데이트: 2007년 11월

이 연습에서는 할 일 목록 또는 작업 목록으로 작동할 수 있는 AJAX 사용 웹 응용 프로그램을 만드는 방법에 대해 설명합니다. 이 연습은 목록을 만들고, 관리하고, 삭제하기 위한 기본 사용자 인터페이스는 물론 이러한 목록의 항목에 대한 기본 사용자 인터페이스를 만드는 데 도움이 됩니다. 모든 삽입, 업데이트, 삭제, 정렬 및 페이징 작업은 AJAX를 사용하는 UpdatePanel 컨트롤 내에서 수행됩니다.

페이지에서 비동기 포스트백을 활성화하려면 UpdatePanel 컨트롤을 사용합니다. 기본적으로 ASP.NET은 포스트백이 발생하면 전체 페이지를 새로 고칩니다. 하지만 UpdatePanel 컨트롤을 사용하여 비동기 포스트백을 만드는 경우에는 UpdatePanel 컨트롤 내에 있는 페이지 요소만 변경됩니다. 이를 통해 페이지의 동적인 느낌이 살아나고 작업 수행 속도가 빨라질 뿐 아니라 보다 풍부한 사용자 환경을 제공할 수 있습니다.

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

SQL 데이터베이스 만들기 및 데이터 추가
페이지에 LinqDataSource 컨트롤 추가
LINQ to SQL 클래스 파일 추가
ListView 컨트롤을 사용하여 데이터 표시, 편집 및 삭제
LinqDataSource 컨트롤을 통해 LINQ(통합 언어 쿼리)를 사용하여 데이터베이스에 연결. 자세한 내용은 LINQ(통합 언어 쿼리)를 참조하십시오.
UpdatePanel 컨트롤을 사용하여 페이지에 AJAX 기능 추가

사전 요구 사항

이 연습을 완료하려면 다음이 필요합니다.

Microsoft Visual Studio 2008 또는 Visual Web Developer 2008 Express Edition. 다운로드 정보는 Visual Studio Development Center 웹 사이트를 참조하십시오.
컴퓨터에 설치된 SQL Server Express Edition. SQL Server가 설치되어 있으면 대신 이를 사용할 수 있지만 일부 절차를 약간 수정해야 합니다.

웹 사이트 만들기

이 연습 단계에서는 웹 사이트를 만들어 페이지를 추가합니다. 다음 단원에서는 데이터베이스에 연결합니다. 연습: Visual Web Developer에서 기본 웹 페이지 만들기의 단계에 따라 작업한 경우를 비롯하여 이미 웹 사이트를 만든 경우에는 해당 웹 사이트를 사용할 수 있습니다. 그렇지 않으면, 다음 단계를 따라 새 웹 사이트를 만듭니다.

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

Visual Web Developer의 파일 메뉴에서 새 웹 사이트를 클릭합니다.

새 웹 사이트 대화 상자가 표시됩니다.
Visual Studio에 설치되어 있는 템플릿에서 ASP.NET 웹 사이트를 클릭합니다.
위치 상자에서 파일 시스템을 클릭하고 웹 사이트의 페이지를 보관할 폴더의 이름을 입력합니다.
언어 목록에서 Visual Basic 또는 Visual C#을 클릭한 다음 확인을 클릭합니다.

참고:

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

Visual Web Developer에서 폴더 및 Default.aspx라는 새 페이지가 만들어집니다.

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

새 SQL Server 데이터베이스 만들기

이제 웹 사이트가 있으므로 다음 단계에서는 데이터베이스를 만들고 서버 탐색기에서 데이터베이스에 대한 참조를 추가합니다. Visual Web Developer 2008 Express Edition에서는 서버 탐색기의 이름이 데이터베이스 탐색기로 지정되어 있습니다. 서버 탐색기에 데이터베이스를 추가하는 경우 Visual Studio를 사용하여 테이블, 저장 프로시저, 뷰 등을 추가할 수 있습니다. 또한 수동으로 또는 쿼리 작성기 창을 사용하여 그래픽으로 테이블 데이터를 보거나 고유한 쿼리를 만들 수도 있습니다.

프로젝트에 데이터베이스를 추가하려면

솔루션 탐색기에서 웹 사이트 이름을 마우스 오른쪽 단추로 클릭한 다음 새 항목 추가를 클릭합니다.

새 항목 추가 대화 상자가 표시됩니다.
SQL 데이터베이스를 선택하고 데이터베이스의 이름을 Tasks.mdf로 지정한 다음 확인을 클릭합니다.
Visual Studio에서 데이터베이스를 App_Data 폴더에 저장할 것인지를 묻는 메시지가 나타나면 예를 클릭합니다.

데이터베이스에 대한 스키마 및 샘플 데이터 만들기

데이터 디자인 및 편집 기능을 사용하여 작업 항목을 저장하는 새 테이블에 대한 스키마를 만들 수 있습니다.

데이터베이스에 대한 스키마 및 샘플 데이터를 만들려면

솔루션 탐색기에서 App_Data 폴더를 열고 Tasks.mdf를 두 번 클릭합니다.

서버 탐색기(또는 데이터베이스 탐색기)에서 Tasks 데이터베이스 트리 계층 구조가 표시됩니다.
테이블 폴더를 마우스 오른쪽 단추로 클릭한 다음 새 테이블 추가를 클릭합니다.

데이터베이스 테이블 편집기에서 테이블에 다음과 같은 열을 만듭니다.

열 이름	데이터 형식	속성
taskId	int	Null 허용: 아니요
taskName	nvarchar(50)	Null 허용: 아니요
dateCreated	datetime	Null 허용: 아니요
isComplete	bit	Null 허용: 아니요

taskId에 포함된 행을 마우스 오른쪽 단추로 클릭한 다음 기본 키 설정을 클릭합니다.
taskid 행이 선택되어 있는 상태에서 열 속성 탭에서 ID 사양 섹션을 연 다음 (ID)를 예로 설정합니다.
테이블을 저장하고 이름을 TasksList로 지정합니다.
서버 탐색기에서 테이블을 마우스 오른쪽 단추로 클릭하고 테이블 데이터 표시를 클릭합니다.

데이터를 보고 추가할 수 있는 창이 표시됩니다.
네 개 또는 다섯 개의 레코드를 추가한 다음 데이터베이스 디자이너를 닫습니다.

taskId는 값이 자동으로 할당되는 ID 열이므로 이 열에 대해서는 값을 지정할 필요가 없습니다. isComplete 필드에 대해서는 False 또는 True를 지정해야 합니다.

데이터 액세스 컨트롤 만들기

이 단원에서는 LinqDataSource 컨트롤을 사용하고 데이터베이스 엔터티를 나타내는 클래스를 만듭니다. 만들어지는 컨트롤과 클래스는 이 연습에서 사용할 데이터 액세스 계층입니다.

LinqDataSource 컨트롤은 ASP.NET 데이터 소스 컨트롤 아키텍처를 통해 웹 개발자에게 LINQ(통합 언어 쿼리)를 제공합니다. LinqDataSource 컨트롤은 데이터베이스의 개체를 선택, 삽입, 업데이트 및 삭제하기 위한 코드를 만듭니다. LINQ는 관계형 데이터에 개체 지향 프로그래밍 원리를 적용합니다. LINQ에서는 여러 유형의 데이터 소스에서 데이터를 쿼리하고 업데이트하기 위한 통합 프로그래밍 모델을 제공하고 데이터 기능을 직접 C# 및 Visual Basic 언어로 확장합니다. LINQ에 대한 자세한 내용은 LINQ(통합 언어 쿼리)를 참조하십시오.

SQL 데이터 컨텍스트 개체에 Tasks 데이터베이스 매핑

데이터 액세스 계층을 만들려면 먼저 프로젝트에 형식화된 데이터 집합을 추가합니다.

TasksList 테이블에 대한 클래스를 만들려면

웹 사이트에 아직 App_Code 폴더가 없는 경우 솔루션 탐색기에서 웹 사이트 이름을 마우스 오른쪽 단추로 클릭하고 ASP.NET 폴더 추가를 클릭한 다음 App_Code를 클릭합니다.
App_Code 폴더를 마우스 오른쪽 단추로 클릭한 다음 새 항목 추가를 클릭합니다.
Visual Studio에 설치되어 있는 템플릿에서 LINQ to SQL 클래스를 선택하고 파일 이름을 Tasks.dbml로 바꾼 다음 추가를 클릭합니다.

개체 관계형 디자이너가 표시됩니다.
서버 탐색기에서 TasksList 테이블을 개체 관계형 디자이너 창으로 끌어 옵니다.
Tasks.dbml 파일을 저장합니다.

파일을 저장하면 Visual Studio에서 Tasks.dbml 아래의 App_Code 폴더에 두 개의 파일을 만듭니다. 첫 번째 파일은 Tasks.dbml.layout이고 두 번째 파일은 Tasks.dbml 파일을 만들 때 선택한 언어에 따라 Tasks.designer.cs 또는 Tasks.designer.vb입니다.
솔루션 탐색기에서 Tasks.designer.cs 또는 Tasks.designer.vb 파일을 엽니다.

코드에는 TasksDataContext 및 TasksList라는 클래스가 포함되어 있습니다. TasksDataContext 클래스는 데이터베이스를 나타내고 TasksList 클래스는 데이터베이스 테이블을 나타냅니다. TasksDataContext 클래스의 매개 변수가 없는 생성자는 Web.config 파일에서 연결 문자열을 읽습니다.
Web.config 파일을 엽니다.

Tasks.mdf 데이터베이스에 대한 연결 문자열이 connectionStrings 요소에 추가되었습니다.
클래스 파일, 개체 관계형 디자이너 창 및 Web.config 파일을 닫습니다.

LinqDataSource 컨트롤 만들기 및 구성

이제 데이터베이스 엔터티를 나타내는 데이터베이스 테이블 및 클래스가 있으므로 ASP.NET 웹 페이지에서 LinqDataSource 컨트롤을 사용하여 데이터에 액세스할 수 있습니다.

LinqDataSource 컨트롤을 만들고 구성하려면

Default.aspx 페이지를 열거나 이 페이지로 전환합니다.
디자인 뷰로 전환합니다.
LinqDataSource 컨트롤을 페이지로 끌어 옵니다.

ID 속성을 LinqDataSource1로 그대로 둘 수 있습니다.
LinqDataSource 작업 스마트 태그 패널에서 데이터 소스 구성을 클릭합니다.

참고:

스마트 태그 패널이 표시되지 않으면 LinqDataSource 컨트롤을 마우스 오른쪽 단추로 클릭한 다음 스마트 태그 표시를 클릭합니다.
컨텍스트 개체 선택 목록에서 TasksDataContext를 선택한 후 다음을 클릭합니다.
테이블 목록에서 TasksLists(Table<TasksList>)를 선택한 다음 마침을 클릭합니다.
LinqDataSource 작업 메뉴에서 삭제 허용, 삽입 허용 및 업데이트 허용을 선택합니다.

데이터를 선택하기 위해 데이터베이스 명령을 지정할 필요가 없었습니다.
페이지를 저장합니다.

참고:
스마트 태그 패널이 표시되지 않으면 LinqDataSource 컨트롤을 마우스 오른쪽 단추로 클릭한 다음 스마트 태그 표시를 클릭합니다.

데이터 소스 컨트롤 사용

이 단원에서는 데이터베이스 테이블을 클래스에 매핑한 LINQ to SQL 클래스를 사용하는 페이지에 컨트롤을 추가합니다. 또한 LinqDataSource 컨트롤을 사용하여 기본 데이터 응용 프로그램을 만듭니다.

SQL Server 데이터베이스의 데이터를 표시할 ListView 컨트롤을 추가합니다. 그런 다음 ListView 컨트롤에 나타나는 데이터를 필터링할 DropDownList 컨트롤을 추가합니다. 이 연습의 뒷부분에서는 UpdatePanel 컨트롤에 컨트롤을 집어넣어 비동기 포스트백 기능을 추가합니다.

ListView 컨트롤을 사용하여 데이터 표시

ListView 컨트롤은 DataList 및 Repeater 컨트롤과 마찬가지로 모든 반복적인 구조의 데이터를 표시하는 데 유용합니다. 하지만 이러한 컨트롤과 달리 ListView 컨트롤은 정렬 및 페이징은 물론 편집, 삽입 및 삭제 작업을 지원합니다.

모든 작업을 표시하는 ListView 컨트롤을 추가합니다. 나중에 데이터를 필터링할 수 있도록 하는 드롭다운 목록을 추가합니다. ListView 컨트롤은 데이터 표현의 형식을 지정하고, 콘텐츠를 편집 및 업데이트하거나 새 콘텐츠를 삽입하는 데 사용할 수 있는 단추를 표시합니다.

페이지에 ListView 컨트롤을 추가하려면

LinqDataSource 컨트롤을 추가한 페이지를 열거나 해당 페이지로 전환합니다.
도구 모음의 데이터 탭에서 ListView 컨트롤을 페이지로 끌어 옵니다.
ListView 작업 메뉴의 데이터 소스 선택 목록에서 LinqDataSource1을 선택합니다.

이렇게 하면 이 연습의 앞부분에서 구성한 LinqDataSource 컨트롤에 ListView가 바인딩됩니다.
ListView 작업 스마트 태그 패널에서 ListView 구성을 클릭합니다.
ListView 구성 대화 상자에서 편집 사용, 삽입 사용, 삭제 사용 및 페이징 사용을 선택합니다.
확인을 클릭합니다.
페이지를 저장합니다.

DropDownList 컨트롤을 추가하여 데이터 필터링

표시할 작업을 선택할 수 있도록 하는 드롭다운 목록을 만들어 ListView 컨트롤에 표시되는 데이터를 필터링할 수 있습니다. 이 예제에서는 활성 상태인 작업 또는 완료된 작업을 표시하는 목록을 만듭니다.

ListView 컨트롤에 Where 절을 자동으로 생성하는 코드를 집어넣어 DropDownList 컨트롤의 선택 항목과 일치하는 레코드만 표시할 수 있습니다.

컨트롤을 추가하여 데이터를 필터링하려면

Default.aspx 페이지를 열거나 이 페이지로 전환하고 소스 뷰로 전환합니다.

form 내에서 ListView 컨트롤 위에 다음 태그를 추가합니다.

<span id="filter">
  Current List Filter: 
  <asp:DropDownList ID="DropDownList1" 
    AutoPostBack="true" 
    >
  <asp:ListItem Text="Active" Value="False" />
  <asp:ListItem Text="Completed" Value="True" />
  </asp:DropDownList>
</span>
<hr id="separator" />

다음 예제와 같이 LinqDataSource 컨트롤에서 AutoGenerateWhereClause 속성을 true로 설정합니다.

<asp:LinqDataSource ID="LinqDataSource1"  
  ContextTypeName="TasksDataContext" 
  TableName="TasksLists" 
  EnableDelete="True" 
  EnableInsert="True" 
  EnableUpdate="True" 
  AutoGenerateWhereClause="true" >

LinqDataSource 컨트롤의 여는 태그와 닫는 태그 사이에서 Where 매개 변수에 대해 다음 태그를 추가합니다.

<WhereParameters>
  <asp:ControlParameter 
    Name="isComplete" 
    ControlID="DropDownList1" 
    Type="Boolean" />
</WhereParameters>

페이지를 저장합니다.

이제 페이지를 테스트하여 선택한 데이터가 페이지에 표시되는지 확인할 수 있습니다.

페이지를 테스트하려면

Ctrl+F5를 눌러 브라우저에서 페이지를 표시합니다.
드롭다운 목록에서 완료를 선택합니다.

완료된 것으로 표시된 작업이 있으면 이러한 작업만 표시됩니다.

페이지에 AJAX 기능 추가

이 단원에서는 페이지에 ScriptManager 컨트롤을 추가하여 ASP.NET의 AJAX 기능을 활성화합니다. 그런 다음 UpdatePanel 컨트롤을 페이지에 추가합니다. 이렇게 하면 전체 페이지 포스트백을 수행하지 않고도 ListView 컨트롤에서 작업을 수행할 수 있습니다.

ScriptManager 컨트롤 추가

UpdatePanel 컨트롤 같은 ASP.NET AJAX 기능을 사용하려면 페이지에 ScriptManager 컨트롤을 추가해야 합니다.

페이지에 ScriptManager 컨트롤을 추가하려면

Default.aspx 페이지를 열거나 이 페이지로 전환하고 소스 뷰로 전환합니다.
도구 상자의 AJAX 확장 탭에서 ScriptManager 컨트롤을 두 번 클릭하여 form 요소 내의 페이지에 추가합니다.

UpdatePanel 컨트롤에 ListView 컨트롤 넣기

이 예제에서는 UpdatePanel 컨트롤 내에 ListView를 집어넣습니다. ListView 컨트롤을 변경하기 위해 전체 포스트백을 수행할 필요는 없습니다.

UpdatePanel 컨트롤 내에 ListView 컨트롤을 집어넣으려면

Default.aspx 페이지에서 여는 <form> 태그 바로 뒤에 다음 태그를 추가합니다.
```
<asp:UpdatePanel ID="UpdatePanel1" >
<ContentTemplate>
```
닫는 </form> 태그 바로 앞에 다음 코드를 추가합니다.
```
</ContentTemplate>
</asp:UpdatePanel>
```
이 코드에서는 ListView 및 DropDownList 컨트롤 주위에 UpdatePanel 컨트롤을 집어넣습니다.
페이지를 저장합니다.

이제 페이지를 다시 테스트할 수 있습니다.

페이지를 테스트하려면

Ctrl+F5를 눌러 브라우저에서 페이지를 봅니다.

필터에서 활성 또는 완료를 선택하면 전체 포스트백이 발생하지 않으면 ListView에서는 깜빡임 없이 업데이트된 데이터 목록을 표시합니다.

다음 단계

이 연습에서는 데이터베이스의 작업을 추가, 수정 및 삭제하기 위해 LinqDataSource 컨트롤을 사용하여 페이지에 ListView를 추가하는 방법에 대해 살펴보았습니다. 그런 다음 UpdatePanel 컨트롤을 사용하여 AJAX 기능을 추가했습니다.

연습: 사용자 지정 비즈니스 개체에 데이터 바인딩 및 연습: Visual Studio에서 마스터/세부 사항 웹 페이지 만들기 같은 연습에서 데이터베이스로 작업하는 방법에 대한 자세한 내용을 확인할 수 있습니다.

참고 항목

개념

LinqDataSource 웹 서버 컨트롤 개요

ASP.NET AJAX 개요

부분 페이지 렌더링 개요

다음을 통해 공유

연습: AJAX 사용 데이터 응용 프로그램 만들기

사전 요구 사항

웹 사이트 만들기

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

새 SQL Server 데이터베이스 만들기

프로젝트에 데이터베이스를 추가하려면

데이터베이스에 대한 스키마 및 샘플 데이터 만들기

데이터베이스에 대한 스키마 및 샘플 데이터를 만들려면

데이터 액세스 컨트롤 만들기

SQL 데이터 컨텍스트 개체에 Tasks 데이터베이스 매핑

TasksList 테이블에 대한 클래스를 만들려면

LinqDataSource 컨트롤 만들기 및 구성

LinqDataSource 컨트롤을 만들고 구성하려면

데이터 소스 컨트롤 사용

ListView 컨트롤을 사용하여 데이터 표시

페이지에 ListView 컨트롤을 추가하려면

DropDownList 컨트롤을 추가하여 데이터 필터링

컨트롤을 추가하여 데이터를 필터링하려면

페이지를 테스트하려면

페이지에 AJAX 기능 추가

ScriptManager 컨트롤 추가

페이지에 ScriptManager 컨트롤을 추가하려면

UpdatePanel 컨트롤에 ListView 컨트롤 넣기

UpdatePanel 컨트롤 내에 ListView 컨트롤을 집어넣으려면

페이지를 테스트하려면

다음 단계

참고 항목

개념

추가 리소스