Mars est la folie de la feuille de calcul du blazor

Utilisez la feuille de calcul Telerik Interface-Interne pour Blazor pour créer votre propre support personnalisé, juste à temps pour March Madness.

En mars, beaucoup d’entre nous ont du mal avec la joie et la frustration de maintenir un support de folie de mars. Pour ceux qui ne suivent pas la balle sportive, March Madness est un tournoi d’élimination unique de basket-ball universitaire qui se produit aux États-Unis en mars.

Avec 68 équipes, 67 matchs et un seul gagnant au classement général, il y a beaucoup de données à suivre! La question demeure: où devons-nous stocker ces données tabulaires uniques afin qu’elle soit facile à mettre à jour et d’une manière qui est également agréable visuellement?

Il se trouve que nous avons une merveilleuse nouvelle Feuille de calcul du blazor composant de notre Progress Telerik UI pour Blazor bibliothèque. Chez Progress, nous ne manquons jamais une occasion de boire notre propre champagne! Suivez-moi pendant que je construis une application Web Blazor .NET 9, enrichie avec la bibliothèque Telerik UI pour Blazor, qui enregistre les données dans la base de données SQL. Nous allons également créer une barre d’outils personnalisée et un outil personnalisé juste pour faire bonne mesure.

En ce qui concerne la conception réelle de la disposition du support, nous n’avons pas besoin de perdre notre temps. Ce processus est plus artistique que la science et nécessite une compréhension approfondie du fonctionnement de la folie de mars, sans parler de la procédure d’élimination. N’oubliez pas que 68 n’est pas un facteur de 2, donc comment fonctionne un tournoi d’élimination unique était le puzzle initial que je devais résoudre. Finalement, j’ai décidé qu’il n’était pas nécessaire de recréer la roue, car de nombreux supports de feuilles de calcul merveilleux existent déjà. Grâce à nos amis de Plexkits, nous sommes en mesure de réutiliser un document existant d’une manière amusante.

Qu’est-ce qu’une feuille de calcul?

Avant de sauter la première dans la création d’une feuille de calcul, prenons un moment pour discuter de ce qu’est une feuille de calcul. Beaucoup d’entre nous utilisent des grilles quotidiennement, comme le Ui pour la grille du blazor. Bien qu’une grille et une feuille de calcul peuvent afficher des données, elles adoptent une approche différente.

Une grille est fondamentalement basée sur des lignes avec un schéma de colonne défini. Une grille mappe de près à un schéma de base de données et est souvent utilisée comme visualisation de l’interface utilisateur du frontend d’une table de base de données.

Une feuille de calcul, en revanche, est basée sur des cellules et n’a pas de schéma prédéfini. La feuille de calcul la plus familière pour la plupart des gens est Microsoft Excel. Des feuilles de calcul peuvent être utilisées pour afficher tout type de données tabulaires, dans une gamme illimitée de lignes et de colonnes. Cela rend la feuille de calcul extrêmement polyvalente pour les données non régulières et les supports de basket-ball.

Commencer

Puisque nous utilisons la bibliothèque d’interface utilisateur pour Blazor, nous allons bootstrap notre projet en utilisant l’assistant Create New Telerik Project pour créer une application Web .net 9 Blazor. L’assistant crée un projet avec tous les packages nécessaires inclus et ajoute quelques composants d’interface utilisateur Telerik pour la démonstration. Il s’agit d’une variante de l’application Web standard ASP.NET Blazor.

Créer une page de rasoir

Maintenant que nous avons une application Web fonctionnelle, nous pouvons commencer à ajouter notre code. J’ai choisi de créer une nouvelle page de rasoir pour mon code, mais vous pouvez placer tout le code sur la page d’accueil si vous le souhaitez. La grande chose à propos d’un composant intégré est qu’il peut être intégré partout où vous en avez besoin.

Voyons maintenant le code nécessaire pour ajouter un Tableur. Lisez-le attentivement pour ne manquer aucun détail.

@using Telerik.Blazor.Components.Spreadsheet

<TelerikSpreadsheet 
/>

Comme vous l’avez peut-être deviné, une feuille de calcul de base est simple à implémenter. En fait, le composant de sa configuration par défaut est terminé. Vous pouvez créer, ouvrir, modifier et enregistrer des documents directement dans la page, mais il n’y a pas de persistance.

Exceller les données

Vous pouvez charger des données dans la feuille de calcul simplement en définissant une seule variable.

<TelerikSpreadsheet 
Data="@FileData"
/>

Vous pouvez définir des données dans le FileData variable de plusieurs manières. Généralement, je préfère travailler avec des données binaires dans un blob ou un varbinaire [MAX] Colonne, mais vous pouvez également sérialiser les données binaires ou la coder à Base64.

Pour faciliter les choses, j’ai téléchargé mon fichier de mate de folie March et je l’ai inséré dans une table de base de données dans un processus unique. Dans une application de production, j’inclurais un Télécharger Composant pour formaliser cette procédure de manière réutilisable de l’utilisateur, mais pour notre exemple, nous pouvons supposer que les données existent déjà comme par magie dans une table de base de données.

Pour mettre les données dans la feuille de calcul du chargement de la page est également assez simple. Connectez-vous simplement à la base de données et sélectionnez les données. Une fois que vous avez les données en mémoire, affectez-la au FileData Variable – la feuille de calcul fera le reste.

@code {

    private byte[]? FileData { get; set; }

    static string connectionString = @"your_connection_string";
    SqlConnection connection = new SqlConnection(connectionString);

    protected override async Task OnInitializedAsync()
    {
        var fileAsByteArray = LoadExcel();

        if (fileAsByteArray != null){

            FileData = fileAsByteArray;
        }

        await base.OnInitializedAsync();
    }

    protected byte[]? LoadExcel()
    {
        var select = new SqlCommand("SELECT excel FROM Excel WHERE id=@id", connection);
        select.Parameters.AddWithValue("id", 2);
        select.Connection.Open();
        byte[]? data = select.ExecuteScalar() as byte[];
        select.Connection.Close();

        return data;
    }
}

Nous avons maintenant un support March Madness entièrement peuplé et arrangé chargé dans le composant de feuille de calcul. Cependant, le support n’est rempli des résultats que dimanche de sélection. La moitié du plaisir consiste à regarder les matchs et à entrer dans les gagnants! Pour garder une trace de nos modifications, nous devons enregistrer les modifications à la base de données, qui nécessitera un outil de barre d’outils personnalisé.

Si nous étions satisfaits de simplement entrer des données et d’exporter la feuille de calcul, nous aurions fait maintenant. Ces fonctionnalités sont cuites dans le composant de la feuille de calcul. Cependant, si nous voulons effectuer une action personnalisée comme la sauvegarde des modifications de la base de données, nous avons besoin d’un outil personnalisé.

Cette partie suivante est un peu plus complexe, mais suivons et nous le ferons ensemble. Nous devons d’abord créer une nouvelle coutume SpreadsheetToolSet et charger d’abord tous les outils de base. Ensuite, nous créerons un ToolSetItem et ajoutez-le au menu des fichiers. Enfin, nous allons câbler l’événement pour extraire les données de la feuille de calcul sous forme d’un tableau d’octets et mettre à jour la base de données.

Note: Pour plus de clarté, je ne montre que le code nécessaire pour cette fonctionnalité. Ajoutez ce code au code existant à partir des étapes précédentes.

<TelerikSpreadsheet 
Data="@FileData"
Tools="@SpreadsheetToolsWithCustomTool"
/>

@code {

    private SpreadsheetToolSet SpreadsheetToolsWithCustomTool { get; set; } = SpreadsheetToolSets.All;

    static string connectionString = @"your_connection_string";
    SqlConnection connection = new SqlConnection(connectionString);

    protected override async Task OnInitializedAsync()
    {
        SpreadsheetToolSetItem fileToolSetItem = SpreadsheetToolsWithCustomTool.Items.First();

        fileToolSetItem.Tools.Add(new SpreadsheetCustomTool()
            {
                Template = CustomToolFragment
            });

        await base.OnInitializedAsync();
    }

    private RenderFragment CustomToolFragment =>
    @<TelerikButton Icon="@SvgIcon.Save"
                            ButtonType="@ButtonType.Button"
                            ThemeColor="@ThemeConstants.Button.ThemeColor.Warning"
                            Title="Save Bracket"
                            FillMode="@ThemeConstants.Button.FillMode.Flat"
                            OnClick="@SaveBracketButtonClick">
    </TelerikButton>;

    private async Task SaveBracketButtonClick()
    {
        if (SpreadsheetRef != null)
        {
            byte[] excelFileToSave = await SpreadsheetRef.ExportToExcelAsync();
            SaveExcel(excelFileToSave);
        }
    }

    protected void SaveExcel(byte[]? excelData)
    {
        var update = new SqlCommand("UPDATE Excel SET excel=@excel WHERE id=@id", connection);
        update.Parameters.AddWithValue("excel", excelData);
        update.Parameters.AddWithValue("id", 2);
        update.Connection.Open();
        update.ExecuteNonQuery();
        update.Connection.Close();
    }
}

Vous avez maintenant un bouton d’outil personnalisé qui récusera nos données dans la base de données. En raison de la mise en œuvre antérieure, ces données enregistrées sont automatiquement chargées chaque fois que la feuille de calcul est ouverte. Nous avons maintenant un support de folie de mars d’une saison que vous pouvez partager avec vos amis et votre famille.

Conclusion

Nous avons eu un peu de plaisir ici aujourd’hui en mettant en œuvre un support de folie de mars en utilisant le Telerik UI pour Blazor Tableur. J’espère que votre point de vue est que la feuille de calcul est un outil puissant et polyvalent qui peut être intégré n’importe où dans votre application Web avec seulement quelques lignes de code. L’utilisation de la feuille de calcul, de la grille et des autres composants natifs de 120+ propose Telerik peut aider votre application à prendre le trophée du championnat, sans entrer dans les heures supplémentaires.

Temps pour le pourboire.

Essayez de Telerik UI pour Blazor

Vous voulez en faire l’expérience vous-même? Telerik UI pour Blazor est livré avec un essai gratuit de 30 jours.

Commencer

Attribution

Merci à Plexkits pour l’utilisation du support de folie de March 2025.
Copyright © 2025 Plexkits.