[Blazor] MudTable 사용 시 DB편집 후 Table에 반영 안될때 Refresh 하는법

Default Table

@using System.Net.Http.Json
@using MudBlazor.Examples.Data.Models
@inject HttpClient httpClient

<MudTable Items="@Elements.Take(4)" Hover="true" Breakpoint="Breakpoint.Sm" Loading="@_loading" LoadingProgressColor="Color.Info">
    <HeaderContent>
        <MudTh>Nr</MudTh>
        <MudTh>Sign</MudTh>
        <MudTh>Name</MudTh>
        <MudTh>Position</MudTh>
        <MudTh>Molar mass</MudTh>
    </HeaderContent>
    <RowTemplate>
        <MudTd DataLabel="Nr">@context.Number</MudTd>
        <MudTd DataLabel="Sign">@context.Sign</MudTd>
        <MudTd DataLabel="Name">@context.Name</MudTd>
        <MudTd DataLabel="Position" HideSmall="_hidePosition">@context.Position</MudTd>
        <MudTd DataLabel="Molar mass">@context.Molar</MudTd>
    </RowTemplate>
</MudTable>

<MudSwitch @bind-Checked="_hidePosition">Hide <b>position</b> when Breakpoint=Xs</MudSwitch>
<MudSwitch @bind-Checked="_loading">Show Loading</MudSwitch>
@code { 
    private bool _hidePosition;
    private bool _loading;
    private IEnumerable<Element> Elements = new List<Element>();

    protected override async Task OnInitializedAsync()
    {
        Elements = await httpClient.GetFromJsonAsync<List<Element>>("webapi/periodictable");
    }

}

 

핵심 : DB에서 삭제하고 나서 로컬에서 보여지는 항목에서도 직접 삭제를 해주어야 Table에서 Refresh 된 것 처럼 보여진다.

 – Dialog 사용 안할때

@using System.Net.Http.Json
@using MudBlazor.Examples.Data.Models
@inject HttpClient httpClient
@inject TableItemsService tableItemsService


<MudTable Items="@tableItemObjList" Hover="true">
    <ToolBarContent>
         <MudButton StartIcon="@Icons.Material.Filled.AddCircle" Variant="Variant.Filled" Color="Color.Primary" OnClick="@CreateItems">Add</MudButton>
    </ToolBarContent>

    <HeaderContent>
        <MudTh>ID</MudTh>
        <MudTh>SIGN</MudTh>
        <MudTh>NAME</MudTh>
    <MudTh>Delete</MudTh>
    </HeaderContent>
    <RowTemplate>
        <MudTd DataLabel="ID">@context.ID</MudTd>
        <MudTd DataLabel="Sign">@context.SIGN</MudTd>
        <MudTd DataLabel="Name">@context.NAME</MudTd>
    <MudTd>
        <MudIconButton Variant="Variant.Filled" Icon="@Icons.Material.Filled.Delete" Color="Color.Error" OnClick="@(async() => await DeleteItems(context.ID))"></MudIconButton>			
    </MudTd>
     </RowTemplate>
</MudTable>


@code { 

    List<TableItems> tableItemObjList; // Table Items


    protected override async Task OnInitializedAsync()
    {
         tableItemObjList = await Task.Run(() => tableItemsService.GetAllItems());
    }

    protected async void CreateItems()
    {
        var newTableItem = new TableItems();

        // DB에 추가
        await tableItemsService.CreateItems(newMapItem);

        // 로컬 리스트에 추가 : Table 실시간 업데이트시 중요한 코드조각
        tableItemObjList.Add(newMapItem);

        StateHasChanged();
    }
    protected async Task DeleteItems(int mapId)
    {
        await Task.Delay(100);
        var itemToDelete = tableItemObjList.FirstOrDefault(item => item.ID == mapId);

        // DB에서 삭제
        await tableItemsService.DeleteItems(itemToDelete);

        // 로컬 리스트에서 항목 삭제 : Table 실시간 업데이트시 중요한 코드조각
        tableItemObjList.Remove(itemToDelete);

        StateHasChanged();


    }

   

}

 

 – Dialog 사용 할때

@using System.Net.Http.Json
@using MudBlazor.Examples.Data.Models
@inject HttpClient httpClient
@inject TableItemsService tableItemsService


<MudTable Items="@tableItemObjList" Hover="true">
    <ToolBarContent>
         <MudButton StartIcon="@Icons.Material.Filled.AddCircle" Variant="Variant.Filled" Color="Color.Primary" OnClick="@(async()=>await AddDialog())">Add</MudButton>
    </ToolBarContent>

    <HeaderContent>
        <MudTh>ID</MudTh>
        <MudTh>SIGN</MudTh>
        <MudTh>NAME</MudTh>
    <MudTh>Delete</MudTh>
    </HeaderContent>
    <RowTemplate>
        <MudTd DataLabel="ID">@context.ID</MudTd>
        <MudTd DataLabel="Sign">@context.SIGN</MudTd>
        <MudTd DataLabel="Name">@context.NAME</MudTd>
    <MudTd>
        <MudIconButton Variant="Variant.Filled" Icon="@Icons.Material.Filled.Delete" Color="Color.Error" OnClick="@(async() => await DeleteItems(context.ID))"></MudIconButton>			
    </MudTd>
     </RowTemplate>
</MudTable>


@code { 

    List<TableItems> tableItemObjList; // Table Items


    protected override async Task OnInitializedAsync()
    {
         tableItemObjList = await Task.Run(() => tableItemsService.GetAllItems());
    }

    // TODO:Add Dialog
    private async Task AddDialog()
    {
        var parameters = new DialogParameters<AddDialog>(); // Dialog로 변수 전달 방법
        parameters.Add(x => x.obj, "TableItemObj"); // Dialog.razor에서 [Parameter]로 변수 get,set
        var options = new DialogOptions { CloseOnEscapeKey = true, MaxWidth = MaxWidth.Medium, FullWidth = true };
        var dialog = DialogService.Show<AddDialog>("New Items", parameters, options);
        var result = await dialog.Result; // Dialog가 제대로 동작 했는지 결과를 받아옴 , Dialog에서도 ok를 보내줘야함

        // List에 나오도록 Refresh 해주는 코드
        var newTableItem = result.Data as TableItems;
        if (newTableItem != null)
        {
            tableItemObjList.Add(newTableItem);
            StateHasChanged();
        }
    }
}

 

 – AddDialog.razor (Item Create 부분)

@code {

    [Parameter] public string obj { get; set; }

    protected async Task CreateApplication()
    {
        if (obj == "TableItemObj")
        {
            await tableItemsService.CreateItems(TableItemObj);
            MudDialog.Close(DialogResult.Ok(TableItemObj)); // OK 사인 보내주는 
        }

        StateHasChanged();// UI 갱신
        MudDialog.Cancel();
    }

}

 

결론은 DB에서 뿐만 아니라 로컬에서도 반영 해주어야 한다~