지금까지 walked through the intro, wrote our first component, dynamically updated the HTML head from a component, isolated our service dependencies, hosting our images over Azure Blob Storage and Cosmos DB, built a responsive image gallery 및 implemented prerendering을 완성했습니다.
코스모스 DB의 완전한 결과집이 있습니다. 본고에서 빠른 검색 상자를 구축할 것입니다.내가 처음에 우리 데이터베이스에 대한 조회를 실행해야 한다고 생각했을 때, 나는 이 바보야, 너는 이미 데이터가 있어. 필터만 하면 돼.내 마음속의 목소리가 항상 현명한 조언을 해 주는 것은 아니지만 이번에는 그렇다.
어쨌든 다음은 그의 모습이다.

검색 단추가 없는 것을 알았을 수도 있습니다.사용자가 입력한 내용에 따라 결과가 필터링되기 때문에 이것은 '입력할 때 검색' 스타일이 될 것입니다.이것은 네가 상상한 것보다 훨씬 적다.
이 글은 다음과 같은 내용을 포함한다.

The “easy” part: our filtering logic

Understand data binding

Understand how @bind and @bind-value work

Put it together

Wrap up

"간단" 부분: 우리의 필터 논리

아주 간단한 말로 말하자면, 우리가 해야 할 일은 사용자가 검색 상자에 텍스트를 입력하고, 우리는 LINQ 조회를 사용하여 이를 필터할 것이다.그런 다음 필터링된 결과를 표시합니다.Images.razor.cs에는 SearchText이 추가됩니다.이 필드는 사용자가 입력한 내용을 포착합니다.이 문자열을 가져오고 Title에 포함된 항목이 있는지 확인합니다.빈 문자열로 초기화해야 합니다.이렇게 하면 입력한 내용이 없으면 전체 결과 세트가 표시됩니다.

public string SearchText = "";

그리고 FilteredImages 필드를 포함할 것입니다.이것은 선별된 List<Image>을 되돌려줍니다. 이 조회는 관련 LINQ 조회를 사용하여 SearchText에 따라 선별됩니다.

List<Image> FilteredImages => ImageList.Where(
    img => img.Title.ToLower().Contains(SearchText.ToLower())).ToList();

이 부분은 상대적으로 간단하다.이 기능은 Blazor, 웹 API, MVC 등 모든 유형의 애플리케이션에서 수행할 수 있습니다.Blazor의 강점은 데이터 연결을 이용하여 데이터를 구성 요소와 연결시켜 동기화하고 응용 프로그램을 업데이트할 수 있다는 것이다.우선 데이터 귀속을 일반적인 개념으로 이해합시다.

데이터 바인딩 이해

데이터 바인딩은 Blazor 만의 것이 아닙니다.그것은 거의 모든 단일 페이지 프로그램 (SPA) 라이브러리와 프레임워크에 매우 중요하다.디스플레이, 업데이트, 수신을 피할 수 없습니다.
가장 간단한 예는 단방향 귀속이다.이름으로 추정되는 것은 데이터 업데이트가 한 방향으로만 흐르는 것을 의미한다.이러한 상황에서 응용 프로그램은 데이터 처리를 책임진다.요점: 당신은 데이터가 있습니다. 하나의 사건이 발생했고 데이터에 변화가 생겼습니다.사용자는 아직 데이터를 제어할 필요가 없다.
현재 가장 일반적인 이벤트는 Blazor의 클릭 버튼입니다.

<p>@TimesClicked</p>

<button @onclick="UpdateTimesClicked">Update Click Count</button>

@code {
    private int TimesClicked { get; set; } = 1;

    private void UpdateTimesClicked()
    {
        TimesClicked++;
    }
}

이 예에서 TimesClicked은 @ 기호를 가진 구성 요소와 귀속된다.사용자가 단추를 눌렀을 때 값이 변경됩니다. 이벤트 처리 프로그램을 실행하면 Blazor가 다시 렌더링을 터치합니다.단방향 귀속의 단순성을 속이지 마라. 많은 경우, 그것은 당신이 필요로 하는 모든 것이다.
사용자의 입력이 필요할 때마다 데이터를 추적하고 필드에 연결해야 합니다.우리의 예에서 사용자가 무엇을 입력하고 있는지 알고 SearchText에 저장하고 변경할 때 필터 논리를 실행해야 한다.그것은 양방향 유동이 필요하기 때문에, 우리는 양방향 귀속을 사용해야 한다.ASP의 경우NET 코어, 특히 data binding involves... 바인딩...필드, 속성 또는 Razor 표현식이 있는 @bind HTML 요소.

@bind와 @bindvalue가 어떻게 작동하는지 알아보기

ASP에서NET Core documentation for Blazor data binding, 이 줄은 당신의 주의를 끌 것입니다.

When one of the elements loses focus, its bound field or property is updated.

이 경우 @bind은 입력이 초점을 잃은 후(예를 들어 사용자가 튀어나온 경우) onchange 프로세서와 함께 작동한다.그러나 이것은 우리가 원하는 것이 아니다.우리는 업데이트가 사용자 입력에서 발생하고 업데이트를 촉발하는 이벤트를 제어할 수 있기를 희망합니다.어쨌든, 우리는 사용자가 주의력을 잃기를 기다리고 싶지 않다.반대로 우리는 @bind-value을 사용할 수 있다.우리가 @bind-value:event="event"을 사용할 때 우리는 효과적인 사건을 지정할 수 있다. 예를 들어 oninput, keydown, keypress 등이다.우리의 예에서 우리는 oninput을 사용하거나 사용자가 입력한 내용을 사용하기를 희망한다.
날 못 믿어?괜찮아, 우리는 단지 인터넷 친구일 뿐이야, 알겠어.프로젝트의 obj/Debug/net5.0/Razor/Pages 디렉터리에서 컴파일된 구성 요소를 볼 수 있습니다.다음은 BuildRenderTree 메서드와 @bind-value의 모양새입니다(마지막 줄 참고).

protected override void BuildRenderTree(Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder __builder)
{
    __builder.OpenElement(0, "div");
    __builder.AddAttribute(1, "class", "text-center bg-blue-100");
    __builder.AddAttribute(2, "b-bc0k7zrx0q");
    __builder.OpenElement(3, "input");
    __builder.AddAttribute(4, "class", "border-4 w-1/3 rounded m-6 p-6 h-8\r\n border-blue-300");
    __builder.AddAttribute(5, "placeholder", "Search by title");
    __builder.AddAttribute(6, "value", Microsoft.AspNetCore.Components.BindConverter.FormatValue(SearchText));
    __builder.AddAttribute(7, "oninput", Microsoft.AspNetCore.Components.EventCallback.Factory.CreateBinder(this,__value => SearchText = __value, SearchText));
    // and more ...
}

그것을 한데 놓다

@bind-value을 SearchText, @bind-value:event을 oninput으로 설정하면 영업을 시작합니다.다음은 검색 상자를 연결하는 방법입니다.

<div class="text-center bg-blue-100">
    <input class="border-4 w-1/3 rounded m-6 p-6 h-8
               border-blue-300" @bind-value="SearchText"
           @bind-value:event="oninput" placeholder="Search by title" />
</div>

마지막으로 이미지를 탐색할 때 FilteredImages을 입력하십시오.

@foreach (var image in FilteredImages)
{
    <ImageCard ImageDetails="image" />
}

다음은 Images 구성 요소의 전체 코드입니다.

@page "/images"
<div class="text-center bg-blue-100">
    <input class="border-4 w-1/3 rounded m-6 p-6 h-8
               border-blue-300" @bind-value="SearchText"
           @bind-value:event="oninput" placeholder="Search by title" />
</div>

@if (!ImageList.Any())
{
    <p>Loading some images...</p>
}
else
{
    <div class="p-2 grid grid-cols-1 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3">
        @foreach (var image in FilteredImages)
        {
            <ImageCard ImageDetails="image" />
        }
    </div>
}

및 Images 단원:

using BlastOff.Shared;
using Microsoft.AspNetCore.Components;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace BlastOff.Client.Pages
{
    partial class Images : ComponentBase
    {
        public IEnumerable<Image> ImageList { get; set; } = new List<Image>();

        public string SearchText = "";

        [Inject]
        public IImageService ImageService { get; set; }

        protected override async Task OnInitializedAsync()
        {
            ImageList = await ImageService.GetImages(days: 70);
        }

        List<Image> FilteredImages => ImageList.Where(
            img => img.Title.ToLower().Contains(SearchText.ToLower())).ToList();
    }
}

이것은 실행 중인 검색 상자입니다.우리 가는 거 봐.



데이브 브로크

너무 빨라!내가 직장 생활에서 typeahead를 실현하기 위해 겪은 고통을 회상해 보자. 이 과정에서 데이터 귀속의 변화는 매우 간단하다.
2021년 1월 15일 오전 00:54

마무리

이 글에서 나는 어떻게 Blazor에서 빠른 '입력 즉용' 검색 상자를 실현할 수 있는지 썼다.우리는 필터 논리를 작성하여 데이터 귀속의 작업 원리를 이해했고 Blazor에서 @bind과 @bind-value을 비교하여 마지막에 그것들을 함께 놓았다.
여기서, 우리는 당연히 더 많은 일을 할 수 있다. 예를 들어, 우리가 검색을 실행하는 빈도를 제어하고 싶을 때, 떨면 도움이 된다.나는 그다지 걱정하지 않는다. 왜냐하면 이것은 모두 클라이언트 기기에서 실행되는 것이기 때문이다. 그러나 우리가 데이터베이스에 대한 과도한 접근을 제한하려고 할 때, 그것은 틀림없이 역할을 발휘할 것이다.