C1 Blazor 입력 컨트롤을 사용하는 고객 정보 화면
페이지 정보
작성자 GrapeCity
작성일 2021-04-12 09:54 조회 3,490회
댓글 0건
본문
첨부파일
관련링크
Blazor는 개발자가 C# 및 HTML로 단일 페이지 웹 응용 프로그램을 만들 수 있게 지원하는 프레임워크입니다. Blazor에는 Blazor 서버 응용 프로그램과 Blazor 웹 어셈블리라는 두 가지 유형의 프로젝트가 있습니다. Blazor 응용 프로그램은 JavaScript와 연동되므로 .NET Code로 트리거할 수 있습니다.
ComponentOne은 Microsoft가 Blazor 미리 보기를 발표한 후 Blazor 플랫폼을 개발하기 시작했습니다. Blazor Edition에는 FlexGrid, FlexChart, FlexPie, ListView, TreeMap, Calendar, ComboBox, AutoComplete, NumericBox, TimeEditor, DatePicker, DateTimePicker 컨트롤이 포함되어 있으며, 사용자 피드백에 따라 더 많은 컨트롤이 추가될 것입니다.
이 포스팅에서는 의 Northwind 데이터베이스와 주문에 대한 고객 정보를 가져오는 스토어용 Blazor 입력 컨트롤을 사용해 고객 정보 화면을 만듭니다. 또한 Blazor 입력 컨트롤을 사용해 OrderID, 날짜 범위에 따라 필터링을 적용합니다.
위 화면을 만들기 위해 다음과 같은 C1 Blazor 입력 컨트롤을 사용할 것입니다.
C1AutoComplete
C1NumericBox
C1TextBox
C1DateTimeEditor
C1ListView
C1AutoComplete은 고객 목록을 표시하는 데 사용되고, C1NumericBox는 레코드의 수를 가져오는 데 사용됩니다. 주문 정보는 C1ListView를 사용해 표시힙니다. C1TextBox 및 C1DateTimeEditor는 항목을 필터링하는 데 사용됩니다.
|
다음과 같은 단계에 따라 위 화면을 만들어 보겠습니다.
NuGet 패키지 설치:
C1Blazor 컨트롤을 사용하려면 Blazor 프로젝트의 NuGet에서 다음 C1 Blazor 컨트롤을 설치해야 합니다.
참조가 필요한 스크립트 및 스타일 파일:
NuGet 패키지를 설치한 후에는 C1 컨트롤을 위한 스크립트 및 스타일 파일을 추가하여 정확하게 렌더링되고 원활하게 작동하도록 해야 합니다.
이를 위해서는 wwwroot\index.html 파일에 다음과 같은 스크립트를 추가해야 합니다.
<!-- **** C1 Styles files **** --> <link rel="stylesheet" href="/_content/C1.Blazor.Core/styles.css" /> <link rel="stylesheet" href="/_content/C1.Blazor.Input/styles.css" /> <link rel="stylesheet" href="/_content/C1.Blazor.Calendar/styles.css" /> <link rel="stylesheet" href="/_content/C1.Blazor.DateTimeEditors/styles.css" /> <!-- **** C1 Scripts files **** --> <script src="/_content/C1.Blazor.Core/scripts.js"></script> <script src="/_content/C1.Blazor.Input/scripts.js"></script> <script src="/_content/C1.Blazor.Calendar/scripts.js"></script>
코드에서 컨트롤 추가
NuGet 패키지를 설치하고 스크립트 및 스타일 파일을 추가한 후에는 Blazor 페이지에서 필수 컨트롤을 추가할 수 있습니다.
이를 위해서는 페이지에서 다음과 같이 필수 네임스페이스를 가져와야 합니다.
@using C1.Blazor.Input @using C1.Blazor.ListView @using C1.Blazor.DateTimeEditors @using CustomerInformation.Models @using Newtonsoft.Json
위 화면은 세 부분으로 분할할 수 있습니다.
주문 검색
주문 필터링
주문 표시
주문 검색:
DataBase에서 주문을 검색하려면, API에서 검색될 수 있고 AutoComplete을 사용해 표시될 CustomerId가 필요합니다.
API에서 고객을 가져오는 코드는 다음과 같습니다.
@code{
string _baseUrl = "https://gc-demo-dataservice.azurewebsites.net/northwind/api/v1/Customers";
...
List<Customer> Customers = new List<Customer>();
...
protected override async Task OnInitializedAsync()
{
this.Customers = await GetCustomersAsync();
}
public async Task<List<Customer>> GetCustomersAsync()
{
HttpClient http = new HttpClient();
var data = await http.GetStringAsync($"{_baseUrl}");
return JsonConvert.DeserializeObject<List<Customer>>(data);
}
...
}고객 데이터를 가져왔으면 이 데이터를 다음 코드를 사용해 C1AutoComplete에 표시할 수 있습니다.
@if (Customers.Count > 0)
{
<div class="form-group">
<label>Customer:</label>
<C1AutoComplete @ref="Customer" ItemsSource="Customers" T="Customer" DisplayMemberPath=" CustomerId" Class="form-control" Style="@("width:69%;")" ShowButton="false" @bind-SelectedIndex="CustomerIndex"
></C1AutoComplete>
</div>
}
@code{
...
C1AutoComplete<Customer> Customer;
...
}고객을 선택한 후 다음 코드를 사용해 API에서 레코드를 가져올 수 있습니다.
@code{
...
public async Task<List<Order>> GetCustomersOrderAsync()
{
HttpClient http = new HttpClient();
var data = await http.GetStringAsync($"{_baseUrl}/{Customer.SelectedItem.CustomerId}/Orders"); return JsonConvert.DeserializeObject<List<Order>>(data);
}
...
}주문을 가져왔으면 이제 다음 코드를 사용해 C1NumericBoxes로 레코드의 수를 가져올 수 있습니다.
@if (Customers.Count > 0)
{
<div class="col-sm-12" style="padding-top: 15px;">
<h3>Customer Information Screen</h3>
<div style="padding-top: 15px;width:100%;">
<span class="head-text">Find Customer's Orders: </span>
<div class="form-inline">
<div class="form-group">
<label>Customer:</label><C1AutoComplete @ref="Customer" ItemsSource="Customers" T=" Customer" DisplayMemberPath="CustomerId" Class="form-control" Style="@("width:69%;")" ShowButton="false" @bind- SelectedIndex="CustomerIndex"></C1AutoComplete> </div>
<div class="form-group">
<label>Record Count:</label><C1NumericBox @bind-Value="RecordCount" Class="form- control" Style="@("width:69%;height:38px;border-radius:4px;")"></C1NumericBox>
</div>
<div style="width:28%;padding-left:5px;">
<button class="btn btn-primary" @onclick="GetOrders">Search</button>
</div>
</div>
</div>
</div>
}
@code{
int CustomerIndex = 0; int PageFrom = 0;
int RecordCount = 5; C1AutoComplete<Customer> Customer;
List<Customer> Customers = new List<Customer>(); List<Order> Orders = new List<Order>();
...
public async Task GetOrders()
{
var _orders = await GetCustomersOrderAsync();
Orders = _orders.Skip(this.PageFrom).Take(this.RecordCount).ToList<Order>();
}
...
}주문 필터링:
레코드를 가져왔으면 필터링을 적용할 수 있습니다. 여기서는 C1TextBox를 사용해 Contains 연산자로 OrderID에 따라 레코드를 필터링합니다. 또한 DateTimeEditor를 사용해 다음 코드 조각으로 날짜 범위 사이의 레코드를 필터링합니다.
@if (Orders.Count > 0)
{
<span class="head-text">Filter Orders:</span>
<div class="form-inline">
<div class="form-group">
<label>Order From: </label>
<C1DateTimePicker @ref="fromDateCtrl" Placeholder="From... " Class="form-control datepicker" @bind-Value="FromDate" MinDate="new DateTime(1997,1,1)" MaxDate="new DateTime(2000,12,31)" Style="@ ("width:69%;")"></C1DateTimePicker>
</div>
<div class="form-group">
<label style="justify-content:flex-end!important;">To:</label>
<C1DateTimePicker @ref="toDateCtrl" Placeholder="To... " Class="form-control datepicker" @bind-Value="ToDate" MinDate="new DateTime(1997,1,1)" MaxDate="new DateTime(2000,12,31)" Style="@ ("width:69%;")"></C1DateTimePicker>
</div>
<div style="width:28%;padding-left:5px;">
<button class="btn btn-primary" style="width:76.7px;" @onclick="FilterItems">Filter</button>
</div>
<div class="form-group">
<label>OrderID:</label>
<C1TextBox @ref="orderID" Placeholder="OrderID..." Class="form-control" Style="@("width:
69%;")"></C1TextBox>
</div>
</div> ...
}
@code{
...
public void FilterItems()
{
var _orders = Orders.Where(x => { return x.OrderID.ToString().Contains(orderID.Text) && x.OrderDate > FromDate && x.OrderDate<ToDate; }).ToList();
Orders = _orders;
}
...
}주문 표시:
주문은 C1ListView를 사용해 표시합니다. 선택한 주문을 표시한 후에는 SelectionChanged 이벤트의 도움을 받아 선택한 레코드의 세부 정보를 표시합니다.
@if (Orders.Count > 0)
{
...
<div class="row" style="padding-top:15px;">
<div class="col-sm-5">
<span class="head-text">Customer Orders:</span>
<C1ListView @ref="ListOrder" ItemsSource="Orders" T="Order" DisplayMemberPath="
OrderID" Style="@("max-height:50vh;border-radius:5px;border:1px solid #ced4da;")" SelectionMode=" ListViewSelectionMode.Single" SelectionChanged="GetOrder">
<ItemTemplate>
<span>@context.CustomerId - @context.OrderID</span>
</ItemTemplate>
</C1ListView>
</div>
<div class="col-sm-7"> @if (Order != null)
{
<div class="col-sm-12">
<span class="head-text">Selected Order:</span>
<div style="width:100%;border: 1px solid #ced4da;background-color: rgba (224,224,224,0.2);padding:6px;border-radius:5px;" >
<table width="100%">
<tr class="row"><td class="col-sm-6">Order ID </td><td class="col-
sm-6"> @Order.OrderID</td></tr>
sm-6"> @Order.CustomerId</td></tr>
<tr class="row"><td class="col-sm-6">Customer ID</td><td class="col-
<tr class="row"><td class="col-sm-6">Order Date</td><td class="col-
sm-6"> @Order.OrderDate.ToShortDateString()</td></tr>
<tr class="row"><td class="col-sm-6">Shipped Date</td><td class=" col-sm-6"> @Order.ShippedDate.ToShortDateString()</td></tr>
<tr class="row"><td class="col-sm-6">Freight</td><td class="col-sm-
6"> @Order.Freight</td></tr>
}
</div>
</div>
}
</table>
</div>
</div>
@code{
C1ListView<Order> ListOrder;
...
public void GetOrder()
{
if (ListOrder != null)
{
Order = Orders[ListOrder.Selection.Row];
}
}
}이제 샘플을 실행할 준비가 되었습니다.
* 첨부 파일을 통해 샘플을 다운로드 받아보실 수 있습니다.
댓글목록
등록된 댓글이 없습니다.
