[Blazor] 데이터와 함께 page 이동하기

내가 하고싶었던 건 table의 td를 클릭할 경우 다른 page로 이동하는 것이었다.

td @onclick= 어쩌고저쩌고 해서 바로 넘길 수 있을 줄 알았는데 내 실력 밖의 일이었다.

그럼 나는 어떻게 이 문제를 해결했을까?

data와 함께 page 이동하기 렛츠고 ~~

 

업무 프로젝트라 내용을 가리다보니 지저분한 점 이해부탁드립,,,, 꾸벅,,,,

내가 하고싶은 건 저 View DCT를 클릭하면 다른 Page로 이동하는데 해당 no를 가지고 넘어가는 것이었다.

화면상의 table을 뿌려주는 코드는 아래와 같다.

@page "/"
@inject DcnListService DcnListService

@if (dcnList != null)
{
    <table class="table">
        <thead>
            <tr>
                <th>No.</th>
                <th>Name</th>
                <th>Description</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var dcn in dcnList)
            {
                <tr>
                    <td>@dcn.NO</td>
                    <td>@dcn.NAME</td>
                    <td>@dcn.DESCRIPTION</td>
                    <td>View DCT</td>
                </tr>
            }
        </tbody>
    </table>
}

@code {
    List<W_DCN> dcnList;

    protected override async Task OnInitializedAsync()
    {
        dcnList = await DcnListService.GetDCNList();
    }

    private async Task GetDetails(string dcn_no)
    {
        Dictionary<string, object> dcn = await DcnListService.GetDetail(dcn_no);
        detail = dcn;
    }
}

 

 

1. 데이터를 넘겨줄 PAGE

우선 page를 넘겨주려면 NavigationManager를 사용해야 한다.

따라서 @page밑에 @inject로 NavigationManager NavManager를 선언해준다.

@inject NavigationManager NavManager

그리고 td를 클릭할 경우 바로 page를 넘겨주는 것은 어떻게 하는지 모르겠어서 메소드로 구현했다.

page_load라는 메소드를 생성하고 /dcnlist 라는 page로 이동하도록 한다.

여기서 dcn_no라는 데이터를 가지고 page를 이동해야 하기 때문에 +dcn_no를 해준다

이렇게 하면 dcn_no가 123이라는 가정하에 이동한 page의 url은 /dcnlist/123이 된다.

@code {
    protected void page_load(string dcn_no)
    {
        NavManager.NavigateTo("/dcnlist/" + dcn_no);
    }
}

event 메소드도 구현을 했으니 td에 click event를 추가해준다.

<td @onclick="(() => page_load(dcn.DCN_NO))">View DCT</td>

데이터를 넘겨줄 page의 최종 코드는 다음과 같다.

@page "/"
@inject DcnListService DcnListService
@inject NavigationManager NavManager

@if (dcnList != null)
{
    <table class="dcn_table">
        <thead>
            <tr>
                <th>No.</th>
                <th>Name</th>
                <th>Description</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var dcn in dcnList)
            {
                <tr>
                    <td>@dcn.DCN_NO</td>
                    <td>@dcn.DCN_NAME</td>
                    <td>@dcn.DESCRIPTION</td>
                    <td @onclick="(() => page_load(dcn.DCN_NO))">View DCT</td>
                </tr>
            }
        </tbody>
    </table>
}

@code {
    List<W_DCN> dcnList;

    protected override async Task OnInitializedAsync()
    {
        dcnList = await DcnListService.GetDCNList();
    }

    protected void page_load(string dcn_no)
    {
        NavManager.NavigateTo("/dcnlist/" + dcn_no);
    }
}

 

 

2. 데이터를 받을 PAGE

/dcnlist 라는 page를 호출할 준비는 모두 되었으니 이제 호출받을 page의 .razor파일을 생성한다.

나는 DctDetail.razor라는 파일을 만들었다.

@page "/dcnlist/{dcn_no}"
@inject DcnListService DcnListService

@if (dctList != null)
{
    <table>
        <thead>
            <tr>
                <th>DCT No.</th>
                <th>STATUS</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var dct in dctList)
            {
                <tr>
                    <td>@dct.DCN_NO</td>
                    <td>@dct.STATUS</td>
                    <td>View DCT</td>
                </tr>
            }
        </tbody>
    </table>
}

@code {
    [Parameter]
    public string dcn_no { get; set; }

    List<W_DCT> dctList;
    
    protected override async Task OnInitializedAsync()
    {
        dctList = await DcnListService.GetDCTList(dcn_no);
    }
}

여기서 중요한 것은 @page /dcnlist/{dcn_no}인데 /dcnlist/는 동일해야 하고

+ data로 넘겨줬던 데이터가 {}안으로 들어오게 된다.

또 {}안의 변수는 parameter로써 @code 안에서 [Parameter]로 정의되어 있어야 한다.