ASP.NET 웹 페이지 소개 - 데이터 표시

Tom FitzMacken

이 자습서에서는 WebMatrix에서 데이터베이스를 만드는 방법과 ASP.NET 웹 페이지(Razor)를 사용할 때 페이지에 데이터베이스 데이터를 표시하는 방법을 보여 줍니다. ASP.NET 웹 페이지 프로그래밍 소개를 통해 시리즈를 완료한 것으로 가정합니다.

학습할 내용:

• WebMatrix 도구를 사용하여 데이터베이스 및 데이터베이스 테이블을 만드는 방법입니다.
• WebMatrix 도구를 사용하여 데이터베이스에 데이터를 추가하는 방법입니다.
• 페이지에 데이터베이스의 데이터를 표시하는 방법입니다.
• ASP.NET 웹 페이지 SQL 명령을 실행하는 방법
• 도우미를 WebGrid 사용자 지정하여 데이터 표시를 변경하고 페이징 및 정렬을 추가하는 방법입니다.

설명된 기능/기술:

• WebMatrix 데이터베이스 도구.
• WebGrid 도우미.

만들 내용

이전 자습서에서는 razor 구문의 기본 사항 및 도우미에 ASP.NET 웹 페이지(.cshtml 파일)를 소개했습니다. 이 자습서에서는 시리즈의 나머지 부분에 사용할 실제 웹 애플리케이션을 만들기 시작합니다. 이 앱은 영화에 대한 정보를 보고, 추가하고, 변경하고, 삭제할 수 있는 간단한 영화 애플리케이션입니다.

이 자습서를 완료하면 다음 페이지와 같은 영화 목록을 볼 수 있습니다.

하지만 시작하려면 데이터베이스를 만들어야 합니다.

데이터베이스에 대한 매우 간략한 소개

이 자습서에서는 데이터베이스에 대한 간단한 소개만 제공합니다. 데이터베이스 환경이 있는 경우 이 짧은 섹션을 건너뛸 수 있습니다.

데이터베이스에는 정보(예: 고객, 주문 및 공급업체용 테이블 또는 학생, 교사, 수업 및 성적용 테이블)가 포함된 테이블이 하나 이상 포함되어 있습니다. 구조적으로 데이터베이스 테이블은 스프레드시트와 같습니다. 일반적인 주소록을 상상해 보십시오. 주소록의 각 항목(즉, 각 사용자에 대해)에 이름, 성, 주소, 전자 메일 주소 및 전화 번호와 같은 여러 정보가 있습니다.

행을 레코드라고도 하며 열을 필드라고도 합니다.

대부분의 데이터베이스 테이블의 경우 테이블에 고객 번호, 계정 번호 등과 같은 고유한 값이 포함된 열이 있어야 합니다. 이 값을 테이블의 기본 키라고 하며 이를 사용하여 테이블의 각 행을 식별합니다. 예제에서 ID 열은 이전 예제에 표시된 주소록의 기본 키입니다.

웹 애플리케이션에서 수행하는 대부분의 작업은 데이터베이스에서 정보를 읽고 페이지에 표시하는 것으로 구성됩니다. 또한 종종 사용자로부터 정보를 수집하여 데이터베이스에 추가하거나 데이터베이스에 이미 있는 레코드를 수정합니다. (이 자습서 집합의 과정에서 이러한 모든 작업을 다룹니다.)

데이터베이스 작업은 매우 복잡할 수 있으며 전문 지식이 필요할 수 있습니다. 하지만 이 자습서 집합의 경우 기본 개념만 이해해야 합니다. 이 개념은 모두 진행하면서 설명됩니다.

데이터베이스 만들기

WebMatrix에는 데이터베이스를 쉽게 만들고 데이터베이스에 테이블을 만들 수 있는 도구가 포함되어 있습니다. (데이터베이스의 구조를 데이터베이스의 스키마라고 합니다.) 이 자습서 집합에서는 하나의 테이블(영화)만 있는 데이터베이스를 만듭니다.

아직 WebMatrix를 열지 않은 경우 WebMatrix를 열고 이전 자습서에서 만든 WebPagesMovies 사이트를 엽니다.

왼쪽 창에서 데이터베이스 작업 영역을 클릭합니다.

리본이 변경하여 데이터베이스 관련 작업을 표시합니다. 리본에서 새 데이터베이스를 클릭합니다.

WebMatrix는 사이트와 이름이 같은 SQL Server CE 데이터베이스(.sdf 파일)를 만듭니다( WebPagesMovies.sdf). (여기서는 이 작업을 수행하지 않지만 파일의 이름이 .sdf 확장명인 경우 원하는 대로 이름을 바꿀 수 있습니다.)

테이블 만들기

리본에서 새 테이블을 클릭합니다. WebMatrix는 새 탭에서 테이블 디자이너를 엽니다. 새 테이블 옵션을 사용할 수 없는 경우 왼쪽의 트리 뷰에서 새 데이터베이스가 선택되어 있는지 확인합니다.

맨 위에 있는 텍스트 상자(워터마크에 "테이블 이름 입력")에 "Movies"를 입력합니다.

테이블 이름 아래의 창은 개별 열을 정의하는 위치입니다. 이 자습서의 Movies 테이블의 경우 ID, 제목, 장르 및 연도의 몇 가지 열만 만듭니 다.

이름 상자에 "ID"를 입력합니다. 여기에 값을 입력하면 새 열에 대한 모든 컨트롤이 활성화됩니다.

탭에서 데이터 형식 목록으로 이동하고 int를 선택합니다. 이 값은 ID 열에 정수(숫자) 데이터가 포함되도록 지정합니다.

기본값 상자를 지나 탭합니다(즉, 비워 두기). 기본 키 검사 상자로 이동하여 선택합니다. 이 옵션은 ID 열에 개별 행을 식별하는 데이터가 포함되도록 데이터베이스에 알릴 수 있습니다. 즉, 각 행에는 해당 행을 찾는 데 사용할 수 있는 고유 값이 ID 열에 있습니다.

ID 옵션을 선택합니다. 이 옵션은 데이터베이스에 각 새 행에 대해 다음 순차 번호를 자동으로 생성해야 한다는 것을 알려줍니다. ( Is Identity 옵션은 기본 키 임 옵션도 선택한 경우에만 작동합니다.)

다음 표 행을 클릭하거나 Tab 키를 두 번 눌러 현재 행을 마칩니다. 두 제스처 중 하나는 현재 행을 저장하고 다음 행을 시작합니다. 이제 기본값 열에 Null이 표시됩니다. (Null은 기본값의 기본값이므로 말하자면).

새 ID 열 정의를 완료하면 디자이너는 다음 그림과 같이 표시됩니다.

다음 열을 만들려면 이름 열의 상자를 클릭합니다. 열에 "제목"을 입력한 다음 데이터 형식 값으로 nvarchar를 선택합니다. nvarchar의 "var" 부분은 이 열의 데이터가 레코드마다 크기가 다를 수 있는 문자열이 되도록 데이터베이스에 알립니다. ("n" 접두사는 필드가 모든 알파벳 또는 쓰기 시스템의 문자 데이터를 보유할 수 있음을 나타내는 "national"을 나타냅니다. 즉, 필드는 유니코드 데이터를 보유합니다.)

nvarchar를 선택하면 필드의 최대 길이를 입력할 수 있는 다른 상자가 나타납니다. 이 자습서에서 작업할 영화 제목이 50자를 초과하지 않는다는 가정 하에 50을 입력합니다.

기본값을 건너뛰고 Null 허용 옵션을 선택 취소합니다. 데이터베이스에서 제목이 없는 데이터베이스에 영화를 입력하는 것을 허용하지 않습니다.

작업을 완료하고 다음 행으로 이동하면 디자이너는 다음 그림과 같습니다.

길이를 제외하고 "Genre"라는 열을 만들려면 다음 단계를 반복하여 30으로 설정합니다.

"Year"라는 다른 열을 만듭니다. 데이터 형식의 경우 nchar(nvarchar 아님)를 선택하고 길이를 4로 설정합니다. 연도의 경우 "1995" 또는 "2010"와 같은 4자리 숫자를 사용하므로 가변 크기 열이 필요하지 않습니다.

완성된 디자인은 다음과 같습니다.

Ctrl+S를 누르거나 빠른 실행 도구 모음에서 저장 단추를 클릭합니다. 탭을 닫아 데이터베이스 디자이너를 닫습니다.

몇 가지 예제 데이터 추가

이 자습서 시리즈의 뒷부분에서는 양식에 새 영화를 입력할 수 있는 페이지를 만듭니다. 그러나 지금은 페이지에 표시할 수 있는 몇 가지 예제 데이터를 추가할 수 있습니다.

WebMatrix의 데이터베이스 작업 영역에 이전에 만든 .sdf 파일을 보여 주는 트리가 있습니다. 새 .sdf 파일의 노드를 연 다음 테이블 노드를 엽니다.

Movies 노드를 마우스 오른쪽 단추로 클릭한 다음 데이터를 선택합니다. WebMatrix는 Movies 테이블에 대한 데이터를 입력할 수 있는 그리드를 엽니다.

제목 열을 클릭하고 "Harry Met Sally"를 입력합니다. 장르 열(Tab 키를 사용할 수 있습니다)으로 이동하고 "로맨틱 코미디"를 입력합니다. Year 열로 이동하고 "1989"를 입력합니다.

Enter 키를 누르면 WebMatrix가 새 동영상을 저장합니다. ID 열이 채워져 있습니다.

다른 영화(예: "바람과 함께 사라지다", "드라마", "1939")를 입력합니다. ID 열이 다시 채워집니다.

세 번째 영화(예: "고스트버스터즈", "코미디")를 입력합니다. 실험으로 Year 열을 비워 두고 Enter 키를 누릅니다. Null 허용 옵션을 선택 취소했기 때문에 데이터베이스에 오류가 표시됩니다.

확인을 클릭하여 돌아가서 항목을 수정한 다음("고스트버스터즈"의 연도는 1984) Enter 키를 누릅니다.

8개 정도가 될 때까지 여러 영화를 채웁니다. (8을 입력하면 나중에 페이징을 더 쉽게 작업할 수 있습니다. 그러나 너무 많은 경우 지금은 몇 개만 입력합니다.) 실제 데이터는 중요하지 않습니다.

오류 없이 모든 영화를 입력한 경우 ID 값은 순차적으로 표시됩니다. 불완전한 영화 레코드를 저장하려고 하면 ID 번호가 순차적이지 않을 수 있습니다. 그렇다면 괜찮습니다. 숫자는 내재된 의미가 없으며, 중요한 것은 Movies 테이블에서 고유하다는 것입니다.

데이터베이스 디자이너가 포함된 탭을 닫습니다.

이제 웹 페이지에 이 데이터를 표시하도록 설정할 수 있습니다.

WebGrid 도우미를 사용하여 페이지에 데이터 표시

페이지에 데이터를 표시하려면 도우미를 WebGrid 사용합니다. 이 도우미는 그리드 또는 테이블(행 및 열)에서 디스플레이를 생성합니다. 보듯이 서식 및 기타 기능을 사용하여 그리드를 구체화할 수 있습니다.

그리드를 실행하려면 몇 줄의 코드를 작성해야 합니다. 이러한 몇 줄은 이 자습서에서 수행하는 거의 모든 데이터 액세스에 대한 일종의 패턴으로 사용됩니다.

WebMatrix의 왼쪽 창에서 파일 작업 영역을 클릭합니다.

만든 새 데이터베이스는 App_Data 폴더에 있습니다. 폴더가 아직 없는 경우 WebMatrix는 새 데이터베이스에 대해 폴더를 만들었습니다. (이전에 도우미를 설치한 경우 폴더가 있었을 수 있습니다.)

트리 뷰에서 웹 사이트의 루트를 선택합니다. 웹 사이트의 루트를 선택해야 합니다. 그렇지 않으면 새 파일이 App_Data 폴더에 추가될 수 있습니다.

리본에서 새로 만들기를 클릭합니다. 파일 형식 선택 상자에서 CSHTML을 선택합니다.

이름 상자에서 새 페이지의 이름을 "Movies.cshtml"로 지정합니다.

확인 단추를 클릭합니다. WebMatrix는 일부 기본 요소가 포함된 새 파일을 엽니다. 먼저 데이터베이스에서 데이터를 가져오는 코드를 작성합니다. 그런 다음 페이지에 태그를 추가하여 실제로 데이터를 표시합니다.

데이터 쿼리 코드 작성

페이지 맨 위에 및 } 문자 사이에 @{ 다음 코드를 입력합니다. (여는 중괄호와 닫는 중괄호 사이에 이 코드를 입력해야 합니다.)

var db = Database.Open("WebPagesMovies");
var selectedData = db.Query("SELECT * FROM Movies");
var grid = new WebGrid(source: selectedData);

첫 번째 줄은 이전에 만든 데이터베이스를 엽니다. 데이터베이스를 사용하여 작업을 수행하기 전에 항상 첫 번째 단계입니다. 열려는 Database.Open 데이터베이스의 메서드 이름을 지정합니다. 이름에 .sdf 를 포함하지 않습니다. 메서드는 Open.sdf 파일(즉, WebPagesMovies.sdf)을 찾고 있으며 .sdf 파일이 App_Data 폴더에 있다고 가정합니다. (앞에서 는 App_Data 폴더가 예약되어 있습니다. 이 시나리오는 ASP.NET 해당 이름에 대해 가정하는 위치 중 하나입니다.)

데이터베이스를 열면 해당 데이터베이스에 대한 참조가 라는 db변수에 배치됩니다. (어떤 이름으로든 지정할 수 있습니다.) 변수는 db 데이터베이스와 상호 작용하게 되는 방법입니다.

두 번째 줄은 실제로 메서드를 사용하여 Query 데이터베이스 데이터를 가져옵니다. 이 코드의 db 작동 방식을 확인합니다. 변수에는 열린 데이터베이스에 대한 참조가 있으며 변수(db.Query)를 사용하여 메서드를 db 호출 Query 합니다.

쿼리 자체는 SQL Select 문입니다. (SQL에 대한 약간의 배경은 나중에 설명을 참조하세요.) 문에서 쿼리 Movies 할 테이블을 식별합니다. 문자는 * 쿼리가 테이블의 모든 열을 반환해야 한다고 지정합니다. 열을 쉼표로 구분하여 개별적으로 나열할 수도 있습니다.

쿼리 결과가 있는 경우 반환되고 변수에서 selectedData 사용할 수 있습니다. 다시 말하지만 변수의 이름은 무엇이든 지정할 수 있습니다.

마지막으로 세 번째 줄은 도우미의 instance 사용하려는 ASP.NET WebGrid 알려줍니다. 키워드(keyword) 사용하여 new 도우미 개체를 만들고 인스턴스화하고 변수를 통해 selectedData 쿼리 결과를 전달합니다. 데이터베이스 쿼리의 결과와 함께 새 WebGrid 개체를 변수에서 grid 사용할 수 있습니다. 페이지에 데이터를 실제로 표시하려면 잠시 시간이 필요합니다.

이 단계에서 데이터베이스가 열리고, 원하는 데이터를 얻었으며, 해당 데이터로 도우미를 WebGrid 준비했습니다. 다음은 페이지에서 태그를 만드는 것입니다.

데이터 표시에 태그 추가

요소 내에서 <head> 요소의 <title> 내용을 "Movies"로 설정합니다.

<head>
    <meta charset="utf-8" />
    <title>Movies</title>
</head>

<body> 페이지의 요소 내에 다음을 추가합니다.

<h1>Movies</h1>
<div>
    @grid.GetHtml()
</div>

이것으로 끝입니다. 변수는 grid 이전에 코드에서 개체를 WebGrid 만들 때 만든 값입니다.

WebMatrix 트리 보기에서 페이지를 마우스 오른쪽 단추로 클릭하고 브라우저에서 시작을 선택합니다. 이 페이지와 같은 내용이 표시됩니다.

열 머리글 링크를 클릭하여 해당 열을 기준으로 정렬합니다. 제목을 클릭하여 정렬할 수 있다는 것은 WebGrid 도우미에 기본 제공되는 기능입니다.

메서드는 GetHtml 이름에서와 같이 데이터를 표시하는 태그를 생성합니다. 기본적으로 메서드는 GetHtml HTML <table> 요소를 생성합니다. (원하는 경우 브라우저에서 페이지의 원본을 확인하여 렌더링을 확인할 수 있습니다.)

눈금 모양 수정

방금 했던 것처럼 도우미를 WebGrid 사용하는 것은 쉽지만 결과 디스플레이는 일반입니다. 도우미에는 WebGrid 데이터가 표시되는 방식을 제어할 수 있는 모든 종류의 옵션이 있습니다. 이 자습서에서는 탐색하기에는 너무 많지만 이 섹션에서는 이러한 옵션 중 일부를 파악할 수 있습니다. 몇 가지 추가 옵션은 이 시리즈의 이후 자습서에서 다룹니다.

표시할 개별 열 지정

시작하려면 특정 열만 표시하도록 지정할 수 있습니다. 기본적으로 보셨듯이 표에는 Movies 테이블의 네 개의 열이 모두 표시됩니다.

Movies.cshtml 파일에서 방금 추가한 태그를 @grid.GetHtml() 다음으로 바꿉니다.

@grid.GetHtml(
    columns: grid.Columns(
        grid.Column("Title"),
        grid.Column("Genre"),
        grid.Column("Year")
    )
)

표시할 열을 도우미에 알리기 위해 메서드에 대한 매개 변수를 columnsGetHtml 포함하고 열 컬렉션을 전달합니다. 컬렉션에서 포함할 각 열을 지정합니다. 개체를 포함하여 grid.Column 표시할 개별 열을 지정하고 원하는 데이터 열의 이름을 전달합니다. (이러한 열은 SQL 쿼리 결과에 WebGrid 포함되어야 합니다. 도우미는 쿼리에서 반환되지 않은 열을 표시할 수 없습니다.)

브라우저에서 Movies.cshtml 페이지를 다시 시작하고, 이번에는 다음과 같은 디스플레이가 표시됩니다(ID 열이 표시되지 않음).

눈금 모양 변경

열을 표시하기 위한 몇 가지 추가 옵션이 있으며, 그 중 일부는 이 집합의 이후 자습서에서 탐색될 예정입니다. 지금은 이 섹션에서 그리드의 스타일을 전체적으로 지정할 수 있는 방법을 소개합니다.

<head> 페이지의 섹션 내에서 닫는 </head> 태그 바로 앞에 다음 <style> 요소를 추가합니다.

<style type="text/css">
  .grid { margin: 4px; border-collapse: collapse; width: 600px; }
  .grid th, .grid td { border: 1px solid #C0C0C0; padding: 5px; }
  .head { background-color: #E8E8E8; font-weight: bold; color: #FFF; }
  .alt { background-color: #E8E8E8; color: #000; }
</style>

이 CSS 태그는 , head등이라는 grid클래스를 정의합니다. 이러한 스타일 정의를 별도의 .css 파일에 넣고 페이지에 연결할 수도 있습니다. (실제로 이 자습서 집합의 뒷부분에서 이 작업을 수행합니다.) 하지만 이 자습서를 쉽게 수행할 수 있도록 데이터를 표시하는 동일한 페이지 내에 있습니다.

이제 도우미가 WebGrid 이러한 스타일 클래스를 사용할 수 있습니다. 도우미에는 이러한 용도로만 여러 속성(예 tableStyle: )이 있습니다. CSS 스타일 클래스 이름을 할당하고 해당 클래스 이름은 도우미가 렌더링하는 태그의 일부로 렌더링됩니다.

grid.GetHtml 이제 다음 코드와 같이 표시되도록 태그를 변경합니다.

@grid.GetHtml(
    tableStyle: "grid",
    headerStyle: "head",
    alternatingRowStyle: "alt",
    columns: grid.Columns(
        grid.Column("Title"),
        grid.Column("Genre"),
        grid.Column("Year")
    )
)

여기서 새로운 점은 메서드에 , headerStyle및 alternatingRowStyle 매개 변수를 추가tableStyle했다는 GetHtml 것입니다. 이러한 매개 변수는 잠시 전에 추가한 CSS 스타일의 이름으로 설정되었습니다.

페이지를 실행하면 이번에는 이전보다 훨씬 덜 평범해 보이는 표가 표시됩니다.

메서드가 GetHtml 생성한 내용을 보려면 브라우저에서 페이지의 원본을 확인할 수 있습니다. 여기서는 자세히 설명하지 않지만 중요한 점은 와 같은 tableStyle매개 변수를 지정하여 그리드가 다음과 같은 HTML 태그를 생성하게 했다는 것입니다.

<table class="grid">

<table> 태그에 이전에 추가한 class CSS 규칙 중 하나를 참조하는 특성이 추가되었습니다. 이 코드는 기본 패턴을 보여 줍니다. 메서드에 GetHtml 대한 다른 매개 변수를 사용하면 메서드가 태그와 함께 생성하는 CSS 클래스를 참조할 수 있습니다. CSS 클래스로 수행하는 작업은 사용자에게 달려 있습니다.

페이징 추가

이 자습서의 마지막 작업으로 표에 페이징을 추가합니다. 지금은 한 번에 모든 영화를 표시하는 것은 문제가되지 않습니다. 그러나 수백 개의 영화를 추가하면 페이지 표시가 길어질 것입니다.

페이지 코드에서 개체를 만드는 줄을 다음 코드로 변경합니다 WebGrid .

var grid = new WebGrid(source: selectedData, rowsPerPage: 3);

이전과 유일한 차이점은 3으로 설정된 매개 변수를 rowsPerPage 추가했다는 것입니다.

페이지를 실행합니다. 표에는 한 번에 3개의 행과 데이터베이스의 영화를 페이지스할 수 있는 탐색 링크가 표시됩니다.

다음 출시 예정

다음 자습서에서는 Razor 및 C# 코드를 사용하여 양식에서 사용자 입력을 가져오는 방법을 알아봅니다. 제목 또는 장르별로 영화를 찾을 수 있도록 영화 페이지에 검색 상자를 추가합니다.

영화 페이지 전체 목록

@{
    var db = Database.Open("WebPagesMovies");
    var selectedData = db.Query("SELECT * FROM Movies");
    var grid = new WebGrid(source: selectedData, rowsPerPage: 3);
}

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Movies</title>
        <style type="text/css">
          .grid { margin: 4px; border-collapse: collapse; width: 600px; }
          .grid th, .grid td { border: 1px solid #C0C0C0; padding: 5px; }
          .head { background-color: #E8E8E8; font-weight: bold; color: #FFF; }
          .alt { background-color: #E8E8E8; color: #000; }
        </style>
    </head>
    <body>
        <h1>Movies</h1>
        <div>
            @grid.GetHtml(
                tableStyle: "grid",
                headerStyle: "head",
                alternatingRowStyle: "alt",
                columns: grid.Columns(
                    grid.Column("Title"),
                    grid.Column("Genre"),
                    grid.Column("Year")
                )
            )
        </div>
    </body>
</html>

추가 리소스

• Razor 구문을 사용하는 ASP.NET 웹 프로그래밍 소개