ASP.NET Core 기초 데이터 전송 시 에러 띄우기

 

우리가 웹사이트를 이용하다가 회원가입이나 글을 쓰다 보면 수많은 에러가 나온다. 그중에 하나가 바로 이것이다. 공백이거나 글자수가 틀리거나, 조건을 채우지 않았거나 하면 뜨는 경고 메시지다.

 

이걸 정말 ASP.NET에서는 편하게 띄울 수 있다. 오늘은 그것에 대해 배워보겠다.

 

@model Category

@*Form Start*@
<form method="post">
    <div class="border p-3 mt-4">
        <!-- Title -->
        <div class="row pb-2">
            <h2 class="text-primary">Create Category</h2>
            <hr/>
        </div>

        <!-- Category Name -->
        <div class="mb-3 row">
            <label asp-for="Name" class ="p-0"></label>
            <input asp-for="Name" class="form-control"/>
            <span asp-validation-for="Name" class="text-danger"></span>
        </div>
        
        <!-- Display Order -->
        <div class="mb-3 row">
            <label asp-for="DisplayOrder" class="p-0"></label>
            <input asp-for="DisplayOrder" class="form-control" />
            <span asp-validation-for="DisplayOrder" class="text-danger"></span>
        </div>

        @*Buttons*@
        <div class="row">
            <div class="col-6 col-md-3">
                @*Submit Button*@
                <button type="submit" class="btn btn-primary form-control">Create</button>
            </div>

            <div class="col-6 col-md-3">
                @*Go Back Button*@
                <a asp-controller="Category" asp-action="Index" class="btn btn-secondary border form-control">Go Back</a>
            </div>
        </div>
    </div>
</form>

 

위 코드에서 <span asp-validation-for="Name">이라는 부분이 보인다. 바로 asp.net 자체 helper 태그 기능 중 하나이다. 자동으로 공백이거나 제약 조건을 넘어가면 에러를 띄우는 것이다. 그렇다고 서버가 닫히거나 그러지는 않는다.

 

        [HttpPost]
        public IActionResult Create(Category obj)
        {
            if(ModelState.IsValid)
            {
                _db.Categories.Add(obj);
                _db.SaveChanges();

                //Redirect to main page of Category
                return RedirectToAction("Index");
            }

            return View();
        }

 

여기서는 조건에 맞는지 여부를 체크한다. 만약 조건이 일치한다면 데이터베이스에 데이터를 추가한다. 아니면 현재 뷰로 다시 남아 있는다. 여기까지 왔다면 궁금할 것이다. 어디에도 제약 조건이 없는데? 그럼 어디에 있지?

 

한 번 고민해보자! 어디에 있을까?

 

그렇다. Model에 조건이 걸려 있다. 

 

using System.ComponentModel;
using System.ComponentModel.DataAnnotations;

namespace BulkyWeb.Models {
    public class Category {
        [Key]
        public int Id { get; set; } // Primary Key on DB
        [Required]
        [MaxLength(30)]
        [DisplayName("Category Name")]
        public string Name { get; set; } // This field will be set to not null option in SQL
        [DisplayName("Display Order")]
        [Range(1,100)]
        public int DisplayOrder { get; set; }
    }
}

 

조건이 이렇게 걸려있다. 이 조건이 자동으로 input 필드에 적용이 되는 것이다. 정말 이런 기능은 그 어떤 코드에서도 볼 수 없다. 그와 동시에 내가 설명할 게 없다....

아래는 같은 기능을 하는 React 코드를 GPT에게 부탁한 코드다.

 

import React, { useState } from "react";

function CategoryForm() {
  const [formData, setFormData] = useState({ name: "", displayOrder: "" });
  const [errors, setErrors] = useState({});

  // 유효성 검사 함수
  const validate = () => {
    const newErrors = {};
    if (!formData.name.trim()) {
      newErrors.name = "Name is required.";
    }
    if (!formData.displayOrder) {
      newErrors.displayOrder = "Display Order is required.";
    } else if (isNaN(formData.displayOrder)) {
      newErrors.displayOrder = "Display Order must be a number.";
    }
    return newErrors;
  };

  // 폼 제출 핸들러
  const handleSubmit = (e) => {
    e.preventDefault();
    const validationErrors = validate();
    if (Object.keys(validationErrors).length > 0) {
      setErrors(validationErrors);
    } else {
      setErrors({});
      // 제출 로직 (예: 서버로 데이터 전송)
      console.log("Form submitted:", formData);
    }
  };

  // 입력값 변경 핸들러
  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData({ ...formData, [name]: value });
  };

  return (
    <form onSubmit={handleSubmit}>
      <div className="border p-3 mt-4">
        {/* Title */}
        <div className="row pb-2">
          <h2 className="text-primary">Create Category</h2>
        </div>
        <hr />

        {/* Category Name */}
        <div className="mb-3 row">
          <label htmlFor="name" className="p-0">Name</label>
          <input
            id="name"
            name="name"
            value={formData.name}
            onChange={handleChange}
            className="form-control"
          />
          {/* Validation Message */}
          {errors.name && <span className="text-danger">{errors.name}</span>}
        </div>

        {/* Display Order */}
        <div className="mb-3 row">
          <label htmlFor="displayOrder" className="p-0">Display Order</label>
          <input
            id="displayOrder"
            name="displayOrder"
            value={formData.displayOrder}
            onChange={handleChange}
            className="form-control"
          />
          {/* Validation Message */}
          {errors.displayOrder && (
            <span className="text-danger">{errors.displayOrder}</span>
          )}
        </div>

        {/* Buttons */}
        <div className="row">
          <div className="col-6 col-md-3">
            <button type="submit" className="btn btn-primary form-control">
              Create
            </button>
          </div>
          <div className="col-6 col-md-3">
            <button
              type="button"
              onClick={() => console.log("Go Back")}
              className="btn btn-secondary border form-control"
            >
              Go Back
            </button>
          </div>
        </div>
      </div>
    </form>
  );
}

export default CategoryForm;

 

이래서 손목 터널 증후군과 손가락이 부서지는 것이다. 

 

 

내 블로그를 보고 있다면 ASP.NET과 닷넷 개발에 관심이 있어서 보고 있을 텐데, 앞으로 잘 열심히 내 블로그를 키워나가 보겠다.