[.net] mvc 웹 프로젝트(4)

공통 버튼 _CommonButtons

 

<div class="d-flex justify-content-end mb-3" role="toolbar" aria-label="Toolbar with button groups">
    <div class="btn-group" role="group" aria-label="Button group with spacing">
        @foreach (var button in Model)
        {
            if (button.Visible)
            {
                <button type="button" class="btn btn-dark mx-1" id="@($"{pageName}{button.Id}")" aria-label="@button.AriaLabel" @(button.Used ? "" : "disabled")>@button.Text</button>
            }
        }
    </div>
</div>

 

 

공통 버튼 인터페이스를 Services 프로젝트에 추가

    public class ButtonModel
    {
        public string Id { get; set; }
        public string Text { get; set; }
        public string OnClickAction { get; set; }
        public string AriaLabel { get; set; }
        public bool Used { get; set; } = true;
        public bool Visible { get; set; } = true;
    }

 

    public IEnumerable<ButtonModel> GetButtons(string pageName)
    {
        var buttons = new List<ButtonModel>
        {
            new ButtonModel { Id = "btnSearch", Text = "조회", OnClickAction = "searchFunction" },
            new ButtonModel { Id = "btnRegister", Text = "등록", OnClickAction = "registerFunction" },
            new ButtonModel { Id = "btnExcel", Text = "엑셀", OnClickAction = "exportExcelFunction" }
        };

        // 페이지별로 다른 버튼 구성을 할 수 있습니다.
        switch (pageName)
        {
            case "System1":
                buttons.RemoveAll(b => b.Id == "btnRegister"); // System1 페이지에서는 등록 버튼 제거
                break;
                // 다른 페이지에 대한 버튼 구성 추가
        }

        return buttons;
    }

 

 

공통 팝업, 에러 팝업 구현

 

CommonPopup

<div id="commonPopup" class="popup-frame" style="display: none;">
    <div class="popup-content">
        <span class="close-btn" onclick="closePopup()">&times;</span>
        <div id="popupTitle" class="popup-title"></div>
        <div id="popupBody">
            <!-- 팝업 내용이 여기 들어갑니다 -->
        </div>
    </div>
</div>

 

<script>
    function openPopup(content, title = '', width = '90%', height = 'auto') {
        $('#popupTitle').text(title);
        $('#popupBody').html(content);
        $('.popup-content').css({
            'width': width,
            'height': height
        });
        $('#commonPopup').fadeIn();
    }

    function closePopup() {
        $('#commonPopup').fadeOut();
    }

    $(document).ready(function () {
        $('.close-btn').on('click', function () {
            closePopup();
        });
    });
</script>

 

 

공통 팝업(Confirm)

<div id="commonConfirm" class="confirm-frame" style="display: none;">
    <div class="confirm-content">
        <span class="close-btn" onclick="closeConfirm()">&times;</span>
        <div id="confirmTitle" class="confirm-title">Confirm</div>
        <div id="confirmBody" class="confirm-body">
            <p id="confirmMessage">정말로 삭제하시겠습니까?</p>
            <button id="confirmYes" class="btn btn-danger">Yes</button>
            <button id="confirmNo" class="btn btn-secondary">No</button>
        </div>
    </div>
</div>

 

<script>
    function openConfirm(message, onConfirm) {
        $('#confirmMessage').text(message);
        $('#confirmYes').off('click').on('click', function () {
            onConfirm();
            closeConfirm();
            closePopup();
        });
        $('#confirmNo').off('click').on('click', function () {
            closeConfirm();
        });
        $('#commonConfirm').fadeIn();
    }

    function closeConfirm() {
        $('#commonConfirm').fadeOut();
    }
</script>

 

 

공통팝업(에러)

@* Views/Shared/ErrorPopup.cshtml *@
<div id="errorPopup" class="error-popup-frame" style="display: none;">
    <div class="error-popup-content">
        <span class="error-close-btn">&times;</span>
        <div id="errorPopupBody">
            <!-- 에러 메시지가 여기에 들어갑니다 -->
        </div>
    </div>
</div>

 

<script>
    function openErrorPopup(message) {
        const errorMessage = `<h2>Error</h2><p>${message}</p>`;
        $('#errorPopupBody').html(errorMessage);
        $('#errorPopup').fadeIn();
    }

    function closeErrorPopup() {
        $('#errorPopup').fadeOut();
    }

    $(document).ready(function () {
        $('.error-close-btn').on('click', function () {
            closeErrorPopup();
        });
    });
</script>