Kaip naudoti „JavaScript“ programoje ASP.NET Core, norint dinamiškai pridėti tinkintų šablonų prie „DevExpress“ skirtuko skydelio

Dinamiškas „DevExpress TabPanel“ šablonų tvarkymas ASP.NET Core

Taikant šį metodą pagrindinis dėmesys skiriamas „JavaScript“ integravimui su „DevExpress“ komponentais ASP.NET Core, kad būtų galima dinamiškai įkelti ir valdyti skirtukų šablonus, užtikrinant teisingą turinio atvaizdavimą.

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

Modulinių „JavaScript“ funkcijų naudojimas dinaminiam skirtukų turiniui

Šioje versijoje pabrėžiamas kodo moduliškumas ir pakartotinis naudojimas, naudojant atskiras skirtukų analizavimo ir atnaujinimo funkcijas, kad būtų užtikrintas techninis aptarnavimas.

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

Backend Razor kodas, skirtas „DevExpress“ šablonams apibrėžti

Šioje dalyje parodyta, kaip naudoti Razor sintaksę šablonams, kurie bus dinamiškai nurodyti aukščiau esančiame JavaScript kode, apibrėžti.

@(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“ skirtuko skydelio funkcionalumo vieneto testas

Šis testas užtikrina, kad „TabPanel“ veiktų tinkamai, tikrinant skirtukų skaičių ir jų turinį po dinaminės populiacijos.

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

Dažnai užduodami klausimai apie dinaminį šablonų valdymą „DevExpress TabPanel“.

1. Kaip užtikrinti, kad mano šablonai būtų pateikti nedelsiant?
2. Naudokite DeferRendering(false) parinktį „TabPanel“ konfigūracijoje, kad visi šablonai būtų pateikti vienu metu.
3. Kaip atnaujinti „TabPanel“ turinį neatnaujinus puslapio?
4. Galite naudoti tabPanelInstance.option("items", newItems) dinamiškai atnaujinti turinį per „JavaScript“.
5. Ką daryti, jei šablonai neįkeliami tinkamai?
6. Įsitikinkite, kad šablonų pavadinimai tiksliai sutampa tiek JSON objekte, tiek HTML elementuose. Taip pat patikrinkite tai $("#templateID").html() grąžina tinkamą turinį.
7. Ar galiu įkelti kiekvieną skirtuką tik tada, kai jis pasirinktas?
8. Taip, galite nustatyti DeferRendering(true) įgalinti tingų įkėlimą, užtikrinant, kad skirtukai įkeltų turinį tik tada, kai jie aktyvuoti.
9. Kaip tvarkyti klaidas įvedant šablonus?
10. Naudokite try-catch blokus jūsų „JavaScript“ kode, kad būtų galima grakščiai valdyti klaidas ir, jei reikia, pateikti atsarginį turinį.

Paskutinės mintys apie dinaminį šablonų tvarkymą

Tinkamai tvarkydami šablonus „DevExpress TabPanels“, užtikrinama, kad naudotojo sąsajos būtų įjungtos ASP.NET branduolys programos yra dinamiškos ir reaguojančios. Šis metodas sumažina viso puslapio įkėlimų poreikį ir pagerina vartotojo patirtį. „JavaScript“ naudojimas šablonams analizuoti ir įterpti leidžia kūrėjams sukurti keičiamo dydžio ir prižiūrimą kodą.

Optimizavimas, pvz., atidėto pateikimo ir tvarkymo klaidų išjungimas, užkerta kelią įprastoms problemoms, pvz., nematomam turiniui ir neveikiantiems skirtukams. Taikydami aptartus metodus kūrėjai gali užtikrinti, kad tinkamas turinys būtų dinamiškai įkeliamas, užtikrinant greitą ir patikimą vartotojų sąveiką savo žiniatinklio programose.