이번에 회사에서 윈폼에서 웹으로 넘어가게 되며 kendo UI Grid라는 것을 사용해보았다.
kendo UI는
Part 1 - Hello jQuery | Kendo UI Third-Party Frameworks | Kendo UI for jQuery (telerik.com)
Part 1 - Hello jQuery | Kendo UI Third-Party Frameworks | Kendo UI for jQuery
Third Party Libraries / ASP.NET Web Forms This tutorial will walk you through building an HTML5 application in ASP.NET. In this first out of five parts you are going to learn: How to install jQuery How to use jQuery with Web Forms How to use the Internet E
docs.telerik.com
위 자료를 참조하였다.
영어를 보며 최대한 이해해보려고 노력했고, 이해하기 조금 어려웠다.
db 연결은 LINQ to SQL 클래스를 사용했고 해당 부분은 동영상을 참조하면 될 것이다.
이글에서는 GRID를 사용하기 위해서 Controller 단과 클라이언트 html 파일 위주로 정리하겠다.
public class WM_BILLOFMATERIAL_CONTROLLER : ApiController
{
private Data.NorthwindContextDataContext _context = new Data.NorthwindContextDataContext();
HttpRequest _request = HttpContext.Current.Request;
public Models.Response Get()
{
int take = _request["take"] == null ? 10 : int.Parse(_request["take"]);
int skip = _request["skip"] == null ? 0 : int.Parse(_request["skip"]);
var bom = (from b in _context.WM_BILLOFMATERIAL
select new Models.WM_BILLOFMATERIAL(b)).Skip(skip).Take(take).ToArray();
return new Models.Response(bom, _context.WM_BILLOFMATERIAL.Count());
}
public HttpResponseMessage Post()
{
var response = new HttpResponseMessage();
try
{
var bom_update = (from bom in _context.WM_BILLOFMATERIAL
where bom.ITEMID == _request["ITEMID"]
select bom).FirstOrDefault();
if (bom_update != null)
{
bom_update.QTY = _request["QTY"] == null ? bom_update.QTY : Convert.ToDecimal(_request["QTY"]);
_context.SubmitChanges();
}
else
{
response.StatusCode = System.Net.HttpStatusCode.InternalServerError;
response.Content = new StringContent(string.Format("the Item with itemId {0} was not found in the database"));
}
return response;
}catch (Exception ex)
{
response.StatusCode = System.Net.HttpStatusCode.InternalServerError;
response.Content = new StringContent(string.Format("there was an error updating bom"));
return response;
}
}
}위 컨트롤러에는 Get 메서드와 Post 메서드가 있다.
해당 메소드들을 통해 Get 요청과 Post 요청을 처리한다.
뭔가 매핑을 하지않아도 메서드 이름을 Get, Post로 정한 다음에 사용하기만 해도 처리가 된다.
Controller가 수행되는 순서에 대해 정리해보겠다.
클라이언트에서 Controller로 get, post 등의 요청을 하면 제일 먼저 클래스 가장 위의 Data.NorthwindContextDataContext _context가 가장 먼저 실행되고 다음으로
HttpRequest _request = HttpContext.Current.Request 가 실행되었다.
해당 변수들은 생성자에 들어가있지도 않은데 디버깅 포인트가 해당 포인트에서 가장 먼저 잡히는 것이 이해가 잘 안 되었다. 그래서 NorthwindContextDataContext를 Ctrl + 우클릭으로 타고 들어가 보니 mapping이란 키워드가 들어간 변수가 있었다. 아마 자동으로 매핑해주기 위해서 생성된 클래스 같다.
다음 순서로 URL 경로가 맞다면 해당 요청에 해당되는 POST 또는 GET 메소드가 실행된다.
GET 메소드의 경우 아래와 같이 구현되어있다. 우선 핵심인 LINQ가 사용된 부분을 보자면
in 뒤에있는뒤에 있는 클래스들 통해 값을 받고 from 뒤에 있는 변수 이름에 값을 넣고 select를 통해서 값을 표현할 방식을 정한다. 그다음 take과 skip은 kendo grid에서 갑을 한 번에 얼마나 가지고 올지를 정하는 부분이다. 그리고 데이터를 성공적으로 가져왔다면 Models 클래스에 있는 Response에 해당 값을 담아서 클라이언트로 반환을 해준다. 아래 코드를 통해 말하자면 한 페이지에 10개의 행을 나타내겠다는 의미이다.
public Models.Response Get()
{
int take = _request["take"] == null ? 10 : int.Parse(_request["take"]);
int skip = _request["skip"] == null ? 0 : int.Parse(_request["skip"]);
var bom = (from b in _context.WM_BILLOFMATERIAL
select new Models.WM_BILLOFMATERIAL(b)).Skip(skip).Take(take).ToArray();
return new Models.Response(bom, _context.WM_BILLOFMATERIAL.Count());
}다음으로 Post 메소드를 살펴보겠다. Post 메서드는 아래와 같이 구현되어있다.
public HttpResponseMessage Post()
{
var response = new HttpResponseMessage();
try
{
var bom_update = (from bom in _context.WM_BILLOFMATERIAL
where bom.ITEMID == _request["ITEMID"]
select bom).FirstOrDefault();
if (bom_update != null)
{
bom_update.QTY = _request["QTY"] == null ? bom_update.QTY : Convert.ToDecimal(_request["QTY"]);
_context.SubmitChanges();
}
else
{
response.StatusCode = System.Net.HttpStatusCode.InternalServerError;
response.Content = new StringContent(string.Format("the Item with itemId {0} was not found in the database"));
}
return response;
}catch (Exception ex)
{
response.StatusCode = System.Net.HttpStatusCode.InternalServerError;
response.Content = new StringContent(string.Format("there was an error updating bom"));
return response;
}
}위 포스트 메서드는 사용자가 웹 화면에서 특정 아이템의 재고량을 변화시킬 때 사용되는 메서드이다. 사용자가 특정 아이템의 재고량을 수정하고 업데이트 버튼을 클릭하면 수행된다. 사용자가 입력한 값이 만약에 null이라면 업데이트하지 않도록 하거나 에러가 발생하게 되면 처리해주는 로직이 추가되어 있다.
다음으로 Default.aspx를 살펴보겠다. 해당 파일은 사용자가 사용할 UI 단 웹이다. 해당 파일 중 script 부분을
집중적으로 분석해보겠다.
<script>
$(function () {
$("#employeesGrid").kendoGrid({
columns: [
{ field: "ITEMID", title: "아이템ID" },
{ field: "QTY", title: "수량" },
"ISVALID",
{ command: ["edit", "destroy"], title: ""}
],
sortable: true,
pageable: true,
// editable: true,
editable: "inline",
dataSource: new kendo.data.DataSource({
transport: {
read: "api/WM_BILLOFMATERIAL_",
update: {
url: function (WM_BILLOFMATERIAL) {
//return "api/WM_BILLOFMATERIAL_/" + WM_BILLOFMATERIAL.ITEMID
return "api/WM_BILLOFMATERIAL_/" + WM_BILLOFMATERIAL.ITEMID
},
type: "POST"
}
},
pageSize: 15,
serverPaging: true,
schema: {
// the array of repeating data elements (employees)
data: "Data",
// the total count of records in the whole dataset. used
// for paging
total: "Count",
model: {
id: "ITEMID",
fields: {
ITEMID: { editable: false , nullable: false },
QTY: { validation: { required: true }, nullable: false },
ISVALID: { validation: { required: true }, nullable: false }
}
}
}
})
});
});
</script>위 스크립트 태그 안에 있는 내용은 전부 하나의 kendoGrid를 위한 기능이다. 해당 함수의 기능을 위에서부터 아래로 살펴보도록 하겠다.
columns
가장 위에 있는 columns에는 columns 이름 그대로 kendoGrid에서 나타나게 될 속성들의 모임이다. 만약에 속성 이름 그대로 안 쓰고 다른 이름을 쓰고 싶다면 { filed: "ITEMID", title: "아이템 ID" }라고 쓰면 되고 속성 이름을 변경 없이 그대로 사용하고 싶으면 "ISVALID" 그냥 속성 이름을 문자열 형태로 주면 된다.
sortable
위 sotable 변수에 true 값을 넣어주게 되면 속성 이름을 클릭할 수 있게 되는데 클릭을 하면 해당 속성 값을 기준으로 그리드의 행들이 정렬 되게 된다.
pageable
그리드의 모든 속성을 보여주지 않고 한 페이지에 해당되는 행의 수만큼 표현해서 보여주는 설정을 할 수 있도록 한다.
editable
편집을 가능하게 한다. true나 혹은 inline 값을 할당할 수 있었는데 true를 넣게 되면 속성 개별로 값을 할당할 수 있고 inline 값을 넣으면 한 행씩 편집할 수 있도록 한다.
DataSource
해당 부분을 통해서 서버로 데이터를 어떻게 보낼지 결정할 수 있다.
pageSize
한 번에 불러올 수 있는 행의 개수를 정한다.
serverPaging
해당 속성 값을 true로 주면 서버에서 반환할 때 page의 크기를 조절할 수 있다.
schema
schema를 통해 각 속성들의 밸리데이션을 클라이언트 단에서 체크할 수 있게 된다.
'C#' 카테고리의 다른 글
| 한번만 실행되게 하는방법 (0) | 2021.05.18 |
|---|---|
| .NET Reflection (0) | 2021.03.29 |
| Dbset 직접 바인딩 에러 해결법 (0) | 2021.02.25 |
| 외부 프로젝트 참조하기 (0) | 2021.02.25 |
| [Winform] Dock (0) | 2021.01.22 |
