Devexpress, view에서 사용법 기초

 

[글쓰기에 앞서, 필자는 이제 일 시작한지 4달 된 주니어입니다. 틀린 정보를 포함할 수 있습니다!]

 

- Devexpress로 asp.net 개발을 하려는데 wpf, window form 등에 비해 정보를 찾기 힘이 듭니다. 필자가 여러 시행착오를 끝에 알아낸 것을 공유하는 마음으로 글을 씁니다.

 

Devexpress로 개발하라고 회사에서 던져줬는데 공식 메뉴얼에는 Angular, React, Vue, jQuery 이런 라이브러리, 프레임워크로 ajax 개발 방법만 있고 view에서의 개발 코드는 예제 몇 개 만 딸랑 던져준다. 필자같이 개발 경험이 없고, 선임자가 없으면... 예제나 베껴야지...

 

예제들을 보면 크게 3가지 방법으로 데이터 바인딩 한다. 1. Model 생성 후 그대로 바인딩 2. JS로 생성 후 바인딩, 3. MVC 패턴을 이용해 바인딩. 그런데 열에 여덟은 Model 방식을 쓴다. 필자는 세 가지를 모두 연습해보니 MVC 패턴이 제일 편했다. 

 

데이터를 기본적으로 가져올 때 아래와 같은 코드를 작성한다.

@(
       Html.DevExtreme().Chart()
          .ID("chart")

ID chart로 나중에 지지고 볶는데 쓰고, 기본 템플릿이다.

Chart, DataGrid, SelectBox 등 기본 방법은 비슷하다.

 

Model을 사용할 때는 아래와 같이 가져온다.

@model IEnumerable<모델명>

...
.DataSource(Model)

 

 

JS를 사용하려면 아래와 같다.

.DataSource(new JS("dataSource"))

// javascript
var chartInstance = $("#chart").dxChart("instance");

// 옵션 설정
chartInstance.option("dataSource", dataSource);
...

// 랜더링
chartInstance.render();

 

 

MVC 패턴을 이용하면 아래와 같다.

.DataSource(d => d
.Mvc()
.Controller("컨트롤러 이름")
.LoadAction("Action의 이름")
.LoadParams(new { 파라미터명 = 입력할 값 }))

Model 생성 후 Controller 단의 Class를 Action으로 두면 된다. 

이후 만약에 추가적인 파라미터가 필요하면 LoadParams를 이용해 가져오면 된다.

만약에 가져오는 Model의 Key를 바꾸고 싶으면 .Key()를 이용해 가져오면 된다.

 

만약 기본 템플렛에 삭제, 업데이트 등을 추가하려면 아래 코드를 추가하면 된다.

.DeleteAction("삭제 시킬 Action Class")
.UpdateAction("업데이트 시킬 Action Class")

  

이후 

[HttpDelete]
public void(){
	삭제 할 함수
}

[HttpPut]
public IActionResult 업데이트 함수(int key, string values)
{
    JsonConvert.PopulateObject(values, location);
	
    _userdb.SaveChanges();

    return Ok();
}

아래와 같은 템플렛으로 수정해도 되고, 단순하게 HttpPost로 받아 삭제, 수정해도 된다. Get은 자체적으로 막아서 안된다.

 

이 Update와 Delete도 기본 템플릿 말고 원하는 모양으로 수정할 수 있는데 그건 나중에 생각나면 적겠다.

 

Devexpress에서 .OnContentReady() 등을 사용하면 내용물이 변할때마다 함수를 실행하는데 즉각적인 변화에 대한 함수를 사용할 수 있다. 이를 이용해 실제로 찍히는 값을 콘솔로 찍어서 코딩에 대입하는 경우가 많았다.

보통 두 가지 방법 중 하나를 썼는데, 막히면 사용해보는 게 좋을 것이다.

 

1. 

.OnContentReady(@<script>
    function(e) {
        console.log(e.component.option('dataSource'));
    }
</script>)

 

2.

.OnContentReady(@<script>
     function(e) {
         e.component.getDataSource().load().done(function (data) {
             console.log(data);
         });
     }
</script>)

 

@<script> 또는 @<text>로 두고 함수를 사용해 많이 사용했다.

e.component.getDataSource()와 이 값 load(), store()는 정말 많이 사용하니 알아두는 것이 좋다.

 

이것과 비슷한 종류로

.OnInitNewRow()로 새로 컬럼이 생기면 주고 싶은 값을 주거나,

.OnValueChanged()로 값이 바뀌면 이벤트를 주거나, (검색, 필터 선택, 페이지네이션 변화 등...)

.OnSelectionChanged()로 선택한 값이 바뀔 때 주는 이벤트,

.OnCellClick(), OnCellDblClick() 같은 클릭 시 이벤트 등이 있다.

 

이 이외에도

.ContentTemplate()를 사용하면 보여주는 내용에 세부 설명을 달거나, 시각적으로 알리는 표현을 다양화 할 수 있다.