Blazor Advent Calendar 2019 기사입니다.이번에는 블라조어 Server-side를 통해 원격으로 조작할 수 있는 손전등 애플리케이션을 만들고 싶다.콘서트장에서 판매하는 싱크로나이즈드 손전등 스마트폰 버전입니다.
Blazor Server-side 앱을 통해 특정 페이지(URL)에 연결된 스마트폰 화면을 원격으로 조작할 수 있을 것으로 생각한다.
제작 영상 왼쪽: 관리 화면 오른쪽: 연결된 스마트폰 화면(실제 화면 지연 없음)

동적 스타일 변경

Blazer 탭에서 동적 변수를 사용할 수 있습니다.즉, 동적으로 classセレクタ과style의 내용을 변경할 수 있다.값을 수정한 후 StateHasChangedメソッド라는 이름으로 DOM을 재구성하고 페이지를 생성할 수도 있습니다.이 구조는 변화CSS할 수 있을 뿐만 아니라 동적 생성 제어도 할 수 있다. 이런 부분은 JavaScriptレス에 쓰일 수 있어 Blazor의 흥분되는 부분이다!

class 선택기와 스타일을 되돌려줍니다.

<div class=@GetClass style=@GetStyle>
</div>

@code{
    bool alarm = false;

    string GetClass()
    {
        return "main";
    }

    string GetStyle()
    {
        if(alarm)
        {
            return "warn";
        }
        else
        {
            return "normal";
        }
    }
}

이런 것도 오케이.

css 파일의 스타일을 수정할 수 없지만, 내연 style 의 내용이라면 동적 설정을 할 수 있습니다.

<style>
    .test{
        @styleStr
    }
</style>

<div class="test">
    <p>Hello World</p>
</div>

@code{
    string styleStr = "color:black;";

    void SetColor(string colorName)
    {
        styleStr = "color:" + colorName + ";";
    }
}

나는 이 특성을 활용하여 짧은 인코딩의 진기한 응용을 만들고 싶다.

색상 관리 클래스

모든 세션에서 공유된 색상만 유지하는 클래스를 만듭니다.상태 변화 중 임의의 이벤트를 실행할 수 있도록 처리 프로그램을 준비했다.

public class ColorClass
{
    private string _colorStr = "";
    public string ColorStr
    {
        get
        {
            return _colorStr;
        }
        set
        {
            _colorStr = value;
            this.StateChanged?.Invoke(this, EventArgs.Empty);
        }
    }

    public event EventHandler StateChanged;

}

Startup.cs 편집

프로그램을 시작할 때, 단일 그룹에서 색 관리 클래스를 생성합니다.
Startup.cs

public class Startup
{
    // This method gets called by the runtime. Use this method to add services to the container.
    // For more information on how to configure your application, visit https://go.microsoft.com/fwlink/?LinkID=398940
    public void ConfigureServices(IServiceCollection services)
    {
        services.AddRazorPages();
        services.AddServerSideBlazor();
        services.AddSingleton<WeatherForecastService>();

        //シングルトンでインスタンスを生成
        services.AddSingleton<ColorClass>();
    }
}

MainLayout.razor 편집

MainLayout.razor 여분의 부분을 제거하고 @Body만 표시합니다.색상 관리 클래스Inject를 설정하고 1차 변경 값을 계기로 호출StateHasChangedメソッド을 하여 화면을 생성한다.
MainLayout.razor

@inherits LayoutComponentBase
@inject ColorClass colorCls;

@*子コンテンツにカスケードでインスタンスを渡す*@
<CascadingValue Value="@colorCls" Name="Color">
    @Body
</CascadingValue>

@code{  
    protected override void OnInitialized()
    {
        //値変更で、画面の再生成を行う
        colorCls.StateChanged += (s,e) =>
        {
            this.InvokeAsync(this.StateHasChanged);
        };
    }
}

색상을 변경할 수 있는 화면(Manage.razor)

색상을 수정할 수 있는 관리 화면을 만듭니다./manage에 액세스하면 이 화면이 표시됩니다.id:main에 비해 변경background-Color을 통해 전체 페이지의 배경색을 동적으로 바꿀 수 있다.
Manage.razor

@page "/manage"

<div id="main" style=@colorClass.ColorStr>
    <div class="content-row">
        @foreach(var colorName in ColorNames)
        {
            <button class="btn " style="background-color:@colorName;width:150px"
                    @onclick=@(_=>SetStyle(colorName))>@colorName</button>
        }
    </div>
</div>


@code
{
    [CascadingParameter(Name="Color")]
    protected ColorClass colorClass { get; set; }

    string[] ColorNames = new string[0];

    protected override void OnInitialized()
    {
        // ConsoleColorから色名を取得 
        ColorNames = Enum.GetNames(typeof(ConsoleColor));
    }

    void SetStyle(string name)
    {
        // ここの変更で、背景色が変わる
        colorClass.ColorStr = "background-Color:" + name;
    }

}

클라이언트 화면(Index.razor)

조작된 한쪽은 / 방문할 때 표시되는 화면이다.관리 화면과 마찬가지로 동적 변경 가능ID:main의background-Color.
Index.razor

@page "/"

<div id="main" style=@colorClass.ColorStr>
</div>

@code
{
    [CascadingParameter(Name="Color")]
    protected ColorClass colorClass { get; set; }
}

최후

Blazor Server-side 애플리케이션은 세션SignalR의 상태 변화가 발생할 때마다 데이터 전송을 하지만 변경된 부분만 전송하기 때문에 전송량이 크지 않다.예를 들어 이 응용 프로그램의 경우 색의 변화로 인해 연결된 목적지로 전송되는 정보량은 약 100Byte이다.
이번에는 언뜻 보기에는 JavaScript의 앱을 사용한 것 같지만 JavaScriptレス로 쓸 수 있다!그리고 놀랍게도 인코딩이 적은 부분은 블레이저의 장점