ASP.NET 웹 페이지 데이터 표시 소개Introducing ASP.NET Web Pages - Displaying Data

만든 사람 Tom FitzMackenby Tom FitzMacken

이 자습서에서는 WebMatrix에서 데이터베이스를 만드는 방법과 ASP.NET 웹 페이지 (Razor)를 사용할 때 페이지에 데이터베이스 데이터를 표시 하는 방법을 보여 줍니다.This tutorial shows you how to create a database in WebMatrix and how to display database data in a page when you use ASP.NET Web Pages (Razor). ASP.NET 웹 페이지 프로그래밍에 대 한 소개를통해 시리즈를 완료 했다고 가정 합니다.It assumes you have completed the series through Introduction to ASP.NET Web Pages Programming.

학습할 내용:What you'll learn:

  • WebMatrix 도구를 사용 하 여 데이터베이스 및 데이터베이스 테이블을 만드는 방법How to use WebMatrix tools to create a database and database tables.
  • WebMatrix 도구를 사용 하 여 데이터베이스에 데이터를 추가 하는 방법입니다.How to use WebMatrix tools to add data to a database.
  • 페이지의 데이터베이스에서 데이터를 표시 하는 방법How to display data from the database on a page.
  • ASP.NET 웹 페이지에서 SQL 명령을 실행 하는 방법How to run SQL commands in ASP.NET Web Pages.
  • WebGrid 도우미를 사용자 지정 하 여 데이터 표시를 변경 하 고 페이징 및 정렬을 추가 하는 방법입니다.How to customize the WebGrid helper to change the data display and to add paging and sorting.

설명 하는 기능/기술:Features/technologies discussed:

  • WebMatrix 데이터베이스 도구.WebMatrix database tools.
  • 도우미를 WebGrid 합니다.WebGrid helper.

만들 내용What You'll Build

이전 자습서에서는 Razor 구문 및 도우미에 대 한 기본 사항에 ASP.NET 웹 페이지 (cshtml 파일)를 도입 했습니다.In the previous tutorial, you were introduced to ASP.NET Web Pages (.cshtml files), to the basics of Razor syntax, and to helpers. 이 자습서에서는 나머지 시리즈에 사용할 실제 웹 응용 프로그램을 만들기 시작 합니다.In this tutorial, you'll begin creating the actual web application that you'll use for the rest of the series. 앱은 영화에 대 한 정보를 보고 추가, 변경 및 삭제할 수 있는 간단한 영화 응용 프로그램입니다.The app is a simple movie application that lets you view, add, change, and delete information about movies.

이 자습서를 완료 하면이 페이지와 같은 영화 목록을 볼 수 있습니다.When you're done with this tutorial, you'll be able to view a movie listing that looks like this page:

CSS 클래스 이름으로 설정 된 매개 변수를 포함 하는 WebGrid 표시

하지만 시작 하려면 데이터베이스를 만들어야 합니다.But to begin, you have to create a database.

데이터베이스에 대 한 간략 한 소개A Very Brief Introduction to Databases

이 자습서에서는 데이터베이스에 대 한 briefest 소개만 제공 합니다.This tutorial will provide only the briefest introduction to databases. 데이터베이스 환경이 있는 경우이 짧은 섹션을 건너뛸 수 있습니다.If you have database experience, you can skip this short section.

데이터베이스에는 정보 — (예: 고객, 주문, 공급 업체 테이블 또는 학생, 교사, 수업 및 학점)를 포함 하는 테이블이 하나 이상 포함 되어 있습니다.A database contains one or more tables that contain information — for example, tables for customers, orders, and vendors, or for students, teachers, classes, and grades. 구조적으로 데이터베이스 테이블은 스프레드시트와 비슷합니다.Structurally, a database table is like a spreadsheet. 일반적인 주소록을 상상해 보세요.Imagine a typical address book. 주소록의 각 항목에 대해 (즉, 각 사람에 대 한) 이름, 성, 주소, 전자 메일 주소 및 전화 번호와 같은 여러 정보를 사용할 수 있습니다.For each entry in the address book (that is, for each person) you have several pieces of information such as first name, last name, address, email address, and phone number.

간단한 표 형태의 샘플 데이터베이스 테이블

(행을 레코드라고도 하며 열을 필드라고도 합니다.)(Rows are sometimes referred to as records, and columns are sometimes referred to as fields.)

대부분의 데이터베이스 테이블에 대해 테이블에는 고객 번호, 계좌 번호 등과 같은 고유한 값을 포함 하는 열이 있어야 합니다.For most database tables, the table has to have a column that contains a unique value, like a customer number, account number, and so on. 이 값을 테이블의 기본 키라고 하며,이 값을 사용 하 여 테이블의 각 행을 식별 합니다.This value is known as the table's primary key, and you use it to identify each row in the table. 이 예에서 ID 열은 이전 예제에 표시 된 주소록의 기본 키입니다.In the example, the ID column is the primary key for the address book shown in the previous example.

웹 응용 프로그램에서 수행 하는 작업의 대부분은 데이터베이스에서 정보를 읽고 페이지에 표시 하는 것으로 구성 됩니다.Much of the work you do in web applications consists of reading information out of the database and displaying it on a page. 또한 사용자 로부터 정보를 수집 하 여 데이터베이스에 추가 하거나 이미 데이터베이스에 있는 레코드를 수정 하는 경우가 많습니다.You'll also often gather information from users and add it to a database, or you'll modify records that are already in the database. (이 자습서 집합의 과정에서 이러한 모든 작업을 다룹니다.)(We'll cover all of these operations in the course of this tutorial set.)

데이터베이스 작업은 있으므로 매우 복잡할 수 있으며 전문 지식이 필요할 수 있습니다.Database work can be enormously complex and can require specialized knowledge. 그러나이 자습서에서는 기본 개념을 이해 해야 합니다 .이 개념은 모든 사용자에 게 설명 됩니다.For this tutorial set, though, you have to understand only basic concepts, which will all be explained as you go.

데이터베이스 만들기Creating a Database

WebMatrix에는 데이터베이스를 쉽게 만들고 데이터베이스에서 테이블을 만들 수 있도록 하는 도구가 포함 되어 있습니다.WebMatrix includes tools that make it easy to create a database and to create tables in the database. 데이터베이스의 구조를 데이터베이스의 스키마라고 합니다. 이 자습서를 설정 하는 경우 동영상 — 하나의 테이블만 있는 데이터베이스를 만듭니다.(The structure of a database is referred to as the database's schema.) For this tutorial set, you'll create a database that has only one table in it — Movies.

아직 수행 하지 않은 경우 WebMatrix를 열고 이전 자습서에서 만든 WebPagesMovies 사이트를 엽니다.Open WebMatrix if you haven't already done so, and open the WebPagesMovies site that you created in the previous tutorial.

왼쪽 창에서 데이터베이스 작업 영역을 클릭 합니다.In the left pane, click the Database workspace.

WebMatrix 데이터베이스 작업 영역 탭

리본은 데이터베이스 관련 태스크를 표시 하도록 변경 됩니다.The ribbon changes to show database-related tasks. 리본에서 새 데이터베이스를 클릭 합니다.In the ribbon, click New Database.

WebMatrix 리본의 ' 새 데이터베이스 ' 단추

WebMatrix는 사이트 — webstel.sdf와 동일한 이름을 가진 SQL Server CE 데이터베이스 ( .sdf 파일)를 만듭니다.WebMatrix creates a SQL Server CE database (an .sdf file) that has the same name as your site — WebPagesMovies.sdf. 여기서는이 작업을 수행 하지 않지만 확장명이 .sdf 인 경우 파일 이름을 원하는 이름으로 바꿀 수 있습니다.(You won't do this here, but you can rename the file to anything you like, as long as it has an .sdf extension.)

테이블 만들기Creating a Table

리본에서 새 테이블을 클릭 합니다.In the ribbon, click New Table. WebMatrix 새 탭에서 테이블 디자이너를 엽니다. 새 테이블 옵션을 사용할 수 없는 경우 왼쪽의 트리 뷰에서 새 데이터베이스를 선택 해야 합니다.WebMatrix opens the table designer in a new tab. (If the New Table option isn't available, make sure that the new database is selected in the tree view on the left.)

WebMatrix 리본의 ' 새 테이블 ' 단추

위쪽의 텍스트 상자 (워터 마크에 "테이블 이름 입력"이 표시 됨)에 "영화"를 입력 합니다.In the text box at the top (where the watermark says "Enter table name"), enter "Movies".

WebMatrix 데이터베이스 디자이너에 테이블 이름 입력

테이블 이름 아래의 창은 개별 열을 정의 하는 위치입니다.The pane underneath the table name is where you define individual columns. 이 자습서의 영화 테이블에는 ID, 제목, 장르연도열만 생성 합니다.For the Movies table in this tutorial, you'll create only a few columns: ID, Title, Genre, and Year.

이름 상자에 "ID"를 입력 합니다.In the Name box, enter "ID". 여기에 값을 입력 하면 새 열에 대 한 모든 컨트롤이 활성화 됩니다.Entering a value here activates all the controls for the new column.

데이터 형식 목록으로 탭 하 고 int를 선택 합니다. 이 값은 ID 열에 정수 (숫자) 데이터를 포함 하도록 지정 합니다.Tab to the Data Type list and choose int. This value specifies that the ID column will contain integer (number) data.

Note

여기서는 더 이상 호출 하지 않지만 표준 Windows 키보드 제스처를 사용 하 여이 표를 탐색할 수 있습니다.We won't call it out any more here (much), but you can use standard Windows keyboard gestures to navigate in this grid. 예를 들어 필드 사이에서 tab 키를 누르면 목록에서 항목을 선택 하기 위해 입력을 시작할 수 있습니다.For example, you can tab between fields, you can just start typing in order to select an item in a list, and so on.

기본값 상자를 지나서 탭 합니다. 즉, 비워 둡니다.Tab past the Default Value box (that is, leave it blank). 기본 키 로 Tab 키를 누르고 선택 합니다.Tab to the Is Primary Key check box and select it. 이 옵션은 ID 열에 개별 행을 식별 하는 데이터가 포함 되도록 데이터베이스에 지시 합니다.This option tells the database that the ID column will contain the data that identifies individual rows. 즉, 각 행에는 해당 행을 찾는 데 사용할 수 있는 ID 열에 고유한 값이 있습니다.(That is, each row will have a unique value in the ID column that you can use to find that row.)

Id 옵션 선택 합니다.Choose the Is Identity option. 이 옵션은 데이터베이스에 각 새 행에 대 한 다음 일련 번호를 자동으로 생성 하도록 지시 합니다.This option tells the database that it should automatically generate the next sequential number for each new row. Is Identity 옵션은 기본 키 옵션을 선택한 경우에만 사용할 수 있습니다.(The Is Identity option works only if you've also selected the Is Primary Key option.)

다음 표 형태 창의 행을 클릭 하거나 Tab 키를 두 번 눌러 현재 행을 마칩니다.Click in the next grid row, or press Tab twice to finish the current row. 두 제스처는 현재 행을 저장 하 고 다음 항목을 시작 합니다.Either gesture saves the current row and starts the next one. 이제 기본값 열에 Null이 표시 됩니다.Notice that the Default Value column now says Null. 기본값은 기본값입니다 .이 경우에는에 대 한 값입니다.(Null is the default value for the default value, so to speak.)

ID 열을 정의 하는 작업을 마치면 디자이너는 다음 그림과 같이 표시 됩니다.When you've finished defining the new ID column, the designer will look like this illustration:

WebMatrix 데이터베이스 디자이너에서 영화 테이블의 ID 열을 정의한 후

다음 열을 만들려면 이름 열에서 상자를 클릭 합니다.To create the next column, click in the box in the Name column. 열에 대해 "Title"을 입력 한 다음 데이터 형식 값으로 nvarchar 를 선택 합니다.Enter "Title" for the column and then select nvarchar for the Data Type value. Nvarchar 의 "var" 부분은이 열에 대 한 데이터가 레코드에 대 한 레코드에 따라 달라질 수 있는 문자열이 되도록 데이터베이스에 지시 합니다.The "var" part of nvarchar tells the database that the data for this column will be a string whose size might vary from record to record. "N" 접두사는 "국가"를 나타내며이는 필드에서 문자 데이터를 입력할 수 있습니다. 즉, 필드에 유니코드 데이터가 포함 됩니다.(The "n" prefix represents "national," which indicates that the field can hold character data for any alphabet or writing system — that is, the field holds Unicode data.)

Nvarchar를 선택 하면 필드의 최대 길이를 입력할 수 있는 다른 상자가 표시 됩니다.When you choose nvarchar, another box appears where you can enter the maximum length for the field. 50을 입력 합니다 .이 자습서에서 작업할 영화 제목은 50 자 보다 깁니다.Enter 50, on the assumption that no movie title that you'll work with in this tutorial will be longer than 50 characters.

기본값 을 건너뛰고 null 허용 옵션을 선택 취소 합니다.Skip Default Value and clear the Allow Nulls option. 데이터베이스가 제목이 없는 데이터베이스에 입력 되는 것을 허용 하지 않습니다.You don't want the database to allow any movies to be entered into the database that don't have a title.

작업을 완료 하 고 다음 행으로 이동 하면 디자이너는 다음 그림과 같습니다.When you're done and move to the next row, the designer looks like this illustration:

WebMatrix 데이터베이스 디자이너에서 영화 테이블의 제목 열을 정의한 후

이러한 단계를 반복 하 여 길이를 제외 하 고 "장르" 라는 열을 만들어 30으로 설정 합니다.Repeat these steps to create a column named "Genre", except for the length, set it to just 30.

"Year" 라는 다른 열을 만듭니다.Create another column named "Year." 데이터 형식에 대해 nchar ( nvarchar아님)를 선택 하 고 길이를 4로 설정 합니다.For the data type, choose nchar (not nvarchar) and set the length to 4. 연도에는 "1995" 또는 "2010"과 같은 4 자리 숫자를 사용 하므로 가변 크기 열이 필요 하지 않습니다.For the year, you're going to use a 4-digit number like "1995" or "2010", so you don't require a variable-sized column.

완성 된 디자인은 다음과 같습니다.Here's what the finished design looks like:

모든 필드가 영화 테이블에 대해 정의 된 후 WebMatrix 데이터베이스 디자이너

Ctrl + S를 누르거나 빠른 실행 도구 모음에서 저장 단추를 클릭 합니다.Press Ctrl+S or click the Save button in the Quick Access toolbar. 탭을 닫아 데이터베이스 디자이너를 닫습니다.Close the database designer by closing the tab.

몇 가지 예제 데이터 추가Adding Some Example Data

이 자습서 시리즈의 뒷부분에서는 폼에 새 동영상을 입력할 수 있는 페이지를 만듭니다.Later in this tutorial series you'll create a page where you can enter new movies in a form. 그러나 지금은 페이지에 표시할 수 있는 몇 가지 예제 데이터를 추가할 수 있습니다.For now, however, you can add some example data that you can then display on a page.

WebMatrix의 데이터베이스 작업 영역에서 이전에 만든 .sdf 파일을 보여 주는 트리가 있습니다.In the Database workspace in WebMatrix, notice that there's a tree that shows you the .sdf file you created earlier. .sdf 파일의 노드를 연 다음 테이블 노드를 엽니다.Open the node for your new .sdf file, and then open the Tables node.

트리를 사용 하 여 영화를 연 WebMatrix 데이터베이스 작업 영역 테이블

동영상 노드를 마우스 오른쪽 단추로 클릭 한 다음 데이터를 선택 합니다.Right-click the Movies node and then choose Data. WebMatrix는 동영상 테이블에 대 한 데이터를 입력할 수 있는 그리드를 엽니다.WebMatrix opens a grid where you can enter data for the Movies table:

WebMatrix의 데이터베이스 항목 그리드 (비어 있음)

Title 열을 클릭 하 고 "When Harry Sally"을 입력 합니다.Click the Title column and enter "When Harry Met Sally". Tab 키를 사용 하 여 장르 열로 이동 하 고 "Romantic 코미디"를 입력 합니다.Move to the Genre column (you can use the Tab key) and enter "Romantic Comedy". Year 열로 이동 하 고 "1989"을 입력 합니다.Move to the Year column and enter "1989":

한 레코드를 포함 하는 WebMatrix의 데이터베이스 입력 표

Enter 키를 누르고, WebMatrix는 새 영화를 저장 합니다.Press Enter, and WebMatrix saves the new movie. ID 열이 채워져 있는지 확인 합니다.Notice that the ID column has been filled in.

하나의 레코드와 자동 생성 된 ID가 있는 WebMatrix의 데이터베이스 입력 그리드

다른 영화를 입력 합니다 (예: "바람", "드라마", "1939").Enter another movie (for example, "Gone with the Wind", "Drama", "1939"). ID 열이 다시 채워집니다.The ID column is filled in again:

두 개의 레코드와 자동 생성 Id가 있는 WebMatrix의 데이터베이스 입력 표

세 번째 영화를 입력 합니다 (예: "Ghostbusters", "코미디").Enter a third movie (for example, "Ghostbusters", "Comedy"). 실험으로 Year 열을 비워 두고 enter 키를 누릅니다.As an experiment, leave the Year column blank and then press Enter. Null 허용 옵션을 선택 취소 했기 때문에 데이터베이스에 오류가 표시 됩니다.Because you unselected the Allow Nulls option, the database shows an error:

필요한 열 값을 비워 두면 ' 잘못 된 데이터 ' 오류가 표시 됨

확인 을 클릭 하 여 뒤로 돌아가서 항목 ("Ghostbusters"의 연도는 1984)을 수정 하 고 enter 키를 누릅니다.Click OK to go back and fix the entry (the year for "Ghostbusters" is 1984), and then press Enter.

8 가지가 될 때까지 여러 영화를 입력 합니다.Fill in several movies until you have 8 or so. (8을 입력 하면 나중에 페이징 작업을 더 쉽게 수행할 수 있습니다.(Entering 8 makes it easier to work with paging later. 그러나 너무 많은 경우 지금은 몇 가지만 입력 하세요. 실제 데이터는 중요 하지 않습니다.But if that's too many, enter just a few for now.) The actual data doesn't matter.

두 레코드를 포함 하는 WebMatrix의 데이터베이스 입력 표

모든 영화를 오류 없이 입력 한 경우 ID 값은 순차적입니다.If you entered all the movies without any errors, the ID values are sequential. 불완전 한 동영상 레코드를 저장 하려고 하면 ID 번호가 순차적이 지 않을 수 있습니다.If you tried to save an incomplete movie record, the ID numbers might not be sequential. 그렇다면 이것이 괜찮습니다.If so, that's okay. 이 숫자에는 내재 된 의미가 없으며, 중요 한 것은 동영상 테이블에서 고유 하다는 점입니다.The numbers don't have any inherent meaning, and the only thing that's important is that they're unique in the Movies table.

데이터베이스 디자이너를 포함 하는 탭을 닫습니다.Close the tab that contains the database designer.

이제이 데이터를 웹 페이지에 표시 하도록 전환할 수 있습니다.Now you can turn to displaying this data on a web page.

WebGrid 도우미를 사용 하 여 페이지에 데이터 표시Displaying Data in a Page by Using the WebGrid Helper

페이지에 데이터를 표시 하려면 WebGrid 도우미를 사용 합니다.To display data in a page, you're going to use the WebGrid helper. 이 도우미는 표 또는 테이블 (행 및 열)에 표시를 생성 합니다.This helper produces a display in a grid or table (rows and columns). 여기에서 볼 수 있듯이 서식 지정 및 기타 기능을 사용 하 여 그리드를 구체화할 수 있습니다.As you'll see, you'll be able refine the grid with formatting and other features.

표를 실행 하려면 몇 줄의 코드를 작성 해야 합니다.To run the grid, you'll have to write a few lines of code. 이러한 몇 가지 줄은이 자습서에서 수행 하는 거의 모든 데이터 액세스에 대 한 일종의 패턴으로 사용 됩니다.These few lines will serve as a kind of pattern for almost all of the data access that you do in this tutorial.

Note

실제로는 페이지에 데이터를 표시 하는 다양 한 옵션이 있습니다. WebGrid 도우미는 하나 뿐입니다.You actually have many options for displaying data on a page; the WebGrid helper is just one. 이 자습서에서는 데이터를 표시 하는 가장 쉬운 방법 이며 매우 유연 하기 때문에이 자습서를 선택 했습니다.We chose it for this tutorial because it's the easiest way to display data and because it's reasonably flexible. 다음 자습서 집합에서 페이지의 데이터로 작업 하는 "수동" 방법을 사용 하 여 데이터를 표시 하는 방법에 대 한 직접 제어를 제공 하는 방법을 확인할 수 있습니다.In the next tutorial set, you'll see how to use a more "manual" way to work with data in the page, which gives you more direct control over how to display the data.

WebMatrix의 왼쪽 창에서 파일 작업 영역을 클릭 합니다.In the left pane in WebMatrix, click the Files workspace.

만든 새 데이터베이스는 App_Data 폴더에 있습니다.The new database you created is in the App_Data folder. 폴더가 아직 없는 경우 WebMatrix는 새 데이터베이스에 대해 해당 폴더를 만들었습니다.If the folder didn't already exist, WebMatrix created it for your new database. 이전에 도우미를 설치 했을 때 폴더가 존재 했을 수 있습니다.(The folder might have existed if you'd previously installed helpers.)

트리 뷰에서 웹 사이트의 루트를 선택 합니다.In the tree view, select the root of the website. 웹 사이트의 루트를 선택 해야 합니다. 그렇지 않으면 새 파일이 App_Data 폴더에 추가 될 수 있습니다.You must select the root of the website; otherwise, the new file might be added to the App_Data folder.

리본에서 새로 만들기를 클릭 합니다.In the ribbon, click New. 파일 형식 선택 상자에서 CSHTML를 선택 합니다.In the Choose a File Type box, choose CSHTML.

이름 상자에서 새 페이지의 이름을 "동영상이. cshtml"로 합니다.In the Name box, name the new page "Movies.cshtml":

' 동영상 ' 페이지를 표시 하는 ' 파일 형식 선택 ' 대화 상자

확인 단추를 클릭합니다.Click the OK button. WebMatrix는 일부 기본 요소가 포함 된 새 파일을 엽니다.WebMatrix opens a new file with some skeleton elements in it. 먼저 데이터베이스에서 데이터를 가져오는 코드를 작성 합니다.First you'll write some code to go get the data from the database. 그런 다음 페이지에 태그를 추가 하 여 실제로 데이터를 표시 합니다.Then you'll add markup to the page to actually display the data.

데이터 쿼리 코드 작성Writing the Data Query Code

페이지 맨 위에서 @{} 문자 사이에 다음 코드를 입력 합니다.At the top of the page, between the @{ and } characters, enter the following code. (여는 중괄호와 닫는 중괄호 사이에이 코드를 입력 해야 합니다.)(Make sure that you enter this code between the opening and closing braces.)

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

첫 번째 줄은 앞에서 만든 데이터베이스를 엽니다 .이 데이터베이스는 데이터베이스를 사용 하 여 작업을 수행 하기 전에 항상 첫 번째 단계입니다.The first line opens the database that you created earlier, which is always the first step before doing something with the database. 열려는 데이터베이스의 Database.Open 메서드 이름을 알려 줍니다.You tell the Database.Open method name of the database to open. 이름에는 .sdf 를 포함 하지 않습니다.Notice that you don't include .sdf in the name. Open 메서드는 .sdf 파일 (즉, webpagesmovies .sdf)을 찾고 있으며 .sdf 파일이 App_Data 폴더에 있는지를 전제로 합니다.The Open method assumes that it's looking for an .sdf file (that is, WebPagesMovies.sdf) and that the .sdf file is in the App_Data folder. (이전에는 앱_데이터 폴더를 예약 했습니다 .이 시나리오는 ASP.NET에서 해당 이름에 대 한 가정을 수행 하는 위치 중 하나입니다.)(Earlier we noted that the App_Data folder is reserved; this scenario is one of the places where ASP.NET makes assumptions about that name.)

데이터베이스를 열 때이에 대 한 참조는 db라는 변수에 저장 됩니다.When the database is opened, a reference to it is put into the variable named db. (임의의 이름을 지정할 수 있음) db 변수는 데이터베이스와의 상호 작용을 종료 하는 방법입니다.(Which could be named anything.) The db variable is how you'll end up interacting with the database.

두 번째 줄은 실제로 Query 메서드를 사용 하 여 데이터베이스 데이터를 인출 합니다.The second line actually fetches the database data by using the Query method. 이 코드가 작동 하는 방식 확인: db 변수는 열린 데이터베이스에 대 한 참조를 포함 하 고 db 변수 (db.Query)를 사용 하 여 Query 메서드를 호출 합니다.Notice how this code works: the db variable has a reference to the opened database, and you invoke the Query method by using the db variable (db.Query).

쿼리 자체는 SQL Select 문입니다.The query itself is a SQL Select statement. SQL에 대 한 약간의 배경 정보는 뒷부분에서 설명 합니다. 문에서 Movies는 쿼리할 테이블을 식별 합니다.(For a little background about SQL, see the explanation later.) In the statement, Movies identifies the table to query. * 문자는 쿼리에서 테이블의 모든 열을 반환 하도록 지정 합니다.The * character specifies that the query should return all the columns from the table. 열을 쉼표로 구분 하 여 나열할 수도 있습니다.(You could also list columns individually, separated by commas.)

쿼리의 결과 (있는 경우)가 반환 되 고 selectedData 변수에서 사용할 수 있게 됩니다.The results of the query, if any, are returned and made available in the selectedData variable. 마찬가지로 변수 이름을 지정할 수 있습니다.Again, the variable could be named anything.

마지막으로 세 번째 줄은 WebGrid 도우미의 인스턴스를 사용 하도록 ASP.NET에 지시 합니다.Finally, the third line tells ASP.NET that you want to use an instance of the WebGrid helper. new 키워드를사용 하 여 도우미 개체를 만들고 selectedData 변수를 통해 쿼리 결과를 전달 합니다.You create (instantiate) the helper object by using the new keyword and pass it the query results via the selectedData variable. WebGrid 개체는 데이터베이스 쿼리의 결과와 함께 grid 변수에 제공 됩니다.The new WebGrid object, along with the results of the database query, are made available in the grid variable. 실제로 페이지에 데이터를 표시 하는 데 시간이 조금 더 필요 합니다.You'll need that result in a moment to actually display the data in the page.

이 단계에서 데이터베이스가 열리고, 원하는 데이터를 얻 었으 며, 해당 데이터를 사용 하 여 WebGrid 도우미를 준비 했습니다.At this stage, the database has been opened, you've gotten the data you want, and you've prepared the WebGrid helper with that data. 다음으로 페이지에서 태그를 만듭니다.Next is to create the markup in the page.

Tip

SQL(구조적 쿼리 언어)Structured Query Language (SQL)

SQL은 데이터베이스에서 데이터를 관리 하기 위한 대부분의 관계형 데이터베이스에 사용 되는 언어입니다.SQL is a language that's used in most relational databases for managing data in a database. 여기에는 데이터를 검색 하 고 업데이트 하는 데 사용할 수 있는 명령이 포함 되어 있으며,이를 통해 데이터베이스 테이블에서 데이터를 만들고 수정 하 고 관리할 수 있습니다.It includes commands that let you retrieve data and update it, and that let you create, modify, and manage data in database tables. SQL은 프로그래밍 언어 (예 C#:)와 다릅니다.SQL is different than a programming language (like C#). SQL을 사용 하면 데이터베이스에서 원하는 작업을 수행 하 고, 데이터를 가져오거나 작업을 수행 하는 방법을 파악 하는 데이터베이스 작업입니다.With SQL, you tell the database what you want, and it's the database's job to figure out how to get the data or perform the task. 다음은 몇 가지 SQL 명령의 예입니다.Here are examples of some SQL commands and what they do:

Select * From Movies

SELECT ID, Name, Price FROM Product WHERE Price > 10.00 ORDER BY Name

첫 번째 Select 문은 동영상 테이블에서 *로 지정 된 모든 열을 가져옵니다.The first Select statement gets all the columns (specified by *) from the Movies table.

두 번째 Select 문은 Product 테이블에서 price 열 값이 10 보다 많은 레코드에서 ID, 이름 및 가격 열을 인출 합니다.The second Select statement fetches the ID, Name, and Price columns from records in the Product table whose Price column value is more than 10. 이 명령은 Name 열의 값을 기준으로 결과를 알파벳 순서로 반환 합니다.The command returns the results in alphabetical order based on the values of the Name column. 가격 기준과 일치 하는 레코드가 없는 경우이 명령은 빈 집합을 반환 합니다.If no records match the price criteria, the command returns an empty set.

INSERT INTO Product (Name, Description, Price) VALUES ('Croissant', 'A flaky delight', 1.99)

이 명령은 Product 테이블에 새 레코드를 삽입 하 고 Name 열을 "크 라 상"로 설정 하 고 Description 열을 "a 부실 즐거움"로 설정 하 고 price를 1.99으로 설정 합니다.This command inserts a new record into the Product table, setting the Name column to "Croissant", the Description column to "A flaky delight", and the price to 1.99.

숫자가 아닌 값을 지정 하는 경우이 값은에서 C#와 같이 작은따옴표로 묶여 있습니다.Notice that when you're specifying a non-numeric value, the value is enclosed in single quotation marks (not double quotation marks, as in C#). 이러한 따옴표는 텍스트 또는 날짜 값에는 사용할 수 있지만 숫자 앞뒤에는 사용할 수 없습니다.You use these quotation marks around text or date values, but not around numbers.

DELETE FROM Product WHERE ExpirationDate < '01/01/2008'

이 명령은 만료 날짜 열이 2008 년 1 월 1 일 이전인 Product 테이블의 레코드를 삭제 합니다.This command deletes records in the Product table whose expiration date column is earlier than January 1, 2008. 이 명령은 Product 테이블에 이러한 열이 있다고 가정 합니다. 날짜는 여기에 MM/DD/YYYY 형식으로 입력 되지만 로캘에 사용 되는 형식으로 입력 해야 합니다.(The command assumes that the Product table has such a column, of course.) The date is entered here in MM/DD/YYYY format, but it should be entered in the format that's used for your locale.

InsertDelete 명령은 결과 집합을 반환 하지 않습니다.The Insert and Delete commands don't return result sets. 대신 명령의 영향을 받은 레코드 수를 나타내는 숫자를 반환 합니다.Instead, they return a number that tells you how many records were affected by the command.

이러한 작업 중 일부 (예: 레코드 삽입 및 삭제)의 경우 작업을 요청 하는 프로세스에 데이터베이스에 대 한 적절 한 권한이 있어야 합니다.For some of these operations (like inserting and deleting records), the process that's requesting the operation has to have appropriate permissions in the database. 따라서 프로덕션 데이터베이스의 경우 데이터베이스에 연결할 때 사용자 이름과 암호를 제공 해야 하는 경우가 많습니다.That's why for production databases you often have to supply a user name and password when you connect to the database.

수십 개의 SQL 명령이 있지만 모두 여기에 표시 되는 명령과 같은 패턴을 따릅니다.There are dozens of SQL commands, but they all follow a pattern like the commands you see here. SQL 명령을 사용 하 여 데이터베이스 테이블을 만들고, 테이블의 레코드 수를 계산 하 고, 가격을 계산 하 고, 더 많은 작업을 수행할 수 있습니다.You can use SQL commands to create database tables, count the number of records in a table, calculate prices, and perform many more operations.

데이터를 표시 하는 태그 추가Adding Markup to Display the Data

<head> 요소 내에서 <title> 요소의 내용을 "영화"로 설정 합니다.Inside the <head> element, set contents of the <title> element to "Movies":

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

페이지의 <body> 요소 내에 다음을 추가 합니다.Inside the <body> element of the page, add the following:

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

이것으로 끝입니다.That's it. grid 변수는 이전 코드에서 WebGrid 개체를 만들 때 만든 값입니다.The grid variable is the value you created when you created the WebGrid object in code earlier.

WebMatrix 트리 보기에서 페이지를 마우스 오른쪽 단추로 클릭 하 고 브라우저에서 시작을 선택 합니다.In the WebMatrix tree view, right-click the page and select Launch in browser. 이 페이지와 유사한 내용이 표시 됩니다.You'll see something like this page:

동영상 테이블의 기본 WebGrid 도우미 출력

열 머리글 링크를 클릭 하 여 해당 열을 기준으로 정렬 합니다.Click a column heading link to sort by that column. 제목을 클릭 하 여 정렬할 수 있는 기능은 Webgrid 도우미에 기본 제공 되는 기능입니다.Being able to sort by clicking a heading is a feature that's built into the WebGrid helper.

GetHtml 메서드는 이름에서 알 때 데이터를 표시 하는 태그를 생성 합니다.The GetHtml method, as its name suggests, generates markup that displays the data. 기본적으로 GetHtml 메서드는 HTML <table> 요소를 생성 합니다.By default, the GetHtml method generates an HTML <table> element. (원하는 경우 브라우저에서 페이지의 원본을 확인 하 여 렌더링을 확인할 수 있습니다.)(If you want, you can verify the rendering by looking at the source of the page in the browser.)

그리드 모양 수정Modifying the Look of the Grid

방금 했던 것 처럼 WebGrid 도우미를 사용 하는 것은 쉽지만 결과 표시는 일반입니다.Using the WebGrid helper like you just did is easy, but the resulting display is plain. WebGrid 도우미에는 데이터가 표시 되는 방식을 제어할 수 있는 모든 종류의 옵션이 있습니다.The WebGrid helper has all sorts of options that let you control how the data is displayed. 이 자습서에서 살펴볼 수 있는 방법은 너무 많습니다 .이 섹션에서는 이러한 옵션 중 일부에 대해 설명 합니다.There are far too many to explore in this tutorial, but this section will give you an idea of some of those options. 몇 가지 추가 옵션은이 시리즈의 이후 자습서에서 설명 합니다.A few additional options will be covered in later tutorials in this series.

표시할 개별 열 지정Specifying Individual Columns to Display

시작 하려면 특정 열만 표시 하도록 지정할 수 있습니다.To start, you can specify that you want to display only certain columns. 기본적으로 표 형태 창에는 동영상 테이블의 네 열이 모두 표시 됩니다.By default, as you've seen, the grid shows all four of the columns from the Movies table.

동영상과 파일에서 방금 추가한 @grid.GetHtml() 태그를 다음과 같이 바꿉니다.In the Movies.cshtml file, replace the @grid.GetHtml() markup that you just added with the following:

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

도우미에 표시할 열을 알리기 위해 GetHtml 메서드에 columns 매개 변수를 포함 하 고 열 컬렉션을 전달 합니다.To tell the helper which columns to display, you include a columns parameter for the GetHtml method and pass in a collection of columns. 컬렉션에서 포함할 각 열을 지정 합니다.In the collection, you specify each column to include. grid.Column 개체를 포함 하 여 표시할 개별 열을 지정 하 고 원하는 데이터 열의 이름을 전달 합니다.You specify an individual column to display by including a grid.Column object, and pass in the name of the data column you want. 이러한 열은 SQL 쿼리 결과에 포함 되어야 합니다. WebGrid 도우미가 쿼리에서 반환 되지 않은 열을 표시할 수 없습니다.(These columns must be included in the SQL query results — the WebGrid helper cannot display columns that were not returned by the query.)

브라우저에서 동영상과 페이지를 다시 시작 합니다. 이번에는 다음과 같은 표시를 얻을 수 있습니다 (ID 열이 표시 되지 않음).Launch the Movies.cshtml page in the browser again, and this time you get a display like the following one (notice that no ID column is displayed):

선택한 열만 표시 하는 WebGrid 표시

표 모양 변경Changing the Look of the Grid

열을 표시 하기 위한 몇 가지 옵션이 몇 가지 있습니다 .이 중 일부는이 집합의 이후 자습서에서 살펴봅니다.There are quite a few more options for displaying columns, some of which will be explored in later tutorials in this set. 현재이 섹션에서는 표를 전체적으로 스타일을 지정할 수 있는 방법을 소개 합니다.For now, this section will introduce you to ways in which you can style the grid as a whole.

페이지의 <head> 섹션 내에서 닫는 </head> 태그 바로 앞에 다음 <style> 요소를 추가 합니다.Inside the <head> section of the page, just before the closing </head> tag, add the following <style> element:

<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 태그는 grid, head등의 클래스를 정의 합니다.This CSS markup defines classes named grid, head, and so on. 이러한 스타일 정의를 별도의 .css 파일에 넣고 페이지에 연결할 수도 있습니다.You could also put these style definitions in a separate .css file and link that to the page. 실제로는이 자습서의 뒷부분에서이 작업을 수행 합니다. 그러나이 자습서의 작업을 쉽게 수행 하기 위해 데이터를 표시 하는 동일한 페이지 내에 있습니다.(In fact, you'll do that later in this tutorial set.) But to make things easy for this tutorial, they're inside the same page that displays the data.

이제 WebGrid 도우미를 가져와 이러한 스타일 클래스를 사용할 수 있습니다.Now you can get the WebGrid helper to use these style classes. 도우미에는이 목적에 대 한 다양 한 속성 (예: tableStyle)이 있습니다. 여기에는 CSS 스타일 클래스 이름을 할당 하 고 해당 클래스 이름은 도우미가 렌더링 하는 태그의 일부로 렌더링 됩니다.The helper has a number of properties (for example, tableStyle) for just this purpose — you assign a CSS style class name to them, and that class name is rendered as part of the markup that's rendered by the helper.

이제이 코드 처럼 보이도록 grid.GetHtml 태그를 변경 합니다.Change the grid.GetHtml markup so that it now looks like this code:

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

tableStyle, headerStylealternatingRowStyle 매개 변수를 GetHtml 메서드에 추가 했으므로 여기에서 새로운 기능을 사용할 수 있습니다.What's new here is that you've added tableStyle, headerStyle, and alternatingRowStyle parameters to the GetHtml method. 이러한 매개 변수는 잠시 전에 추가한 CSS 스타일의 이름으로 설정 되었습니다.These parameters have been set to the names of the CSS styles that you added a moment ago.

페이지를 실행 합니다. 이번에는 이전 보다 훨씬 단순한 표 모양의 표가 표시 됩니다.Run the page, and this time you see a grid that looks much less plain than before:

CSS 클래스 이름으로 설정 된 매개 변수를 포함 하는 WebGrid 표시

GetHtml 메서드가 생성 된 것을 확인 하기 위해 브라우저에서 페이지의 소스를 살펴볼 수 있습니다.To see what the GetHtml method generated, you can look at the source of the page in the browser. 여기서는 자세히 다루지 않지만 tableStyle와 같은 매개 변수를 지정 하 여 표를 통해 다음과 같은 HTML 태그를 생성 하는 것이 중요 합니다.We won't go into detail here, but the important point is that by specifying parameters like tableStyle, you caused the grid to generate HTML tags like the following:

<table class="grid">

<table> 태그에는 이전에 추가한 CSS 규칙 중 하나를 참조 하는 class 특성이 추가 되었습니다.The <table> tag has had a class attribute added to it that references one of the CSS rules that you added earlier. 이 코드는 GetHtml 메서드에 서로 다른 매개 변수를 — 하 여 메서드가 태그와 함께 생성 하는 CSS 클래스를 참조할 수 있도록 하는 기본 패턴을 보여 줍니다.This code shows you the basic pattern — different parameters for the GetHtml method let you reference CSS classes that the method then generates along with the markup. CSS 클래스를 사용 하 여 수행 하는 작업은 사용자에 게 있습니다.What you do with the CSS classes is up to you.

페이징 추가Adding Paging

이 자습서의 마지막 작업으로, 표에 페이징을 추가 합니다.As the last task for this tutorial, you'll add paging to the grid. 지금은 모든 영화를 한 번에 표시 하는 것은 문제가 되지 않습니다.Right now it's no problem to display all your movies at once. 그러나 수백 개의 영화를 추가한 경우 페이지 표시 시간이 오래 걸릴 수 있습니다.But if you added hundreds of movies, the page display would get long.

페이지 코드에서 WebGrid 개체를 만드는 줄을 다음 코드로 변경 합니다.In the page code, change the line that creates the WebGrid object to the following code:

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

이전과의 유일한 차이점은 3으로 설정 된 rowsPerPage 매개 변수를 추가 했다는 것입니다.The only difference from before is that you've added a rowsPerPage parameter that's set to 3.

페이지를 실행 합니다.Run the page. 표는 한 번에 3 개의 행을 표시 하 고 데이터베이스의 영화를 통해 페이지를 이동할 수 있는 탐색 링크를 표시 합니다.The grid displays 3 rows at a time, plus navigation links that let you page through the movies in your database:

페이징을 사용 하 여 WebGrid 표시

다음에서 시작Coming Up Next

다음 자습서에서는 Razor 및 C# 코드를 사용 하 여 양식에서 사용자 입력을 가져오는 방법을 배웁니다.In the next tutorial, you'll learn how to use Razor and C# code to get user input in a form. 제목 또는 장르로 영화를 찾을 수 있도록 동영상 페이지에 검색 상자를 추가 합니다.You'll add a search box to the Movies page so that you can find movies by title or genre.

동영상에 대 한 전체 목록 페이지Complete Listing for Movies Page

@{
    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>

추가 리소스Additional Resources