ASP.NET Core에서 JavaScript를 사용하여 DevExpress TabPanel에 사용자 지정 템플릿을 동적으로 추가하는 방법

ASP.NET Core에서 동적으로 DevExpress TabPanel 템플릿 처리

이 접근 방식은 ASP.NET Core의 DevExpress 구성 요소와 JavaScript를 통합하여 탭 템플릿을 동적으로 로드하고 관리하여 콘텐츠의 올바른 렌더링을 보장하는 데 중점을 둡니다.

// Front-end solution using JavaScript for dynamic template handling
function populateTabPanel() {
    let jsonString = '{
        "ParentID": 1,
        "ParentName": "Administration",
        "ID": 1,
        "Text": "Employee",
        "Templates": [
            {"ID": 1, "TemplateName": "employeeListTemplate", "Title": "Current Employees"},
            {"ID": 2, "TemplateName": "addEditEmployeeTemplate", "Title": "Add/Update Employee"}
        ]
    }';
    let templateObj = JSON.parse(jsonString);
    let items = templateObj.Templates.map(t => ({
        template: $(`#${t.TemplateName}`).html(),
        title: t.Title
    }));
    $("#contentTabPanel").dxTabPanel("instance").option("items", items);
}

동적 탭 콘텐츠에 모듈형 JavaScript 함수 사용

이 버전은 유지 관리를 보장하기 위해 탭을 구문 분석하고 업데이트하는 별도의 기능을 사용하여 코드 모듈성과 재사용을 강조합니다.

// Function to parse template JSON
function parseTemplates(json) {
    return JSON.parse(json).Templates.map(template => ({
        template: $(`#${template.TemplateName}`).html(),
        title: template.Title
    }));
}
// Function to update TabPanel with new items
function updateTabPanel(items) {
    const tabPanel = $("#contentTabPanel").dxTabPanel("instance");
    tabPanel.option("items", items);
}
// Main function to populate TabPanel
function populateTabPanel() {
    const jsonString = '{"Templates": [
        {"TemplateName": "employeeListTemplate", "Title": "Current Employees"},
        {"TemplateName": "addEditEmployeeTemplate", "Title": "Add/Update Employee"}
    ]}';
    const items = parseTemplates(jsonString);
    updateTabPanel(items);
}

DevExpress 템플릿을 정의하는 백엔드 Razor 코드

이 부분에서는 Razor 구문을 사용하여 위의 JavaScript 코드에서 동적으로 참조되는 템플릿을 정의하는 방법을 보여줍니다.

@(Html.DevExtreme().Button()
    .ID("addTabsButton")
    .OnClick("populateTabPanel")
    .Text("Add Tabs")
    .Type(ButtonType.Default)
    .Width(100)
)
@(Html.DevExtreme().TabPanel()
    .ID("contentTabPanel")
    .Loop(false)
    .AnimationEnabled(false)
    .DeferRendering(false)
    .RepaintChangesOnly(false)
)
@using (Html.DevExtreme().NamedTemplate("employeeListTemplate")) {
    @(Html.DevExtreme().DataGrid()
        .Columns(c => {
            c.Add().DataField("FirstName").AllowEditing(true);
            c.Add().DataField("LastName").AllowEditing(true);
        })
    )
}
@using (Html.DevExtreme().NamedTemplate("addEditEmployeeTemplate")) {
    <div>This is Admin -> Add/Edit Employee</div>
}

JavaScript TabPanel 기능에 대한 단위 테스트

이 테스트는 동적 채우기 후 탭 수와 해당 내용을 확인하여 TabPanel이 올바르게 작동하는지 확인합니다.

describe('TabPanel Population', () => {
    it('should correctly populate TabPanel with templates', () => {
        populateTabPanel();
        const tabPanelInstance = $("#contentTabPanel").dxTabPanel("instance");
        const items = tabPanelInstance.option('items');
        expect(items.length).toBe(2);
        expect(items[0].title).toBe('Current Employees');
        expect(items[1].title).toBe('Add/Update Employee');
    });
});

DevExpress TabPanel에서 템플릿을 동적으로 관리하는 방법에 대해 자주 묻는 질문

1. 내 템플릿이 즉시 렌더링되도록 하려면 어떻게 해야 합니까?
2. 사용 DeferRendering(false) 모든 템플릿이 한 번에 렌더링되도록 하려면 TabPanel 구성의 옵션을 사용하세요.
3. 페이지를 새로 고치지 않고 TabPanel 콘텐츠를 어떻게 업데이트할 수 있나요?
4. 당신은 사용할 수 있습니다 tabPanelInstance.option("items", newItems) JavaScript를 통해 콘텐츠를 동적으로 업데이트합니다.
5. 템플릿이 제대로 로드되지 않으면 어떻게 해야 합니까?
6. 템플릿 이름이 JSON 개체와 HTML 요소 모두에서 정확히 일치하는지 확인하세요. 또한 다음 사항을 확인하세요. $("#templateID").html() 유효한 콘텐츠를 반환합니다.
7. 각 탭을 선택한 경우에만 로드되도록 할 수 있나요?
8. 예, 설정할 수 있습니다 DeferRendering(true) 지연 로딩을 활성화하여 활성화된 경우에만 탭이 콘텐츠를 로드하도록 합니다.
9. 템플릿을 삽입할 때 오류를 어떻게 처리하나요?
10. 사용 try-catch 오류를 적절하게 관리하고 필요한 경우 대체 콘텐츠를 제공하기 위해 JavaScript 코드를 차단합니다.

동적 템플릿 처리에 대한 최종 생각

DevExpress TabPanels에서 템플릿을 적절하게 관리하면 다음의 사용자 인터페이스가 보장됩니다. ASP.NET 코어 애플리케이션은 동적이며 반응성이 뛰어납니다. 이 접근 방식은 전체 페이지를 다시 로드할 필요성을 최소화하여 사용자 경험을 향상시킵니다. JavaScript를 사용하여 템플릿을 구문 분석하고 주입하면 개발자가 확장 가능하고 유지 관리 가능한 코드를 만들 수 있습니다.

지연 렌더링 비활성화 및 오류 처리와 같은 최적화는 보이지 않는 콘텐츠 및 깨진 탭과 같은 일반적인 문제를 방지합니다. 논의된 방법을 통해 개발자는 올바른 콘텐츠가 동적으로 로드되어 웹 애플리케이션 내에서 빠르고 안정적인 사용자 상호 작용을 제공할 수 있습니다.