Com utilitzar JavaScript a ASP.NET Core per afegir dinàmicament plantilles personalitzades al panell de pestanyes DevExpress

Ús de JavaScript per omplir dinàmicament les plantilles de DevExpress TabPanel

Quan es treballa amb ASP.NET Core i DevExpress components, els desenvolupadors sovint es troben amb la necessitat d'injectar contingut dinàmicament en elements de la interfície d'usuari com ara dxTabPanel. Tanmateix, sorgeix un problema comú quan es crea el nombre correcte de pestanyes, però el contingut de la pestanya roman buit, frustrant els esforços de desenvolupament.

El repte es produeix quan les plantilles definides a les vistes de Razor no es carreguen correctament al tauler de pestanyes en temps d'execució. Aquest article explica com fer-ho omple les plantilles de DevExpress TabPanel de manera dinàmica utilitzant JavaScript. Explorarem una solució pràctica per garantir que el contingut es mostri correctament dins de cada pestanya.

Examinant un escenari amb dues plantilles—`employeeListTemplate` i `addEditEmployeeTemplate`—pretenem resoldre el problema de la falta de contingut de la pestanya. Aprendràs a analitzar les dades de la plantilla i enllaçar-les al teu TabPanel mitjançant JavaScript.

A les seccions següents, us guiarem a través dels passos necessaris per crear i representar plantilles de manera dinàmica mitjançant JavaScript. A més, destacarem els possibles inconvenients que cal evitar durant el tractament Components DevExpress en el teu ASP.NET Core projectes.

Comprensió de la gestió de plantilles dinàmica TabPanel a ASP.NET Core amb DevExpress

Els scripts proporcionats en aquest exemple tenen com a objectiu omplir dinàmicament a DevExpress TabPanel utilitzant JavaScript en un ASP.NET Core medi ambient. El repte sorgeix quan les plantilles, que es defineixen a la vista Razor, no es mostren automàticament a les pestanyes tot i que s'han afegit correctament. Aquesta solució garanteix que plantilles com `employeeListTemplate` i `addEditEmployeeTemplate` es carreguin i es representin correctament manipulant la propietat d'elements del TabPanel mitjançant JavaScript.

La funció clau, `populateTabPanel`, s'encarrega de crear una matriu estructurada d'elements de pestanya basada en les dades analitzades a partir d'una cadena JSON. Aquest JSON conté les metadades de les pestanyes, inclosos els seus títols i els noms de les plantilles a les quals fan referència. El mètode `JSON.parse()` converteix la cadena en un objecte sobre el qual la funció pot iterar, construint dinàmicament cada pestanya amb la seva plantilla corresponent. Aquest enfocament dinàmic garanteix la flexibilitat, permetent que les plantilles es defineixin una vegada a Razor i es reutilitzin en diverses pestanyes sense duplicar-les.

El mètode `$().dxTabPanel("instància")` recupera la instància del widget TabPanel, donant accés directe a les seves propietats i mètodes. Això és fonamental per injectar contingut nou al TabPanel en temps d'execució. Després de mapejar les plantilles del JSON analitzat a l'estructura requerida, el mètode `option("items", items)` actualitza el contingut del TabPanel amb les noves definicions de pestanya. Aquest pas garanteix que les plantilles correctes s'assignin a les seves pestanyes respectives, solucionant el problema de les pestanyes que apareixen buides tot i que s'han creat correctament.

Un component vital en aquesta configuració és assegurar-se que el contingut HTML de les plantilles s'obté correctament mitjançant el selector jQuery amb el mètode `.html()`. Això garanteix que el contingut es transfereix des de les plantilles definides per Razor a les pestanyes generades dinàmicament. A més, l'ús de funcions modulars com `parseTemplates` i `updateTabPanel` millora la llegibilitat i la reutilització del codi, fent que l'script sigui més fàcil de mantenir i ampliar. Per validar la funcionalitat, s'implementen proves unitàries amb Jest, verificant que el TabPanel conté el nombre esperat de pestanyes i que els títols coincideixen amb els valors predefinits.

// 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);
}

// 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);
}

@(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>
}

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');
    });
});

Millora de la gestió dinàmica de contingut a DevExpress TabPanel

Quan es treballa amb el DevExpress TabPanel, un altre aspecte crític que els desenvolupadors han de tractar és assegurar-se que el contingut s'actualitza de manera dinàmica sense requerir recàrregues de pàgines completes. Això és essencial a l'hora de crear aplicacions web modernes on la interacció de l'usuari ha de ser ràpida i sensible. L'ús de JavaScript per actualitzar les plantilles de manera dinàmica proporciona una manera eficient d'injectar contingut al ASP.NET Core aplicació. Tanmateix, els desenvolupadors han de gestionar acuradament com es representen i s'actualitzen les plantilles dins del TabPanel per evitar retards o problemes de renderització.

Un repte comú és assegurar-se que el TabPanel reflecteixi amb precisió els canvis de backend, especialment quan les plantilles o les graelles de dades es basen en dades en directe. Per resoldre això, utilitzant el option() El mètode per actualitzar el contingut de TabPanel garanteix que les dades noves s'injectin perfectament. A més, DeferRendering s'ha d'establir a false per evitar el comportament predeterminat de càrrega mandrosa, que pot fer que les plantilles es mantinguin invisibles fins que s'actualitzin manualment. Aquestes optimitzacions permeten que el contingut aparegui a l'instant, mantenint una interacció fluida de l'usuari.

Un altre aspecte a tenir en compte és la gestió dels errors en injectar contingut de manera dinàmica. L'ús de la gestió adequada d'errors amb JavaScript garanteix que les plantilles que falten o que estan mal formades no trenquin la funcionalitat del TabPanel. Els desenvolupadors haurien d'implementar la lògica alternativa per mostrar un missatge predeterminat si una plantilla no es carrega. A més, per millorar el rendiment, és essencial assegurar-se que les plantilles s'emmagatzemen a la memòria cau i es reutilitzin correctament. Això redueix el processament innecessari i millora els temps de càrrega de la interfície d'usuari.