كيفية استخدام JavaScript في ASP.NET Core لإضافة قوالب مخصصة ديناميكيًا إلى DevExpress TabPanel

التعامل مع قوالب DevExpress TabPanel بشكل ديناميكي في ASP.NET Core

يركز هذا الأسلوب على دمج JavaScript مع مكونات DevExpress في ASP.NET Core لتحميل قوالب علامات التبويب وإدارتها ديناميكيًا، مما يضمن العرض الصحيح للمحتوى.

// 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 لتحديد القوالب التي سيتم الرجوع إليها ديناميكيًا في كود 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 لتحليل القوالب وإدخالها للمطورين إنشاء تعليمات برمجية قابلة للتطوير وقابلة للصيانة.

تعمل التحسينات مثل تعطيل العرض المؤجل ومعالجة الأخطاء على منع المشكلات الشائعة مثل المحتوى غير المرئي وعلامات التبويب المعطلة. من خلال الطرق التي تمت مناقشتها، يمكن للمطورين التأكد من تحميل المحتوى الصحيح ديناميكيًا، مما يوفر تفاعلات سريعة وموثوقة للمستخدم داخل تطبيقات الويب الخاصة بهم.