ASP.NET Core FlexGrid의 데이터 유효성 검사 기술

추천0

페이지 정보

작성자 GrapeCity

작성일 2021-08-11 16:49 조회 4,367회 댓글 0건

검색

본문

첨부파일

DataValidation-Techniques.zip (889.1K)

관련링크

FlexGrid는 기능이 풍부한 DataGrid 컨트롤로, 사용자 정의 구현을 위한 필터링, 그룹화, 정렬, 편집 및 확장 가능한 API를 기본으로 제공합니다. 이러한 기능 세트로 인해 최고의 DataGrid 컨트롤 중 하나에 해당합니다. FlexGrid의 풍부한 기능은 Winforms, WPF, ASP.NET MVC, Javascript, Blazor 및 Xamarin을 비롯한 크로스 플랫폼에서 사용할 수 있습니다.

이 블로그는 C1 ASP에 초점을 맞출 예정입니다. 클라이언트와 서버 모두에 적용할 수 있는 NetCore FlexGrid 및 다양한 유효성 검사 기술입니다.

Home Décor Business에서 FlexGrid를 사용하여 재고 관리에 사용하는 웹 기반 온라인 재고 시스템의 사용 사례를 살펴보겠습니다.

인벤토리 매니저의 예를 들어 보겠습니다.

그들은 판매, 반품 또는 품목의 가격 변경을 기반으로 주말에 재고 기록을 업데이트해야 합니다. 각 레코드를 업데이트할 때 반드시 기억해야 하는 필드 레벨 유효성 검사가 있을 수 있습니다.

예를 들어 설명란이 비어 있지 않아야 하거나 가격이 특정 범위 내에 있어야 합니다. 이러한 유효성 검사를 항상 준수하는 것은 쉽지 않을 것입니다.

그러나 FlexGrid를 사용하면 이러한 유효성 검사를 준수하고 사용자가 오류의 원인을 파악하기 위한 메시지를 간단히 제공할 수 있습니다.

다음은 FlexGrid를 사용한 유효성 검사의 예입니다.

ComponentOne FlexGrid를 사용하면 다음과 같은 데이터 유효성 검사 기술을 통해 데이터를 확인할 수 있습니다.

비간섭 유효성 검사
CollectionView의 getError 메서드
FlexGrid의 항목 유효성 검사 메서드입니다.
FlexGrid의 cellEditEnding 이벤트

비간섭 유효성 검사

비간섭 유효성 검사는 모델 클래스의 기존 유효성 검증 속성을 적용하고 클라이언트 측에서 규칙을 정의하지 않고 모델 클래스에 대한 규칙을 정의하여 데이터를 검증하기 위해 클라이언트 측에서 재사용하는 데 사용할 수 있습니다.

이를 위해 다음 파일이 포함되어야 합니다.

<script src="~/lib/jquery/dist/jquery.min.js"></script> @*If not already included in the project*@
<script src="~/lib/jquery-validation/dist/jquery.validate.min.js"></script>
<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>

필수 파일을 추가한 후 Required 및 Range 속성을 사용하여 유효성 검사 규칙을 추가할 수 있습니다. 이러한 속성은 비간섭 유효성 검사에 대한 규칙을 추가하려면 필수 사항입니다.

유효성 검사 규칙이 있는 모델 클래스:

public class Stocks
  {
      [Required(AllowEmptyStrings =false,ErrorMessage ="{0} cannot be empty!")]
      public string StockID { get; set; }

      [Required(AllowEmptyStrings = false, ErrorMessage = "{0} cannot be empty!")]
      public string Description { get; set; }

      [Required(AllowEmptyStrings = false, ErrorMessage = "{0} cannot be empty!"), StringLength(11, ErrorMessage = "The value should be length of 11!")]
      [RegularExpression("LOT-GCF-[0-9]{3}",ErrorMessage = "It should start with “LOT - GCF -” and last 3 character should be digits!")]
      public string LotNo { get; set; }

      [Required]
      [Range(10,1000,ErrorMessage = "The {0} should be between 10 and 1000!")]
      public double Price { get; set; }

      [Required]
      [Range(0, 0.20,ErrorMessage = "The {0} should be between 0 and 20%")]
      public double Discount { get; set; }

      [Required]
      [Range(0, int.MaxValue, ErrorMessage = "Please enter a positive number!")]
      public int Quantity { get; set; }

      public bool InStock { get; set; }          

    }

프로젝트에 필요한 파일이 포함되어 있고 모델 클래스에 대한 규칙이 정의되어 있습니다. 이후 모델은 FlexGrid를 사용하여 데이터를 바인딩할 수 있습니다.

<script>
      // this script is to remove the % from the editing cell.
      function onBeginningEdit(s, e) {
          if (s.columns[e.col].binding == "Discount") {
              setTimeout(function () {
                  s.activeEditor.value = s.getCellData(e.row, e.col);
              })
          }
      }
  </script>
  <c1-flex-grid id="unobtrusiveGrid" style="max-height:500px;" auto-generate-columns="false" beginning-edit="onBeginningEdit">
      <c1-items-source source-collection="Model" disable-server-read="true"></c1-items-source>
      <c1-flex-grid-column binding="StockID" header="Stock ID" is-read-only="true"></c1-flex-grid-column>
      <c1-flex-grid-column binding="LotNo" header="Lot"></c1-flex-grid-column>
      <c1-flex-grid-column binding="Description" header="Description"></c1-flex-grid-column>
      <c1-flex-grid-column binding="Price" header="Price" format="c2"></c1-flex-grid-column>
      <c1-flex-grid-column binding="Discount" header="Discount" format="p2"></c1-flex-grid-column>
      <c1-flex-grid-column binding="Quantity" header="Qunatity"></c1-flex-grid-column>
      <c1-flex-grid-column binding="InStock" header="In Stock?"></c1-flex-grid-column>
  </c1-flex-grid>

기본 제공 유효성 검사이므로 편집 셀 입력에 data- 속성을 추가하고 제목 속성을 사용하여 오류 메시지를 표시합니다. 따라서 표시되는 오류 메시지는 사용자 정의할 수 없습니다.

참고: 비간섭 유효성 검사를 사용하는 동안 입력 값이 유효하지 않으면 cellEditEnding 이벤트의 cancel 속성이 true로 설정됩니다. cancel이 true인지 확인하면 CellEditEndingEventArgs.에 대해 stayInEditMode 속성을 true로 설정하여 편집 모드에서 셀을 보존할 수 있습니다.

온라인 데모를 찾고 있다면, 여기 비간섭 유효성 검사 데모가 있습니다.

비간섭

CollectionView의 getError 메서드

CollectionView의 getError 메서드는 CollectionView를 사용하여 클라이언트 측에서 FlexGrid 유효성 검사에 사용됩니다. 행의 데이터 항목에 오류가 있는 경우 셀과 행 헤더가 강조 표시됩니다. 이 기능은 세 개의 매개 변수를 수락하고, 조건에 따라 오류 메시지를 반환하며, 오류가 없으면 null을 반환합니다.

getError 메서드는 각 데이터 항목 및 해당 속성에 대해 반복하고 정의된 조건에 따라 값을 확인합니다.

<script>
  function getGridErrors(item, prop) {
      switch (prop) {
          case "Price":
              return (item[prop] < 100) ? "Price can't be less than 100!" : null;
              break;
          case "Discount":
              return (item[prop] > 0.20) ? "Discount can't be greater than 20%!" : null;
              break;
          case "InStock":
              if (item[prop] && item["Quantity"] <= 0) {
                  return "Quantity can't be 0 or lesser when InStock is true!";
              } else if (!item[prop] && item["Quantity"] > 0) {
                  return "Quantity can't be greater than 0 when InStock is false!";
              } else {
                  return null;
              }
              break;
          case "Quantity":
              if (item[prop] < 0) {
                  return "Quantity should not be less than 0!";
              } else if (!item["InStock"] && item[prop] > 0) {
                  return "Quantity can't be greater than 0 if InStock is false!";
              } else if (item["InStock"] && item[prop] == 0) {
                  return "Qunatity can't be 0 if the InStock is true!"
              } else {
                  return null;
              }
              break;
          default:
              return null;
      }
  }
</script>

FlexGrid의 showErrors를 true로 설정하면 잘못된 셀을 빨간색 테두리로 강조 표시할 수 있으며, validateEdits를 true로 설정하면 값이 올바르지 않을 때까지 셀을 편집 모드에서 종료할 수 없습니다.

다음은 FlexGrid with CollectionView 유효성 검사 구현입니다.

<c1-flex-grid id="getErrorGrid" style="max-height:500px;" auto-generate-columns="false" show-errors="true" validate-edits="true">
  <c1-items-source source-collection="Model" disable-server-read="true" get-error="getGridErrors"></c1-items-source>
  <c1-flex-grid-column binding="StockID" header="Stock ID"></c1-flex-grid-column>
  <c1-flex-grid-column binding="LotNo" header="Lot"></c1-flex-grid-column>
  <c1-flex-grid-column binding="Description" header="Description"></c1-flex-grid-column>
  <c1-flex-grid-column binding="Price" header="Price" format="c2"></c1-flex-grid-column>
  <c1-flex-grid-column binding="Discount" header="Discount" format="p2"></c1-flex-grid-column>
  <c1-flex-grid-column binding="Quantity" header="Qunatity"></c1-flex-grid-column>
  <c1-flex-grid-column binding="InStock" header="In Stock?"></c1-flex-grid-column>
</c1-flex-grid>

참고: 이 메서드는 FlexGrid가 인바운드 모드인 경우에만 사용할 수 있습니다.

온라인 데모를 찾고 있다면 여기 CollectionView의 getError 데모가 있습니다.

GetError

FlexGrid의 항목 유효성 검사 메서드입니다.

ItemValidator 메서드도 콜백을 허용하지만, 콜백은 각 셀을 통해 반복되고 셀 값의 유효성을 검사합니다. 바인딩된 FlexGrid와 바인딩되지 않은 FlexGrid에 모두 사용할 수 있습니다.

행 및 열 인덱스를 허용하며 getCellData() 메서드를 사용하여 데이터를 가져올 수 있습니다.

열 인덱스를 기반으로 열의 바인딩은 행 인덱스를 기반으로 합니다.

FlexGrid에 대한 유효성 검사를 적용하기 위해 데이터 항목을 가져올 수 있습니다.

<script>
  function getGridItemErrors(row, col, parsing) {
      var grid = wijmo.Control.getControl("#itemValidatorGrid");
      var prop = grid.columns[col].binding;
      var item = grid.rows[row].dataItem;
      switch (prop) {
          case "Price":
              return (item[prop] < 100) ? "Price can't be less than 100!" : null;
              break;
          case "Discount":
              return (item[prop] > 0.20) ? "Discount can't be greater than 20%!" : null;
              break;
          case "InStock":
              if (item[prop] && item["Quantity"] <= 0) {
                  return "Quantity can't be 0 or lesser when InStock is true!";
              } else if (!item[prop] && item["Quantity"] > 0) {
                  return "Quantity can't be greater than 0 when InStock is false!";
              } else {
                  return null;
              }
              break;
          case "Quantity":
              if (item[prop] < 0) {
                  return "Quantity should not be less than 0!";
              } else if (!item["InStock"] && item[prop]>0) {
                  return "Quantity can't be greater than 0 if InStock is false!";
              } else if (item["InStock"] && item[prop] == 0) {
                  return "Qunatity can't be 0 if the InStock is true!"
              } else {
                  return null;
              }
              break;
          default:
              return null;
      }
  }
</script>

<c1-flex-grid id="itemValidatorGrid" style="max-height:500px;" auto-generate-columns="false" item-validator="getGridItemErrors" show-errors="true" validate-edits="true">
  <c1-items-source source-collection="Model" disable-server-read="true" ></c1-items-source>
  <c1-flex-grid-column binding="StockID" header="Stock ID"></c1-flex-grid-column>
  <c1-flex-grid-column binding="LotNo" header="Lot"></c1-flex-grid-column>
  <c1-flex-grid-column binding="Description" header="Description"></c1-flex-grid-column>
  <c1-flex-grid-column binding="Price" header="Price" format="c2"></c1-flex-grid-column>
  <c1-flex-grid-column binding="Discount" header="Discount" format="p2"></c1-flex-grid-column>
  <c1-flex-grid-column binding="Quantity" header="Qunatity"></c1-flex-grid-column>
  <c1-flex-grid-column binding="InStock" header="In Stock?"></c1-flex-grid-column>
</c1-flex-grid>

ItemValidator

FlexGrid의 cellEditEnding 이벤트

유효성 검사는 dataItem 또는 FlexGrid 셀의 다른 필드에 종속될 수도 있습니다. 이 경우 cellEditEnding 이벤트는 새 값과 이전 값을 제공하므로 유용합니다. 다른 값도 getCellData() 메서드를 사용하여 가져올 수 있습니다.

예: 재고에는 InStock 속성이 있으며 수량에 따라 다릅니다.

Quantity가 0이면 InStock이 true일 수 없으며 그 반대의 경우도 마찬가지입니다.

이 경우 입력 값이 유효하지 않은 경우 cellEditEnding 이벤트가 편집 모드를 유지하고 오류 클래스를 추가하고 도구 설명을 표시하도록 처리됩니다.

<script>
  var tip;
  c1.documentReady(function () {
      tip = new wijmo.Tooltip();
      tip.cssClass = "wj-error-tip";
  })
  function gridCellEditEnding(s, e) {
      var prop = s.columns[e.col].binding;
      if (prop == "Quantity") {
          var value = parseFloat(s.activeEditor.value);
          if (s.getCellData(e.row, "InStock", false) && value <= 0) {
              var cellHost = s.cells.getCellElement(e.row, e.col);
              wijmo.addClass(cellHost, "wj-state-invalid");
              e.stayInEditMode = true;
              tip.setTooltip(cellHost, "Quantity can't be less than 0!");
          } else if (!s.getCellData(e.row, "InStock", false) && value > 0) {
              var cellHost = s.cells.getCellElement(e.row, e.col);
              wijmo.addClass(cellHost, "wj-state-invalid");
              e.stayInEditMode = true;
              tip.setTooltip(cellHost, "Quantity can't be greater than 0!");
          } else {
              var cellHost = s.cells.getCellElement(e.row, e.col);
              wijmo.removeClass(cellHost, "wj-state-invalid");
              tip.setTooltip(cellHost, null);
          }
      }
      if (prop == "InStock") {
          var value = s.activeEditor.checked;
          if (value && s.getCellData(e.row, "Quantity") <= 0) {
              var cellHost = s.cells.getCellElement(e.row, e.col);
              wijmo.addClass(cellHost, "wj-state-invalid");
              e.stayInEditMode = true;
              tip.setTooltip(cellHost, "InStock can't be true if Quantity less than or equal 0!");
          } else if (!value && s.getCellData(e.row,"Quantity")>0) {
              var cellHost = s.cells.getCellElement(e.row, e.col);
              wijmo.addClass(cellHost, "wj-state-invalid");
              e.stayInEditMode = true;
              tip.setTooltip(cellHost, "InStock can't be false if Quantity greater than 0!");
          } else {
              var cellHost = s.cells.getCellElement(e.row, e.col);
              wijmo.removeClass(cellHost, "wj-state-invalid");
              tip.setTooltip(cellHost, null);
          }
      }
  }
</script>

<c1-flex-grid id="cellEditGrid" style="max-height:500px;" auto-generate-columns="false" cell-edit-ending="gridCellEditEnding">
  ….
  <c1-flex-grid-column binding="Quantity" header="Qunatity"></c1-flex-grid-column>
  <c1-flex-grid-column binding="InStock" header="In Stock?"></c1-flex-grid-column>
</c1-flex-grid>

CellEditEditing