Blazor에서 동적으로 생성 된 버튼을 어떻게 올바르게 연결합니까?

.net-standard blazor c# razor

문제

나는 웹 프론트 엔드에 상당히 익숙하지 만, 내가 디스플레이하고있는 행렬에있는 모든 '결점'에 대한 토글 버튼을 갖는 것이 좋을 것이라고 생각했다. (그래서 당신은 행렬을 역행하는 경로를 선택할 수있다.)

다행히 Blazor에서 버튼을 동적으로 만드는 법을 알았습니다 ... 불행히도 버튼을 연결하는 방법을 알아낼 수 없습니다.

내가 정적으로 버튼을 만들고 있다면, 첫 번째 결함 위치에 대해 onclick = "@ (() => alignment.ChangeArrow (1))"라고 말하면서 1을 2로 바꿉니다.

아래 코드 스 니펫에서 1 대신 (i 대신) 모든 버튼이 첫 번째 결함에 대해 작동하지만, 변수 i에 제공하면 전혀 작동하지 않습니다.

@for (int i = 0; i < alignment.FlawList.Count; i++)
{
    <button class="button" style="background-color:@alignment.ReturnColor(i)" onclick="@(()=>alignment.ChangeArrow(i))">@alignment.FlawList[i] @i</button>
}

내가 말하는 것에 대해 더 나은 면도기, 웹 방식이 있습니까?

어떤 지침을 주셔서 감사합니다.

수락 된 답변

이 시도:

@for (int i = 0; i < alignment.FlawList.Count; i++)
{
   var local_i = i;
    <button class="button" style="background-color:@alignment.ReturnColor(local_i)" onclick="@(()=>alignment.ChangeArrow(local_i))">@alignment.FlawList[local_i] @local_i</button>
}

인기 답변

이것은 조정과 함께 작동 할 수 있습니다 .... 성능에 대한 아무 생각도 어쨌든 할 재미처럼 보였다. Winforms에 대해 생각 나지 만, WinForms에서 긴 코드를 작성하는 것을 좋아하지 않습니다. C #에서 RenderFragments를 생성 할 수 있다는 것에 대해 좋은 점이 있습니다.


cshtml에 RenderFragment 태그를 배치합니다. (페이지에서 렌더링해야하는 곳이라면 어디든지)

@MyFragment

변경 화살표 메서드 만들기

void ChangeArrow(int i)
{
    Console.WriteLine("Changing arrow");
}

RenderFragment Delegate 생성

static RenderFragment MyFragment = build =>
    {
        for (int i = 0; i < alignment.FlawList.Count; i++)
        {
            build.OpenElement(i + 101, "button"); //Open Element
            build.AddAttribute(i + 101, "style",
                $"background-color:{alignment.ReturnColor(i)}");
            build.AddAttribute(i + 101, "onclick", ChangeArrow(i)); // Assign Func to the onclick Attribute
            build.AddContent(i + 101, $"{alignment.FlawList[i]} {i}");
            build.CloseComponent(); //Making sure to close Element
        }
    };    


아래 라이선스: CC-BY-SA with attribution
와 제휴하지 않음 Stack Overflow
이 KB는 합법적입니까? 예, 이유를 알아보십시오.
아래 라이선스: CC-BY-SA with attribution
와 제휴하지 않음 Stack Overflow
이 KB는 합법적입니까? 예, 이유를 알아보십시오.