TryMudBlazor - A playground for testing MudBlazor components in the browser


@inject IDialogService dialog
@{
    int i = 0;
    <button @onclick=OpenDialog>count</button>
    RenderFragment rf;
    Task OpenDialog() => dialog.ShowAsync<MudDialog>("Instant Dialog", parameters: new()
    {
        [nameof(MudDialog.DialogContent)] = rf =
        @<text>
            <div>
                <button @onclick='()=>i++' >갱신안됨: @i</button>
                <input @bind=i />
            </div>
            <EditForm Model=this>
                <button @onclick='()=>i++' >갱신됨: @i</button>
                <input @bind=i />
            </EditForm>
        </text>
    });
}


화면구성을 여러곳에서 재사용하고자 한다거나, 위와같은 다이얼로그를 표시하려면

별도의 커스텀컴포넌트를 작성하고 불러오도록 안내하고있으나, 나는 코드만 늘어지는것도 모자라 버전관리할 파일까지 쪼개져 늘어지는것은 좋아하지 않으므로

프로토타이핑 단계에서는 위와같은 해괴한 방법을 동원해 일단 파일하나에서 모든 동작과 출력에 대한 이해가 완결될수있도록 작성하고있다.


하지만 이런짓을 할경우 당연히 컴포넌트 객체단위의 파라미터라거나 StateHasChanged 등을 쓸수 없으므로 활용이 제한된다.

가장먼저, 한번 랜더링된 이후의 변경사항에 대한 갱신부터 애매하다는것이 있는데,


EditForm이 submit이벤트를 받으면 일단 ChildContent들을 갱신한다는 점에서 착안해

마치 캡쳐된 지역변수의 변경사항이 즉각적으로 반영되는것처럼 연출했다.


form의 역할은 아무렴 상관하지 않으니 Model은 this나 아무거나 주면된다.