bitforum/backend/Views/Page/Banner/Item/Edit.cshtml

@model bitforum.Models.Page.Banner.BannerItem
@{
    ViewData["Title"] = "배너 수정";
    var bannerPositions = ViewBag.BannerPositions as SelectList;
}

<div class="container">
    <h3>@ViewData["Title"]</h3>
    <hr />

    <partial name="_StatusMessage" />
    <partial name="_Editor" />

    <form name="f_admin_write" id="fAdminWrite" method="post" accept-charset="utf-8" autocomplete="off" action="/Page/Banner/Item/Update" enctype="multipart/form-data">
        <input type="hidden" asp-for="ID" />

        <div class="row mb-2">
            <label for="PositionID" class="col-sm-2 col-form-label">위치</label>
            <div class="col-sm-10">
                <select asp-for="PositionID" asp-items="bannerPositions" class="form-select w-auto" required></select>
                <span asp-validation-for="PositionID" class="text-danger"></span>
            </div>
        </div>
        <div class="row mb-2">
            <label for="Subject" class="col-sm-2 col-form-label">배너 명</label>
            <div class="col-sm-10">
                <input type="text" asp-for="Subject" class="form-control" required />
                <span asp-validation-for="Subject" class="text-danger"></span>
            </div>
        </div>
        <div class="row mb-2">
            <label for="Image" class="col-sm-2 col-form-label">이미지</label>
            <div class="col-sm-10">
                @if (Model.Image is not null && Model.Image != string.Empty)
                {
                    <img src="@Url.Content(Model.Image)" class="img-fluid img-thumbnail" alt="@Model.Subject" />
                    <div class="form-check-inline">
                        <input type="checkbox" name="IsImageRemove" id="IsImageRemove" class="form-check-input" value="true" />
                        <label for="IsImageRemove" class="form-check-label">삭제</label>
                    </div>
                    
                    <input type="hidden" asp-for="Image" class="form-control" value="" />
                }
                else
                {
                    <div id="previewBanner" hidden><img class="img-fluid img-thumbnail" alt="이미지 미리보기" /></div>
                    <input type="file" asp-for="Image" class="form-control" accept="image/*" />
                    <span asp-validation-for="Image" class="text-danger"></span>
                }
            </div>
        </div>
        <div class="row mb-2">
            <label class="col-sm-2 col-form-label">크기</label>
            <div class="col-sm-10">
                <div class="row g-2">
                    <div class="col col-md-auto">
                        <div class="input-group">
                            <label for="Width" class="input-group-text">가로</label>
                            <input type="number" asp-for="Width" class="form-control" min="1" />
                        </div>
                        <span asp-validation-for="Width" class="text-danger"></span>
                    </div>
                    <div class="col-auto d-none d-md-block align-self-center">~</div>
                    <div class="col col-md-auto">
                        <div class="input-group">
                            <label for="Height" class="input-group-text">세로</label>
                            <input type="number" asp-for="Height" class="form-control" min="1" />
                            <span asp-validation-for="Height" class="text-danger"></span>
                        </div>
                    </div>
                </div>
                <span class="text-muted form-text">
                    설정하지 않으면 자동 크기로 사용됩니다.
                </span>
            </div>
        </div>
        <div class="row mb-2">
            <label for="Link" class="col-sm-2 col-form-label">주소</label>
            <div class="col-sm-10">
                <input type="url" asp-for="Link" class="form-control" />
                <span asp-validation-for="Link" class="text-danger"></span>
                <span class="text-muted form-text">
                    배너 클릭 시 페이지 이동 주소를 지정합니다.
                </span>
            </div>
        </div>
        <div class="row mb-2">
            <label for="Order" class="col-sm-2 col-form-label">순서</label>
            <div class="col-sm-10 align-content-center">
                <div class="form-check-inline">
                    <input type="number" asp-for="Order" class="form-control" min="-999" max="999" required />
                    <span asp-validation-for="Order" class="text-danger"></span>
                </div>
            </div>
        </div>
        <div class="row mb-2">
            <label for="IsActive" class="col-sm-2 col-form-label">사용 여부</label>
            <div class="col-sm-10 align-content-center">
                <div class="form-check-inline">
                    <input type="checkbox" asp-for="IsActive" class="form-check-input" />
                    <label class="form-check-label" for="IsActive">
                        사용합니다.
                    </label>
                    <span asp-validation-for="IsActive" class="text-danger"></span>
                </div>
            </div>
        </div>
        <div class="row mb-2">
            <label class="col-sm-2 col-form-label">사용 기간</label>
            <div class="col-sm-10">
                <div class="row g-2">
                    <div class="col col-md-auto">
                        <input type="date" asp-for="StartAt" class="form-control" />
                        <span asp-validation-for="StartAt" class="text-danger"></span>
                    </div>
                    <div class="col-auto d-none d-md-block align-self-center">~</div>
                    <div class="col col-md-auto">
                        <input type="date" asp-for="EndAt" class="form-control" />
                        <span asp-validation-for="EndAt" class="text-danger"></span>
                    </div>
                </div>
                <span class="text-muted form-text">
                    사용 기간을 설정하지 않으면 무제한으로 사용됩니다.
                </span>
            </div>
        </div>
        @if (Model.UpdatedAt is not null)
        {
            <div class="row mb-2">
                <label class="col-sm-2 col-form-label">수정일시</label>
                <div class="col-sm-10">
                    <input asp-for="UpdatedAt" class="form-control-plaintext" type="text" readonly />
                </div>
            </div>
        }
        @if (Model.CreatedAt is not null)
        {
            <div class="row mb-2">
                <label class="col-sm-2 col-form-label">등록일시</label>
                <div class="col-sm-10">
                    <input asp-for="CreatedAt" class="form-control-plaintext" type="text" readonly />
                </div>
            </div>
        }
        <hr />
        <div class="d-grid gap-2 text-center d-md-block">
            <button type="submit" class="btn btn-sm btn-success">저장</button>
            <a asp-action="Index" class="btn btn-sm btn-secondary">취소</a>
        </div>
        <br />
    </form>
</div>

<script type="module">
    document.addEventListener("DOMContentLoaded", function () {
        const previewImage = document.getElementById("previewBanner");
        document.getElementById("Image").addEventListener("change", function (e) {
            console.log(1);
            const file = e.target.files[0];
            const image = previewImage.children[0];
            if (file && file.type.startsWith("image/")) {
                const reader = new FileReader();

                reader.onload = function (e) {
                    image.src = e.target.result;
                    previewImage.removeAttribute("hidden");
                };

                reader.readAsDataURL(file);
            } else {
                image.src = "";
                previewImage.setAttribute("hidden");
            }
        });

        // 배너 이미지 삭제
        let oldImageSrc = "";
        document.getElementById("isImageRemove").addEventListener("change", function (e) {
            let image = document.getElementById("Image");
            if (e.target.checked) {
                oldImageSrc = image.src;
                image.src = "";
            } else {
                image.src = oldImageSrc;
            }
        });
    });
</script>