dpot-backend/Admin/Pages/Forum/Board/Prefix.cshtml

@page "{id:int}"
@model Admin.Pages.Forum.Board.PrefixModel
@{
    ViewData["Title"] = "게시판 관리 - 말머리";
    ViewData["Sector"] = "Prefix";
    ViewData["BoardID"] = Model.BoardID;
    ViewData["BoardList"] = Model.BoardList;
    ViewData["QueryString"] = Model.QueryString;
}

<div class="container">
    <partial name="_Header" />
    <partial name="_StatusMessage" />
    <partial name="/Pages/Forum/Board/_NavTabs.cshtml" />

    <form id="fAdminWrite" method="post" asp-page-handler="Create" accept-charset="utf-8" autocomplete="off">
        <div class="row g-2">
            <label class="col-lg-1 col-form-label">말머리</label>
            <div class="col-7 col-sm-auto">
                <div class="input-group">
                    <div class="input-group-text">
                        <input type="color" name="Input.Color" class="h-100" maxlength="10" required />
                    </div>
                    <input type="text" name="Input.Name" class="form-control" maxlength="20" required placeholder="이름" />
                </div>
            </div>
            <div class="col col-lg-auto">
                <input type="number" name="Input.Order" class="form-control" min="-999" max="999" required placeholder="순서" />
            </div>
            <div class="col-12 col-sm-auto text-center">
                <button type="submit" class="btn btn-primary w-100">등록</button>
            </div>
        </div>
    </form>

    <hr/>

    <div class="row g-2 align-items-end">
        <div class="col">
            Total : @Model.Total.ToString("N0")
        </div>
        <div class="col text-end">
            <button type="button" id="btnFListDelete" class="btn btn-sm btn-danger" form="fAdminList" disabled>삭제</button>
            <button type="submit" id="btnFListSave" class="btn btn-sm btn-success" form="fAdminList" @(Model.Total <= 0 ? "disabled" : "")> 저장</button>
        </div>
    </div>

    <div class="table-responsive">
        <form id="fAdminList" method="post" asp-page-handler="Save" accept-charset="utf-8" autocomplete="off">
            <table class="table table-striped table-bordered table-hover mt-3">
                <caption>
                    게시글 제목에 특정 단어를 넣는 기능입니다. 최대 10개를 추가할 수 있습니다.
                </caption>
                <colgroup>
                    <col width="5%"/>
                    <col width="*"/>
                    <col width="*"/>
                    <col width="*"/>
                    <col width="*"/>
                    <col width="12%" />
                    <col width="12%"/>
                </colgroup>
                <thead>
                    <tr>
                        <th>
                            <div class="form-check form-check-inline">
                                <input type="checkbox" id="checkedAll" class="form-check-input" value="1" />
                                <label for="checkedAll" class="form-check-label">ID</label>
                            </div>
                        </th>
                        <th>말머리</th>
                        <th>순서</th>
                        <th>사용 횟수</th>
                        <th>사용 여부</th>
                        <th>등록일시</th>
                        <th>수정일시</th>
                    </tr>
                </thead>
                <tbody>
                    @if (Model.Data == null || !Model.Data.Any())
                    {
                        <tr>
                            <td colspan="7">No Data.</td>
                        </tr>
                    }
                    else
                    {
                        @foreach (var row in Model.Data)
                        {
                            var index = Model.Data.IndexOf(row);

                            <tr>
                                <td>
                                    <div class="form-check form-check-inline">
                                        <input type="checkbox" name="CheckList[]" id="CheckList_@index" class="form-check-input list-check-box" value="@row.ID" />
                                        <label for="CheckList_@index" class="form-check-label">@row.ID</label>
                                    </div>

                                    <input type="hidden" name="UpdateItems[@index].ID" class="form-control-plaintext text-center" value="@row.ID" />
                                </td>
                                <td>
                                    <div class="input-group">
                                        <div class="input-group-text">
                                            <input type="color" name="UpdateItems[@index].Color" class="h-100" maxlength="10" value="@row.Color" required />
                                        </div>
                                        <input type="text" name="UpdateItems[@index].Name" class="form-control" maxlength="20" value="@row.Name" required />
                                    </div>
                                </td>
                                <td>
                                    <input type="number" name="UpdateItems[@index].Order" class="form-control" min="-999" max="999" value="@row.Order" required />
                                </td>
                                <td>@row.Posts</td>
                                <td>
                                    <div class="form-check form-check-inline">
                                        <input type="checkbox" name="UpdateItems[@index].IsActive" id="UpdateItems_@(index)_IsActive" class="form-check-input" checked="@row.IsActive" value="true" />
                                        <label for="UpdateItems_@(index)_IsActive" class="form-check-label">사용</label>
                                    </div>
                                </td>
                                <td>@row.CreatedAt</td>
                                <td>@(row.UpdatedAt ?? "-")</td>
                            </tr>
                        }
                    }
                </tbody>
            </table>
        </form>
    </div>
</div>

@section Scripts {
<script>
    // 삭제
    $(document).on("click", "#btnFListDelete", function() {
        if (confirm("삭제 하시겠습니까?")) {
            let checked = document.querySelectorAll(".list-check-box:checked");
            if (checked.length === 0) {
                return false;
            }

            checked.forEach(function(el) {
                let form = document.createElement("form");
                form.method = "post";
                form.action = "?handler=Delete";

                let input = document.createElement("input");
                input.type = "hidden";
                input.name = "DeleteID";
                input.value = el.value;

                let token = document.querySelector('input[name="__RequestVerificationToken"]');
                if (token) {
                    let tokenInput = document.createElement("input");
                    tokenInput.type = "hidden";
                    tokenInput.name = "__RequestVerificationToken";
                    tokenInput.value = token.value;
                    form.appendChild(tokenInput);
                }

                form.appendChild(input);
                document.body.appendChild(form);
                form.submit();
            });
        }
        return false;
    });

    // 저장
    $(document).on("click", "#btnFListSave", function() {
        if (confirm("저장 하시겠습니까?")) {
            let form = document.getElementById("fAdminList");
            if (form.checkValidity()) { // HTML5 폼 검증 수행
                form.submit();
            } else {
                form.reportValidity();
            }
        }
        return false;
    });
</script>
}