Blazor Blazor FlexGrid - Entity Framework Core 및 SQL Server 사용
페이지 정보
작성자 GrapeCity
작성일 2020-11-10 16:05 조회 1,113회
댓글 0건
본문
첨부파일
관련링크
ComponentOne은 사용자에게 익숙한 모든 기능 집합을 와 함께 제공하면서 Entity Framework Core를 사용하여 Blazor Server 프로젝트를 SQL 데이터베이스에 연결하는 데 필요한 단계를 안내했습니다.
Visual Studio 실행 및 새 Blazor 응용 프로그램 만들기
새 프로젝트 이름 지정
구성 및 설정을 위한 기본값 선택
서버 응용 프로그램 만들기에서는 데이터 계층 및 UI를 동일한 프로젝트에서 통합합니다.
NuGet 패키지를 EntityFramework Core 및 ComponentOne 두 프로젝트에 추가합니다.
종속성을 마우스 오른쪽 버튼으로 클릭하고 Nuget 패키지 관리를 선택합니다.
다음 추가
Microsoft.EntityFrameworkCore.SqlServer
Microsoft.EntityFrameworkCore.Tools
C1.Blazor.Grid
C1.DataCollection.EntityFrameworkCore
Entity Framework Core Scaffold-DbContext 명령줄 도구를 사용하여 이 프로젝트에 대한 모델 및 컨텍스트를 생성합니다. 목적은 Orders 표를 표시하는 것입니다. 또한 데이터베이스의 외래 키 관계로 인해 추가 표를 스캐폴딩하려고 합니다.
Visual Studio의 패키지 관리자 콘솔에서 다음 코드를 실행합니다.
Scaffold-DbContext “Data Source=CEDATASERVER;Initial Catalog=Northwind;Persist Security Info=True;User ID=dbuser2;Password=xxxxxxx” Microsoft.EntityFrameworkCore.SqlServer -OutputDir Models -Tables Orders, Customers, Employees, Shippers
데이터 소스: SQL 데이터베이스용 표준 연결 문자열
OutputDir: 클래스 파일 및 컨텍스트 파일을 모델 폴더에 배치
Tables: 데이터베이스에서 추출할 특정 표 열거
이것은 프로젝트에 모델 폴더를 추가하며, 각 표에 대한 클래스 및 NorthwindContext.cs 파일을 생성합니다.
서비스를 생성하고 개별 CRUD 작업 처리를 위한 모든 코드를 작성하는 대신 앞에서 추가한 C1DataCollection Nuget 패키지를 활용합니다. 서버 쪽 필터링 및 정렬을 위한 옵션을 제공할 뿐 아니라 컨텍스트를 C1DataCollection에 바인딩하여 다양한 작업을 모두 처리합니다.
컨텍스트를 C1EntityFrameworkCoreVirtualDataCollection에 바인딩
FlexGrid를 DataCollection에 바인딩
Orders 표 페이지 빌드 시작
솔루션 탐색기에서 Pages 폴더를 마우스 오른쪽 버튼으로 클릭한 후 추가 > 새 항목 선택
Razor 컴포넌트를 선택하고 이름을 OrdersTable.razor로 지정
탐색을 지원하도록 @page 정의
FlexGrid, DataCollection 및 솔루션의 모델을 위해 상단에 @using 문 추가
@code 블록을 다운로드하고 컬렉션이라는 Orders 형식의 C1EntityFrameworkVirtualDataCollection 만들기
기본 제공된 비동기 작업 OnInitializedAsync를 사용하여 컨텍스트를 인스턴스화
로드 대기 및 로드된 컨텍스트로 DataColection 초기화
이제 이름이 “collection”인 VirtualDataCollection은 Orders 표를 포함합니다.
페이지 본문으로 이동하여 FlexGrid의 인스턴스 만들기
ItemSource 속성을 collection으로 설정
응용 프로그램을 실행하기 전에 Pages / _Host.cshtml로 이동하고 <head> 태그에 대한 필수 .css 및 .js 참조를 추가합니다.
<link rel="stylesheet" href="~/_content/C1.Blazor.Core/styles.css" />
<link rel="stylesheet" href="~/_content/C1.Blazor.Grid/styles.css" />
<link rel="stylesheet" href="~/_content/C1.Blazor.ListView/styles.css" />
<link rel="stylesheet" href="~/_content/C1.Blazor.Input/styles.css" />
<link rel="stylesheet" href="~/_content/C1.Blazor.DataPager/styles.css" />
<script src="~/_content/C1.Blazor.Core/scripts.js"></script>
<script src="~/_content/C1.Blazor.Input/scripts.js"></script>
<script src="~/_content/C1.Blazor.Grid/scripts.js"></script>
Shared / NavMenu.razor로 이동합니다. 새 OrdersTable 페이지에 대한 링크를 추가하여 응용 프로그램이 실행될 때 사용자가 탐색할 수 있도록 합니다.
<li class="nav-item px-3">
<NavLink class="nav-link" href="OrdersTable">
<span class="oi oi-spreadsheet" aria-hidden="true"></span> Orders Table
</NavLink>
</li>
응용 프로그램을 실행합니다. 왼쪽 탐색 모음에서 Orders 표 링크를 클릭합니다. FlexGrid가 포함된 표가 표시됩니다.
셀을 편집하면 완료된 후에도 변경 내용이 SQL Server로 계속 돌아옵니다. 열 정렬 및 기타 기능에 대한 헤더 행을 클릭합니다.
ComponentOne FlexGrid 기능 사용
Employee Id 및 Ship Via 열은 둘 다 사용자에게 친숙한 텍스트가 아닌 해당 표의 외래 키를 표시합니다. FlexGrid의 DataMap 기능으로 이 문제를 해결합니다.
OrdersTable.razor로 돌아갑니다.
@code 섹션에서 두 GridDataMap 개체 정의
OnInitializedAsync 이벤트에서 컨텍스트를 통해 해당 개체의 ItemsSources를 해당 표에 바인딩
그리드에 표시하기 위해 DisplayMemberPath를 해당 열에 설정
저장될 인덱스 값에 SelectedValuePath 설정
특정 열 속성을 설정하려면 FlexGrid의 AutoGenerateColumn 기능을 끄고 개별적으로 열을 정의합니다.
Employee ID 및 Ship Via 열에 대한 DataMap 속성을 GridDataMaps로 설정
3개 날짜 열을 GridDateTimeColumns로 정의
Format을 “d”로 설정하고 열을 편집할 때 DateTime 선택기 로드
해당 열의 MinWidth을 180으로 설정하고 콘텐츠가 정확히 표시되는지 확인
응용 프로그램을 실행합니다. 이제 Employee ID 및 Ship Via 열에 유용한 정보가 표시되고 편집하기에 좋은 AutoLookup 드롭다운 상자가 나타납니다.
또한 3개의 날짜 열은 편집할 때 DateTime 선택기를 사용합니다.
Entity Framework Context와 함께 사용된 C1DataCollection은 GrapeCity의 가상 스크롤 기술을 구현합니다. 이것은 특정 시간에 사용자에게 보이는 디스플레이를 채우는 데 필요한 행 수만 페치합니다. 스크롤 막대는 여전히 전체 범위를 표시하며, 사용자가 스크롤하면 추가 행을 페치합니다. 효율적인 작동을 위해 그리드의 최대 높이를 정의합니다. 그러면 보기 창의 크기와 창을 채우는 데 데이터가 얼마나 필요한지를 계산할 수 있습니다. 이 경우에는 Style/max-height 속성을 800px로 설정합니다.
응용 프로그램을 실행합니다.
그리드 자체에 대한 스크롤 막대가 오른쪽에 나타납니다. 이 기능을 사용하면 로딩 성능 및 일반적인 응답성이 모두 향상됩니다.
샘플 응용 프로그램이 아래에 연결되어 있습니다. 방화벽 뒤에 SQL Server가 있으므로 즉시 작동하지는 않습니다.
다운로드:
Models / NorthwindContext.cs에서 연결 문자열을 수정하여 SQL Server를 가리키도록 하면 Document/ComponentOne Samples/Common 폴더에 Northwind의 .MDF 사본이 제공됩니다.
대신에 자체 응용 프로그램을 시작하고 표에서 스캐폴더를 가리킨 후 자체 데이터와 워크플로로 Blazor FlexGrid 사용을 시도해 보십시오.
댓글목록
등록된 댓글이 없습니다.
