참고 항목
이 문서의 최신 버전은 아닙니다. 현재 릴리스는 이 문서의 .NET 9 버전을 참조 하세요.
Important
이 정보는 상업적으로 출시되기 전에 실질적으로 수정될 수 있는 시험판 제품과 관련이 있습니다. Microsoft는 여기에 제공된 정보에 대해 어떠한 명시적, 또는 묵시적인 보증을 하지 않습니다.
현재 릴리스는 이 문서의 .NET 9 버전을 참조 하세요.
이 문서는 영화 데이터베이스를 관리하는 기능을 사용하여 ASP.NET Core Blazor 를 빌드하는 기본 사항을 학습하는 영화 데이터베이스 앱 자습서의 여덟 번째 부분입니다Blazor Web App.
자습서의 이 시점까지 전체 앱은 대화형 작업을 사용하도록 설정 되었지만 앱은 샘플 구성 요소에서만 대화형 작업을 채택 했습니다 Counter . 자습서 시리즈의 이 부분에서는 영화 Index 구성 요소에서 대화형 작업을 채택하는 방법을 설명합니다.
Important
앱이 다음 단계에서 실행되고 있지 않은지 확인합니다.
대화형 작업 채택
상호 작용은 구성 요소에 단추 클릭과 같은 C# 코드를 통해 UI 이벤트를 처리할 수 있는 용량이 있음을 의미합니다. 이벤트는 ASP.NET Core 런타임 또는 WebAssembly 기반 Blazor 런타임에 의해 클라이언트의 브라우저에서 서버에서 처리됩니다. 이 자습서에서는 일반적으로 대화형 서버() 렌더링이라고도 하는 대화형 서버 쪽 렌더링(InteractiveServer대화형 SSR)을 채택합니다. 기본적으로 대화형인 CSR(클라이언트 쪽 렌더링)은 참조 설명서에서 Blazor 설명합니다.
대화형 SSR을 사용하면 클라이언트 앱에서 기대하는 것처럼 풍부한 사용자 환경을 사용할 수 있지만 서버 리소스에 액세스하기 위해 API 엔드포인트를 만들 필요가 없습니다. UI 상호 작용은 브라우저와의 실시간 SignalR 연결을 통해 서버에서 처리됩니다. 대화형 페이지의 페이지 콘텐츠는 미리 렌더링됩니다. 여기서 서버의 콘텐츠는 렌더링된 컨트롤에 대한 이벤트 처리기를 사용하도록 설정하지 않고 클라이언트에 처음 생성되고 전송됩니다. 미리 렌더링하면 서버는 초기 요청에 대한 응답으로 가능한 한 빨리 페이지의 HTML UI를 출력하므로 앱이 사용자에게 더 반응할 수 있습니다.
대화형 SSR을 Program 사용하도록 설정하는 파일(Program.cs)의 API를 검토합니다.
Razor구성 요소 서비스는 구성 요소가 서버()에서 정적으로 렌더링하고 대화형 SSRRazor(AddRazorComponents)을 사용하여 코드를 실행할 수 있도록 AddInteractiveServerComponents 앱에 추가됩니다.
builder.Services.AddRazorComponents()
.AddInteractiveServerComponents();
MapRazorComponents 루트 App 구성 요소에 정의된 구성 요소를 지정된 .NET 어셈블리에 매핑하고 라우팅 가능한 구성 요소를 렌더링하고 AddInteractiveServerRenderMode 대화형 SSR을 지원하도록 앱의 SignalR 허브를 구성합니다.
app.MapRazorComponents<App>()
.AddInteractiveServerRenderMode();
자습서 시리즈의 이 시점까지 앱이 영화 구성 요소에 AddInteractiveServerComponentsAddInteractiveServerRenderMode 대한 정적 SSR 기능만 채택했기 때문에 영화 페이지에 대한 호출이 필요하지 않았습니다. 이 문서에서는 영화 Index 구성 요소에서 대화형 기능을 채택하는 방법을 설명합니다.
구성 요소에 대한 렌더링 유형을 설정하는 경우 Blazor 렌더링을 구성 요소의 렌더링 모드라고 합니다. 다음 표에서는 구성 요소를 렌더링하는 데 사용할 수 있는 렌더링 모드를 Razor 보여 Blazor Web App줍니다.
| 속성 | 설명 | 렌더링 위치 | 대화형 |
|---|---|---|---|
| 정적 서버 | 정적 서버 쪽 렌더링(정적 SSR) | 서버 | 문제 |
| 대화형 서버 | 를 사용하는 Blazor Server대화형 서버 쪽 렌더링(대화형 SSR) | 서버 | 예 |
| Interactive WebAssembly | 를 사용하는 Blazor WebAssemblyCSR(클라이언트 쪽 렌더링) | 클라이언트 | 예 |
| 대화형 자동 | 번들이 다운로드된 후 후속 방문 시 처음에는 CSR을 Blazor Server 사용하는 Blazor 대화형 SSR입니다. | 서버, 클라이언트 | 예 |
구성 요소에 렌더링 모드를 적용하기 위해 개발자는 구성 요소 인스턴스 또는 구성 요소 정의에서 지시문 또는 지시문 특성을 사용합니다 @rendermode .
다음 예제에서는 지시문 특성을 사용하여 구성 요소 인스턴스에서 렌더링 모드를
@rendermode설정하는 방법을 보여 줍니다. 다음 예제에서는 부모 채팅(Dialog) 구성 요소에서 가상 대화 상자(Chat) 구성 요소를 사용합니다.파일 내에서 다음을 수행합니다
Components/Pages/Chat.razor.<Dialog @rendermode="InteractiveServer" />다음 예제에서는 지시문을 사용하여 구성 요소 정의
@rendermode에 렌더링 모드를 설정하는 방법을 보여줍니다. 다음 예제에서는 가상 판매 예측() 구성 요소 정의 파일SalesForecast(.razor)에서 렌더링 모드를 설정하는 방법을 보여 줍니다.파일 맨 위에 있는 다음을
Components/Pages/SalesForecast.razor수행합니다.@page "/sales-forecast" @rendermode InteractiveServer
위의 방법을 사용하여 페이지/구성 요소별로 렌더링 모드를 적용할 수 있습니다. 그러나 전체 앱은 루트 구성 요소를 통해 단일 렌더링 모드를 채택한 다음 상속을 통해 로드된 다른 모든 구성 요소의 렌더링 모드를 설정합니다.
이를 페이지/구성 요소별 대화형이 아닌 전역 대화형 작업이라고 합니다. 글로벌 대화형 대화형은 대부분의 앱에 대화형 기능이 필요한 경우에 유용합니다. 전역 대화형 작업은 일반적으로 프로젝트 템플릿에서 App 만든 앱의 루트 구성 요소인 구성 요소를 통해 Blazor Web App 적용됩니다.
참고 항목
렌더링 모드 및 전역 상호 작용에 대한 자세한 내용은 '의 참조 설명서에서 Blazor제공합니다. 이 자습서의 목적을 위해 앱은 페이지/구성 요소별로 대화형 SSR만 채택합니다. 자습서를 마친 후에는 이 앱을 사용하여 다른 구성 요소 렌더링 모드 및 전역 대화형 대화형 위치를 자유롭게 연구할 수 있습니다.
동영상 Index 구성 요소 파일(Components/Pages/MoviePages/Index.razor)을 열고 지시문 바로 다음에 @rendermode 다음 @page 지시문을 추가하여 구성 요소를 대화형으로 만듭니다.
@rendermode InteractiveServer
구성 요소를 대화형으로 만들면 사용자 환경이 어떻게 향상되는지 확인하려면 다음 섹션에서 앱에 세 가지 향상된 기능을 제공해 보겠습니다.
- 동영상
QuickGrid구성 요소에 페이지 매김을 추가합니다. -
QuickGrid구성 요소를 정렬할 수 있도록 합니다. - 제목별로 영화를 필터링하기 위한 HTML 양식을 다음 C# 코드로 바꿉다.
- 서버에서 실행됩니다.
- 기본 연결을 통해 대화형으로 콘텐츠를 렌더링합니다 SignalR .
에 페이지 매김 추가 QuickGrid
QuickGrid 구성 요소는 데이터베이스의 데이터를 페이지할 수 있습니다.
구성 요소(Index)를 Components/Pages/Movies/Index.razor 엽니다. 블록에 PaginationState 인스턴스를 추가합니다 @code . 자습서에서는 데모에 5개의 영화 레코드만 사용하므로 페이지 매김을 보여 주 ItemsPerPage 려면 항목으로 설정합니다2. 일반적으로 표시할 항목 수는 더 높은 값으로 설정되거나 드롭다운 목록을 통해 동적으로 설정됩니다.
private PaginationState pagination = new PaginationState { ItemsPerPage = 2 };
구성 요소의 QuickGridPagination 속성을 다음으로 pagination설정합니다.
- <QuickGrid Class="table" Items="FilteredMovies">
+ <QuickGrid Class="table" Items="FilteredMovies" Pagination="pagination">
구성 요소 아래에 페이지 매김을 위한 UI를 QuickGridPaginator 추가합니다. 다음으로 설정합니다.Paginator.Statepagination
<Paginator State="pagination" />
앱을 실행하고 영화 Index 페이지로 이동합니다. 페이지당 두 개의 동영상에서 영화 항목을 페이지스할 수 있습니다.
구성 요소는 대화형입니다. 페이징이 발생할 수 있도록 페이지가 다시 로드되지 않습니다. 페이징은 브라우저와 서버 간의 연결을 통해 SignalR 라이브로 수행되며, 렌더링된 결과가 표시될 수 있도록 클라이언트로 다시 전송된 상태에서 서버에서 페이징 작업이 수행됩니다.
페이지당 5개 항목과 같이 ItemsPerPage 보다 합리적인 값으로 변경합니다.
- private PaginationState pagination = new PaginationState { ItemsPerPage = 2 };
+ private PaginationState pagination = new PaginationState { ItemsPerPage = 5 };
정렬 QuickGrid
구성 요소(Index)를 Components/Pages/Movies/Index.razor 엽니다.
제목Sortable="true"에 (Sortable)를 추가 PropertyColumn<TGridItem,TProp> 합니다.
- <PropertyColumn Property="movie => movie.Title" />
+ <PropertyColumn Property="movie => movie.Title" Sortable="true" />
열을 선택하여 영화 제목별로 정렬 QuickGrid 할 Title 수 있습니다. 정렬이 수행되도록 페이지가 다시 로드되지 않습니다. 정렬은 연결을 통해 SignalR 라이브로 수행되며, 렌더링된 결과가 클라이언트로 다시 전송된 상태에서 서버에서 정렬 작업이 수행됩니다.
C# 코드 및 대화형 작업을 사용하여 제목별로 검색
자습서 시리즈의 Index 이전 부분에서는 사용자가 제목별로 영화를 필터링할 수 있도록 구성 요소가 수정되었습니다. 이 작업은 다음을 통해 수행되었습니다.
- 사용자의 타이틀 검색 문자열을 쿼리 문자열 필드-값 쌍으로 사용하여 서버에 GET 요청을 발급하는 HTML 양식을 추가합니다(예
?titleFilter=road+warrior: 사용자가 "road warrior"를 검색하는 경우). - 쿼리 문자열에서 타이틀 검색 문자열을 가져오고 이를 사용하여 데이터베이스의 레코드를 필터링하는 코드를 구성 요소에 추가합니다.
이전 방법은 클라이언트와 서버 간의 유일한 상호 작용이 HTTP 요청을 통해서만 발생하는 정적 SSR을 채택하는 구성 요소에 효과적입니다. 클라이언트와 서버 간에 라이브 SignalR 연결이 없었으며, 서버의 앱이 구성 요소의 UI에서 사용자의 작업을 기반으로 대화형으로 C# 코드를 처리하고 콘텐츠를 반환할 수 있는 방법이 없었습니다.
이제 구성 요소가 대화형이므로 바인딩 및 이벤트 처리를 위한 기능을 통해 향상된 사용자 환경을 Blazor 제공할 수 있습니다.
사용자가 트리거하여 데이터베이스의 영화 레코드를 필터링할 수 있는 대리자 이벤트 처리기를 추가합니다. 메서드는 속성을 사용하여 TitleFilter 작업을 수행합니다. 사용자가 지우 TitleFilter 고 검색하는 경우 메서드는 전체 동영상 목록을 로드하여 표시합니다.
블록에서 다음 줄을 삭제합니다 @code .
- [SupplyParameterFromQuery]
- private string? TitleFilter { get; set; }
- private IQueryable<Movie> FilteredMovies =>
- context.Movie.Where(m => m.Title!.Contains(TitleFilter ?? string.Empty));
삭제된 코드를 다음 코드로 바꿉다.
private string titleFilter = string.Empty;
private IQueryable<Movie> FilteredMovies =>
context.Movie.Where(m => m.Title!.Contains(titleFilter));
다음으로 구성 요소는 요소에 titleFilter 필드를 <input> 바인딩해야 하므로 사용자 입력은 변수에 titleFilter 저장됩니다. 바인딩은 지시문 특성으로 Blazor 구현 @bind 됩니다.
구성 요소에서 HTML 양식을 제거합니다.
- <form action="/movies" data-enhance>
- <input type="search" name="titleFilter" />
- <input type="submit" value="Search" />
- </form>
그 자리에 다음 태그를 추가합니다 Razor .
<input type="search" @bind="titleFilter" @bind:event="oninput" />
@bind:event="oninput"는 사용자가 검색 상자에 입력한 결과로 요소의 값이 변경될 때 oninput 발생하는 HTML <input> 이벤트에 대한 바인딩을 수행합니다. 에 QuickGrid 바인딩됩니다 FilteredMovies. 검색 상자 값이 변경되면 titleFilter 메서드에 바인딩된 QuickGrid 항목을 다시 렌더링하면 FilteredMovies 업데이트된 값titleFilter에 따라 영화 엔터티가 필터링됩니다.
앱을 실행하고 검색 필드에 "road warrior"를 입력하고 검색 필드가 "QuickGrid"("" 뒤에 공백)에 도달할 때 도로 전사road 입력된 각 문자에 대해 필터링되는 방법을 road 확인합니다.
데이터베이스 레코드 필터링은 서버에서 수행되며 서버는 동일한 SignalR 연결을 통해 표시되도록 HTML을 대화형으로 다시 보냅니다. 페이지가 다시 로드되지 않습니다. 사용자는 페이지와의 상호 작용이 클라이언트에서 코드를 실행하는 것처럼 느껴집니다. 실제로 코드가 서버를 실행하고 있습니다.
HTML 양식 대신 이 시나리오에서 GET 요청을 제출하면 JavaScript를 사용하여 Fetch API 또는 XMLHttpRequest API를 사용하여 서버에 요청을 제출할 수도 있습니다. 대부분의 경우 JavaScript는 대화형 구성 요소에서 사용 Blazor 및 C#으로 바꿀 수 있습니다.
QuickGrid 구성 요소 스타일 지정
QuickGrid사용하여 스타일시트가 Index 구성 요소에 격리된 렌더링된 구성 요소에 스타일을 적용할 수 있습니다.
CSS 격리는 파일 이름 형식 {COMPONENT NAME}.razor.css사용하여 스타일시트 파일을 추가하여 적용됩니다. 여기서 {COMPONENT NAME} 자리 표시자는 구성 요소 이름입니다.
자식 구성 요소에 스타일을 적용하려면, 예를 들어 QuickGrid의 Index 구성 요소, ::deep 가상 요소를 사용합니다.
MoviePages 폴더에서 Index 구성 요소에 대해 다음 스타일시트를 추가합니다.
::deep 의사 요소를 사용하여 행 높이를 3em 만들고 표 셀 내용을 세로로 가운데 정렬합니다.
Components/Pages/MoviePages/Index.razor.css:
::deep tr {
height: 3em;
}
::deep tr > td {
vertical-align: middle;
}
::deep 의사 요소는 하위 요소에서만 작동하므로 스타일을 적용하려면 QuickGrid 구성 요소를 <div> 또는 다른 블록 수준 요소로 래핑해야 합니다.
Components/Pages/MoviePages/Index.razor에서 <div> 컴포넌트를 QuickGrid 태그로 감싸세요.
+ <div>
<QuickGrid ...>
...
</QuickGrid>
+ </div>
Blazor은 구성 요소에 의해 렌더링된 마크업과 일치시키기 위해 CSS 선택자를 다시 작성합니다. 다시 작성된 CSS 스타일은 번들로 묶여 정적 자산으로 생성되므로 렌더링된 QuickGrid 구성 요소에 스타일을 적용하기 위해 추가 작업을 수행할 필요가 없습니다.
정리
자습서를 완료하고 로컬 시스템에서 샘플 앱을 삭제하면 Visual Studio의 SSOX(SQL Server 개체 탐색기)에서 데이터베이스를 삭제 BlazorWebAppMovies 할 수도 있습니다.
- 메뉴 모음에서 SQL Server 개체 탐색기>SSOX에 액세스합니다.
- 옆에
SQL Server>(localdb)\MSSQLLocalDB>Databases있는 삼각형을 선택하여 데이터베이스 목록을 표시합니다. - 목록에서 데이터베이스를
BlazorWebAppMovies마우스 오른쪽 단추로 클릭하고 삭제를 선택합니다. - 확인을 선택하기 전에 확인란을 선택하여 기존 컬렉션을 닫습니다.
SSOX에서 데이터베이스를 삭제하면 데이터베이스의 실제 파일이 Windows 사용자 폴더에서 제거됩니다.
자습서를 완료하고 로컬 시스템에서 샘플 앱을 삭제하면 데이터베이스를 수동으로 삭제할 BlazorWebAppMovies 수도 있습니다. 데이터베이스의 위치는 플랫폼 및 운영 체제에 따라 다르지만 앱 설정 파일(appsettings.json)의 데이터베이스 연결 문자열 표시된 파일 이름으로 검색할 수 있습니다.
자습서를 완료하고 로컬 시스템에서 샘플 앱을 삭제하면 데이터베이스를 수동으로 삭제할 BlazorWebAppMovies 수도 있습니다. 데이터베이스의 위치는 플랫폼 및 운영 체제에 따라 다르지만 앱 설정 파일(appsettings.json)의 데이터베이스 연결 문자열 표시된 파일 이름으로 검색할 수 있습니다.
축하합니다!
자습서 시리즈를 완료해 주셔서 감사합니다. 이 자습서 Blazor를 즐기시기 바랍니다. Blazor 에서는 이 시리즈에서 다룰 수 있었던 것보다 많은 기능을 제공하며, 자세한 내용은 설명서, 예제 및 샘플 앱을 살펴보 Blazor 세요. 행복한 코딩!Blazor
다음 단계
새로운 경우 개발을 위한 BlazorBlazor 중요한 일반 정보를 다루는 다음 Blazor 문서를 읽는 것이 좋습니다.
- ASP.NET Core Blazor
- ASP.NET Core Blazor 지원 플랫폼
- ASP.NET Core Blazor용 도구
- ASP.NET Core Blazor 호스팅 모델
- ASP.NET Core Blazor 프로젝트 구조
- ASP.NET 핵심 Blazor 기본 사항 및 기타 기본 사항 노드 문서입니다.
- ASP.NET 핵심 Razor 구성 요소 및 기타 구성 요소 노드 아티클입니다 .
- ASP.NET Core Blazor 양식 개요
- Blazor 핵심 JavaScript 상호 운용성(JSinterop) 및 기타 JavaScript interop 문서를 ASP.NET.
- ASP.NET Core Blazor 인증 및 권한 부여
- ASP.NET Core Blazor 호스트 및 배포
- Blazor.
이 자습서의 샘플 앱에 썸네일 파일 업로드 기능을 추가하는 방법에 대한 지침은 ASP.NET Core Blazor 파일 업로드참조하세요.
문서 웹 사이트의 사이드바 탐색에서 문서는 주제별로 구성되고 대략적으로 일반적인 순서 또는 기본에서 복잡한 순서로 배치됩니다. 학습 Blazor 을 시작할 때 가장 좋은 방법은 목차를 위에서 아래로 읽는 것입니다.
완료된 샘플로 문제 해결
텍스트에서 해결할 수 없는 자습서를 수행하는 동안 문제가 발생하면 샘플 리포지토리의 완료된 프로젝트 Blazor 와 코드를 비교합니다.
Blazor 샘플 LibMan GitHub 리포지토리(dotnet/blazor-samples)
최신 버전 폴더를 선택합니다. 이 자습서 프로젝트의 샘플 폴더 이름은 BlazorWebAppMovies다음과 같습니다.
GitHub에서 Microsoft와 공동 작업
이 콘텐츠의 원본은 GitHub에서 찾을 수 있으며, 여기서 문제와 끌어오기 요청을 만들고 검토할 수도 있습니다. 자세한 내용은 참여자 가이드를 참조하세요.
ASP.NET Core