ASP.NET Core で JavaScript を使用してカスタム テンプレートを DevExpress TabPanel に動的に追加する方法

ASP.NET Core での DevExpress TabPanel テンプレートの動的処理

このアプローチは、JavaScript を ASP.NET Core の DevExpress コンポーネントと統合して、タブ テンプレートを動的に読み込んで管理し、コンテンツの正しいレンダリングを保証することに重点を置いています。

// 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 を使用してテンプレートを解析および挿入すると、開発者はスケーラブルで保守可能なコードを作成できます。

遅延レンダリングの無効化やエラー処理などの最適化により、非表示のコンテンツや破損したタブなどの一般的な問題を防止します。ここで説明した方法を使用すると、開発者は正しいコンテンツが動的にロードされることを保証し、Web アプリケーション内で高速で信頼性の高いユーザー インタラクションを実現できます。