본문 바로가기
카테고리 없음

[Blazor] RadzenGrid DataBinding 방법 3가지

by 학수씨 2020. 12. 5.

Blazor 로 관리자 사이트를 개발중이다.

일단 기본적으로 DBContext 를 지원하며 아주 손쉽게 편리하게 쿼리를 사용하지 않고도

DB의 Data Binding 이 되어 편할수 있다....

 

테이블 1개에서 간단한 조회 삭제 수정 만 진행될경우야 아주 편하고 빠르게 개발할수있는 장점이 있다지만.. 여러개의 테이블이 연결되어 JOIN 되어 사용하여 각각의 Event 마다 출력되는 Column 이 모두 다르다면.... DBContext 방식으로 개발하는건 거의 불가능하다..

 

해당 쿼리마다 Employee Class 를 만들어줄수도 없는 노릇이고.. 오히려 코드가 훨씬 더 복잡해지고 연결관계도 확인하기 어려우며 거기다.. 유지보수도 불가능할 정도로.. Table 하나만 바껴도 골치가 아플것이다.

 


일단 DB에서 DATA를 가져와 Binding 하는 방법에는 내가 알고있는 한 3가지 방법이 있다.

1. DBConect 사용방법

2. 직접적으로 DB에 접근하여 쿼리를 실행한후 Employee Class 에 자료를 저장하고 저장된 Class를 화면에 Rendering 하는 방법.

3. 직접적으로 DB에 접근하여 쿼리를 실행한후 Dynamic Generic List Variable 에 자료를 저장하고.. 해당 Dynamic variable 을 화면에 Rendering 하는 방법. 

 

일단 나처럼 화면 하나에서만 여러종류의 Select, Update, Insert 쿼리를 사용한다면... 개발이 힘들더래도 무조건 3번 방식으로 해야한다.

 

일단 Grid 의 경우 Blazor 에서 무료로 사용할수있는 Component 인 Radzen 의 Grid 를 사용하였다..

 

 

 

@page "/작업지시서/ERP가져오기"

@using System.Collections;
@using System.Diagnostics;
@using Radzen;
@using BlazorApp1.Data.AMOS;
@using BlazorApp1.Data.ERP;
@using System.Dynamic;


@inject DialogService DialogService
@inject NotificationService NotificationService

<div class="main_contents">
    <table style="table-layout:fixed;" border="0" cellspacing="0" cellpadding="0" width="100%" align="center" valign="center">
        <tbody>
            <tr>
                <td width="16" valign="top"><img src="/images/Content/body/bg_body_l.gif" width="16" height="50" align="absmiddle"></td>
                <td valign="top" background="/images/Content/body/bg_body_c.gif" style="background-repeat: repeat-x;">
                    <table border="0" cellspacing="0" cellpadding="0" width="100%">
                        <tbody>
                            <tr>
                                <td height="10"></td>
                            </tr>
                        </tbody>
                    </table>
                    <table border="0" cellspacing="0" cellpadding="0" width="100%">
                        <tbody>
                            <tr>
                                <td width="32"><img src="/images/Content/body/tip_01.gif" width="23" height="24" border="0"></td>
                                <td><b> 얼마에요 ERP 작업지시서 가져오기 </b></td>
                                <td width="47"></td>
                            </tr>
                        </tbody>
                    </table>
                    <table border="0" cellspacing="0" cellpadding="0" width="98%">
                        <tbody>
                            <tr>
                                <td height="2" colspan="2"></td>
                            </tr>
                            <tr>
                                <td width="125" height="2" bgcolor="#319ED9"></td>
                                <td bgcolor="#DFDEDF"></td>
                            </tr>
                        </tbody>
                    </table>
                </td>
                <td width="16" valign="top"><img src="/images/Content/body/bg_body_r.gif" width="16" height="50" align="absmiddle"></td>
            </tr>
            <tr>
                <td colspan="3">
                    <div class="contents">
                        <!--
                        /************************************************
                        * 검색 헤더
                        ************************************************/
                         -->
                        <div>
                            <table class="table" border="0" style="width: auto; margin-left: 10px; margin-bottom:0px;">
                                <tbody>
                                    <tr class="success">
                                        <td style="text-align: right; width: auto;"><b>&nbsp;등록일자 :</b></td>
                                        <td>
                                            <RadzenDatePicker @bind-Value=@date_등록일자 DateFormat="d" Change=@(args => date_등록일자_OnChange(args, "yyyyMMdd")) />
                                        </td>
                                        <td style="text-align: right; width: auto;"><b>&nbsp;표시항목 :</b></td>
                                        <td>
                                            <select class="form-control" @onchange="@cbjob_OnChange">
                                                <option value="">전체</option>
                                                <option value="1">미수신</option>
                                                <option value="2">수신완료</option>
                                            </select>
                                        </td>
                                        <td style="text-align: right; width: 60px;">
                                            <input class="btn btn-default" type="button" value="조 회" @onclick="btn조회_OnClick">
                                        </td>
                                        <td style="text-align:right; width:60px;">
                                            <input class="btn btn-success" type="button" value="엑셀출력">
                                        </td>
                                    </tr>
                                    <tr>
                                        <td colspan="100" style="font-size:11px;"> ※ 외부연동으로 인하여 1일씩만 조회가 가능합니다.</td>
                                    </tr>
                                </tbody>
                            </table>
                            <div style="margin:0 10px 10px 10px;">


                                <RadzenGrid @ref="grid2" Data="@list2" TItem="Dictionary<string, object>" Count="@count2" LoadData="@LoadData2" AllowSorting="true" AllowFiltering="true" AllowPaging="false" PageSize="4">
                                    <Columns>
                                        
                                        <RadzenGridColumn Width="30px" TItem="Dictionary<string, object>" Property="CHECKED" Title="체크" Bubble="false" Filterable="false" Sortable="false" TextAlign="TextAlign.Center">
                                            <Template Context="data">
                                                <RadzenCheckBox @bind-Value="@data["CHECKED"]" TValue="object" />
                                            </Template>
                                        </RadzenGridColumn>


                                        <RadzenGridColumn Width="65px" TItem="Dictionary<string, object>" Property="YMD_INPUT" Title="작성일자" TextAlign="TextAlign.Center">
                                            <Template Context="data">

                                                <span style="color:red;">@data["YMD_INPUT"].ToString()</span>

                                            </Template>
                                        </RadzenGridColumn>
                                    </Columns>
                                </RadzenGrid>





                                <RadzenGrid @ref="grid" Data="@list" TItem="IQM_WORKS" Count="@count" LoadData="@LoadData" AllowSorting="false" AllowFiltering="true" AllowPaging="false" PageSize="4">
                                    <Columns>

                                        <RadzenGridColumn Width="30px" TItem="IQM_WORKS" Property="CHECKED" Title="체크" Bubble="false" Filterable="false" Sortable="false" TextAlign="TextAlign.Center">
                                            <Template Context="data">
                                                <RadzenCheckBox @bind-Value="@data.CHECKED" TValue="bool" />
                                            </Template>
                                        </RadzenGridColumn>

                                        <RadzenGridColumn Width="65px" TItem="IQM_WORKS" Property="YMD_INPUT" Title="작성일자" TextAlign="TextAlign.Center">
                                            <Template Context="data">

                                                @if (data.YMD_INPUT == "20201205")
                                                {
                                                    <span style="color:red;">@data.YMD_INPUT</span>
                                                }
                                                else
                                                {
                                                    <span style="color:blue;">@data.YMD_INPUT</span>
                                                }

                                            </Template>
                                        </RadzenGridColumn>

                                        <RadzenGridColumn Width="65px" TItem="IQM_WORKS" Property="ITEM1" Title="수주일자" TextAlign="TextAlign.Center" />
                                        <RadzenGridColumn Width="65px" TItem="IQM_WORKS" Property="ITEM2" Title="마감일자" TextAlign="TextAlign.Center" />
                                        <RadzenGridColumn Width="80px" TItem="IQM_WORKS" Property="NO_WORK" Title="작업지시서NO" TextAlign="TextAlign.Center" />

                                        <RadzenGridColumn Width="80px" TItem="IQM_WORKS" Property="수신여부" Title="수신여부" Filterable="false" TextAlign="TextAlign.Center" />

                                        <RadzenGridColumn Width="80px" TItem="IQM_WORKS" Property="ID_INSERT" Title="작성자" TextAlign="TextAlign.Center" />
                                        <RadzenGridColumn Width="200px" TItem="IQM_WORKS" Property="NM_CUSTOMER" Title="납품처" TextAlign="TextAlign.Left" />
                                        <RadzenGridColumn Width="200px" TItem="IQM_WORKS" Property="TXT_GOODS" Title="적요" TextAlign="TextAlign.Left" />
                                        <!--
            <RadzenGridColumn Width="100px" TItem="IQM_WORKS" Property="YMD_OUT" Title="자재불출일" TextAlign="TextAlign.Center"/>
            -->
                                        <RadzenGridColumn Width="200px" TItem="IQM_WORKS" Property="TXT_MEMO" Title="비고" TextAlign="TextAlign.Left" />
                                        <RadzenGridColumn Width="200px" TItem="IQM_WORKS" Property="ITEM5" Title="납품정보" TextAlign="TextAlign.Left" />
                                    </Columns>
                                </RadzenGrid>


                            </div>

                        </div>
                        <!--
                        /************************************************
                        * 매크로
                        ************************************************/
                         -->
                        <div>



                        </div>



                    </div>

                </td>
            </tr>
        </tbody>
    </table>

</div>
using BlazorApp1.Data.AMOS;
using BlazorApp1.Data.ERP;
using Microsoft.AspNetCore.Components;
using Microsoft.EntityFrameworkCore.Metadata.Internal;
using Radzen;
using Radzen.Blazor;
using System;
using System.Collections;
using System.Collections.Generic;
using System.Dynamic;
using System.Threading.Tasks;


namespace BlazorApp1.Pages.작업지시서
{
    public partial class ERP가져오기
    {
        protected override async Task OnInitializedAsync()
        {
            await Init();
        }

        #region Select_List
        private async Task Init()
        {
            
        }
        #endregion







        #region RadzenGrid
        RadzenGrid<Dictionary<string, object>> grid2;
        IList<Dictionary<string, object>> list2 = null;
        int count2;

        async Task LoadData2(LoadDataArgs args)
        {
            count2 = 1;
            list2 = new List<Dictionary<string, object>>();

            Dictionary<string, object> dic = new Dictionary<string, object>();
            dic["YMD_INPUT"] = "TEST";
            dic["CHECKED"] = false;

            list2.Add(dic);



            StateHasChanged();
        }
        #endregion






        #region RadzenGrid
        RadzenGrid<IQM_WORKS> grid;
        IList<IQM_WORKS> list = null;
        int count;

        async Task LoadData(LoadDataArgs args)
        {
            string dt = date_등록일자.Value.ToString("yyyyMMdd");

            string sql = @"

SELECT [CD_COMPANY]
  FROM [dbo].[]
  WHERE 1=1
    AND YMD_INPUT = '{YMD_INPUT}'
  ORDER BY
    NO_WORK DESC
";
            sql = sql.Replace("{YMD_INPUT}", dt);

            list = null;
            list = SQLServer.ExecuteReaders_IList<IQM_WORKS>(Global.startup.ERPConnection, sql);
            count = list.Count;

            StateHasChanged();
        }
        #endregion









        #region Form Event

        DateTime? date_등록일자 = DateTime.Now;
        private async void date_등록일자_OnChange(DateTime? value, string format)
        {
            await LoadData(new LoadDataArgs() );

            
        }
        

        private async void btn조회_OnClick(EventArgs e)
        {

            list[0].ITEM1 = list[0].CHECKED.ToString();
            list[1].ITEM1 = list[1].CHECKED.ToString();


            if((bool)(list2[0]["CHECKED"]) == true)
                list2[0]["YMD_INPUT"] = "Y";
            if ((bool)(list2[0]["CHECKED"]) == false)
                list2[0]["YMD_INPUT"] = "N";



            StateHasChanged();
            //await LoadData(new LoadDataArgs());
        }

        string cb_job_Value = "";
        private async void cbjob_OnChange(ChangeEventArgs e)
        {
            cb_job_Value = Converter.ToString(e.Value);
        }

        #endregion










    }
}

댓글