Bonjour la commu,

je viens chercher quelques conseils ou simplement des explications:

Je fait actuellement des POC pour une web app dans un secteur industriel... bref.

je passe par une BDD locale et y récupère des infos via un code en C#

je les affiche sur des pages web via radzen components

le tout codé dans VS Code.

Mon problème:

Je récupère un fichier PDF en BLOB dans ma BDD que je SELECT en HEX dans une variable string de mon code C#

je la convertit en byte[] puis en base 64 au choix.

et je souhaiterai afficher le fichier PDF en visualisation type aperçu ou simplement l'ouvrir, peu m'importe la manière:

- soit par un composant Radzen

- soit par une page web de consult

- soit par une fenêtre pop up radzen ou directement dans un form C#

Bref... j'ai un peu parcouru le web pour trouver des solutions et j'ai trouvé pas mal d'exemples...

Mon soucis c'est que je comprends tout simplement rien a ce que je trouve...

du coup, si je peux me permettre, j'aimerai une explication pédagogique des principes d'au moins une des solutions que j'appliquerai ensuite moi même,

mais au moins comprendre le principe d'utilisation de ma variable string byte base 64 ou autre 

étant dans VS Code je suis allé voir des librairies mais la aussi c'est un peu la jungle pour les compatibilités de version et avant de partir dans toutes les directions j'aimerai comprendre la mécanique du truc...

merci d'avance pour vos conseils et bonne journée

Comme j'utilise les techno radzen je suis aller check les threads sur le sujet et j'ai trouvé ca : 

- Trouble downloading file from DB - Radzen IDE (Blazor server-side) - Radzen

c'est ce qui se rapproche le plus de  ce que je veux faire mais je comprends pas les explications qu'on lui repond sur les exemples d'export...

Ensuite je me suis dit que je pouvait sortir des outils radzen pour un form de visualisation ca me gene pas trop donc j'ai pensé a un form ou une boite de dialogue qui peut juste afficher le contenu d'un PDF via une librairie

Donc je suis allé chercher des trucs comme 

- Spire PDF viewer (je sais pas l'utiliser a priori pour trouver la commande qui va bien)

- Syncfusion (je trouve pas la version compatible avec je sais pas avec quoi ca doit etre compatible...)

si j'ai bien compris j'aurai forcement besoin d'un package avec des librairies pour appeler un "viewer" PDF... mais mon cote noob sur le sujet m'inquiete j'ai pas envie de telecharger 37 librairies inutiles sur ma machine pro...

c'est la que j'me suis dit "va demander conseil a des gens qui savent"

j'ai aussi trouvé ca:

Open (Show) Base64 PDF data in new window (Tab) using C# and VB.Net in ASP.Net (aspsnippets.com)

a "Session["Base64String"] = base64String;" je bugge... et il parle de javascript...

dans radzen y'a des composants pour coder en html a priori donc j'avais pensé a appliquer ca 

j'me rend bien compte que j'suis pas tres doué désolé

-
Edité par Buntaflex 18 janvier 2023 à 10:47:26

>j'me rend bien compte que j'suis pas tres doué désolé

Vous êtes juste complètement perdu car vous posez le problème de manière trop "large".

C'est tout l'intérêt de faire des POC : vous faites des choix, pas forcément optimal, mais vous prouvez avec ces choix que ça fonctionne "raisonnablement" bien.

Si vous ne faites pas des choix "à priori" dans un domaine que vous ne maîtrisez pas, vous allez tourner en rond.

Pour qu'une personne expérimentée puis vous aider efficacement, vous devez être beaucoup plus précis sur vos "contraintes".

Dans le première article que vous donnez, c'est une personne qui a un besoin bien particulier qui ne semble pas directement implémenté par le framework "Radzen" (que je ne connais pas) et on lui indique qu'il faut utiliser la technologie sous-jacente, soit Angular soit ASP.NET.

Je ne suis pas sûr que vous ayez besoin de partir aussi profond dans votre POC car vous n'avez pas encore déterminer comment l'utilisateur final aura accès au PDF. Pour le PO du première article, c'était via un lecteur autonome, d'où la complexité de la chose.

Mais Radzen doit disposer d'un mécanisme d'affichage de document dans le navigateur, donc plus facile à utiliser.

Vous devez maîtriser un minimum le protocole HTTP, AJAX/jQuery (ou autre framework Javascript utilisé pour implémenter les fonctionnalités de "haut-niveau") ainsi que la technologie sous-jacente, si vous ne voulez pas de tout ce qu'offrent déjà votre/vos framework(s).

>j'ai pas envie de telecharger 37 librairies inutiles sur ma machine pro...

Heu, ça sert un peu à ça les POC, faire le tri dans ces librairies et voir leur simplicité d'utilisation, non ?

Pour le 2ème article, c'est une utilisation plutôt "basique" d'ASP.NET.

Il y a peut-être des mécanismes de plus haut-niveau dans Radzen pour faire cela plus simplement mais je ne connais pas ce framework.

D'un point de vu ASP.NET, le code utilise l'objet Session d'ASP.NET qui est partagé par toute les requêtes HTTP d'une même session.

Dans l'exemple, il y a 2 pages différentes (des .aspx vraisemblablement) mais qui utilisent le même objet Session.

La première page, dont le nom n'est pas indiqué contient un bouton "HTML" :

<asp:Button Text="Display PDF" runat="server" OnClick="OnView" />

C'est un plus qu'un simple bouton "HTML" (cf. le runat="server"), le framework ASP.NET va associer du JavaScript à ce bouton qui sera exécuté au moment du click sur lui via le "OnClick".

Ce code Javascript va exécuter la méthode "OnView" de la page .apsx "principale"/"nom non fourni", qui se charge d’interroger la base de données et de remplir la valeur associée à la clé "Base64String" dans le tableau associatif Session avec le base64 du contenu de la base de données.

Lignes 19 à 26 de la version C#, la méthode injecte dans la page "principale" un script qui sera en charge d'ouvrir la page "PopUp.aspx" au moment du rechargement de la page "principale", qui fait suite à l'appel de la fonction "OnView".

Dans le code de la page "PopUp.aspx", on récupère le tableau associatif Session, on y récupère la chaîne de caractère associée à la clé "Base64String" (houais, c'est pas top comme "nom de variable") et on envoie cette chaîne comme réponse à la requête HTTP à la page "PopUp.aspx" à la place d'une page "text/html" d'une page web "classique". Le "application/pdf" dans l'en-tête "Content-Type" de la réponse informe le navigateur qu'il doit afficher le contenu envoyé comme si c'était un .pdf.

ooooookay...

Alors tout d'abord merci pour vos réponses et le temps que vous avez pris pour réfléchir a mon problème.

Ensuite, j'ai essayé d'utiliser Syncfusion :

1 - Add Nuget Package (derniere version en date de Syncfusion

2 - mon code : 

@page "/HMCDrawing"
@using HmcOdata
@using HmcOdata.Models
@using Syncfusion.Blazor.PdfViewer
@inject HmcOdataService service

<PageTitle>ESSD Drawings</PageTitle>

<h1>ESSD Drawings</h1>

    <div style="display: flex; align-items: center; margin-bottom: 16px">
    <RadzenButton Click="@ClearSelection" Text="Clear Selection" />
    @if (SelectedItem?.Any() == true)
    {
    <div style="margin-left: 16px">
        Selected Drawing: <b>@SelectedItem[0].Drawing</b> (ATA @SelectedItem[0].Dash)
    </div>
    }
    </div>
    <div style="width:1600px;">
        <RadzenDataGrid @ref="TabDrawingGrid" 
        IsLoading="@isLoading" Data="@TabDrawing" Count="@count" TItem="TabDrawing" 
        AllowFiltering="true" FilterMode="FilterMode.Advanced" FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive"
        AllowColumnPicking="true" 
        AllowGrouping="true" 
        AllowColumnResize="true" 
        AllowSorting="true"
        AllowPaging="true" PageSize="20" ShowPagingSummary="true"
        Density="Density.Compact"
        PagerHorizontalAlign="HorizontalAlign.Left"
        ColumnWidth="150px"
        SelectionMode="DataGridSelectionMode.Single" @bind-Value=@SelectedItem>
            <Template Context=TabDrawing>
                <SfPdfViewer ID="pdfviewer" DocumentPath="@($"data:application/pdf;base64,{(@TabDrawing.PDFDrawing)}")" Width="1060px" Height="500px" 
                    ServiceUrl="https://ej2services.syncfusion.com/production/web-services/api/pdfviwer">
                </SfPdfViewer>
            </template>
            <Columns>
            <RadzenDataGridColumn TItem="TabDrawing" Property="ID"          Title="ID"              Width="100px" Visible="false"/>
            <RadzenDataGridColumn TItem="TabDrawing" Property="Drawing"     Title="Drawing"         Width="200px"   />
            <RadzenDataGridColumn TItem="TabDrawing" Property="Dash"        Title="Dash"            Width="100px" Visible="true" />
            <RadzenDataGridColumn TItem="TabDrawing" Property="Issue"       Title="Issue"           Width="100px" Visible="true" />
            <RadzenDataGridColumn TItem="TabDrawing" Property="Status"      Title="Status"          Width="100px" Visible="true" />
            <RadzenDataGridColumn TItem="TabDrawing" Property="ATA"         Title="ATA"             Width="100px" Visible="true" />
            <RadzenDataGridColumn TItem="TabDrawing" Property="Date"        Title="Date"            Width="200px" Visible="true" />
            <RadzenDataGridColumn TItem="TabDrawing" Property="Time"        Title="Time"            Width="200px" Visible="true" />
            <RadzenDataGridColumn TItem="TabDrawing" Property="PDFVersion"  Title="PDFVersion"      Width="100px" Visible="true" />
            </Columns>
        </RadzenDataGrid>
        
    </div>
@code {
    bool isLoading;
    int count;
    IEnumerable<TabDrawing> TabDrawing;
    RadzenDataGrid<TabDrawing> TabDrawingGrid;
    IList<TabDrawing> SelectedItem;

    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();
        DataAccess db = new DataAccess();
        TabDrawing = db.GetDrawings().AsEnumerable();
        foreach(TabDrawing drawing in TabDrawing)
        {
            if(drawing.bRawPDF != null)
            {
                drawing.bRawPDF = Convert.FromHexString(drawing.PDFDrawing);
                drawing.PDFDrawing = Convert.ToBase64String(drawing.bRawPDF);
            }
        }
        count = TabDrawing.Count();
    }
    void ClearSelection()
    {
        SelectedItem = null;
    }
}

3 - la page bug avec un bandeau "reload" en bas et indique dans la console de débogage:

System.InvalidOperationException: Cannot provide a value for property 'Localizer' on type 'Syncfusion.Blazor.PdfViewer.SfPdfViewer'. There is no registered service of type 'Syncfusion.Blazor.ISyncfusionStringLocalizer'.

J'ai consulté un peu les solutions à ce problème sur le net et chez Syncfusion et a l'unanimité la solution serait de déclarer la ligne suivante dans mon Program.cs :

builder.Services.AddSingleton(typeof(ISyncfusionStringLocalizer),typeof(SyncfusionLocalizer));

 Or, SyncfusionLocalizer : Le nom de type ou d'espace de noms 'SyncfusionLocalizer' est introuvable

et la je bloque...

Du coup j'ai tenté la solution suivante avec un invite de fenêtre de dialogue prévue par Radzen Blazor Components

j'ai essayé de déclarer tout comme il faut selon leur documentation etc

Mon code :

@page "/HMCDrawing"
@using HmcOdata
@using HmcOdata.Models
@using System.Text
@using System.Drawing
@inject HmcOdataService service
@inject DialogService DialogService

<PageTitle>ESSD Drawings</PageTitle>

<h1>ESSD Drawings</h1>

    <div style="display: flex; align-items: center; margin-bottom: 16px">
    <RadzenButton Click="@ClearSelection" Text="Clear Selection" />
    <RadzenButton Click="@ShowPdf" Text="Open PDF" style="margin-left: 16px"/>
    @if (SelectedItem?.Any() == true)
    {
    <div style="margin-left: 16px">
        Selected Drawing: <b>@SelectedItem[0].Drawing</b> (ATA @SelectedItem[0].Dash)
    </div>
    }
    </div>
    <div style="width:1600px;">
        <RadzenDataGrid @ref="TabDrawingGrid" 
        IsLoading="@isLoading" Data="@TabDrawing" Count="@count" TItem="TabDrawing" 
        AllowFiltering="true" FilterMode="FilterMode.Advanced" FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive"
        AllowColumnPicking="true" 
        AllowGrouping="true" 
        AllowColumnResize="true" 
        AllowSorting="true"
        AllowPaging="true" PageSize="20" ShowPagingSummary="true"
        Density="Density.Compact"
        PagerHorizontalAlign="HorizontalAlign.Left"
        ColumnWidth="150px"
        OnSelectedItemChange="@ShowPdf"
        SelectionMode="DataGridSelectionMode.Single" @bind-Value=@SelectedItem>
            <Columns>
            <RadzenDataGridColumn TItem="TabDrawing" Property="ID"          Title="ID"              Width="100px" Visible="false"/>
            <RadzenDataGridColumn TItem="TabDrawing" Property="Drawing"     Title="Drawing"         Width="200px"   />
            <RadzenDataGridColumn TItem="TabDrawing" Property="Dash"        Title="Dash"            Width="100px" Visible="true" />
            <RadzenDataGridColumn TItem="TabDrawing" Property="Issue"       Title="Issue"           Width="100px" Visible="true" />
            <RadzenDataGridColumn TItem="TabDrawing" Property="Status"      Title="Status"          Width="100px" Visible="true" />
            <RadzenDataGridColumn TItem="TabDrawing" Property="ATA"         Title="ATA"             Width="100px" Visible="true" />
            <RadzenDataGridColumn TItem="TabDrawing" Property="Date"        Title="Date"            Width="200px" Visible="true" />
            <RadzenDataGridColumn TItem="TabDrawing" Property="Time"        Title="Time"            Width="200px" Visible="true" />
            <RadzenDataGridColumn TItem="TabDrawing" Property="PDFVersion"  Title="PDFVersion"      Width="100px" Visible="true" />
            </Columns>
        </RadzenDataGrid>
    </div>
@code {
    bool isLoading;
    bool auto = false;
    int count;
    private bool showDialog;
    private string base64String;
    IEnumerable<TabDrawing> TabDrawing;
    RadzenDataGrid<TabDrawing> TabDrawingGrid;
    IList<TabDrawing> SelectedItem;

    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();
        DataAccess db = new DataAccess();
        TabDrawing = db.GetDrawings().AsEnumerable();
        count = TabDrawing.Count();
    }
    void ClearSelection()
    {
        SelectedItem = null;
    }
    public async Task ShowPdf()
    {
        int iDrawingID = SelectedItem[0].Id;
        await DialogService.OpenAsync<DialogCardPage>($"Drawing {iDrawingID}",
               new Dictionary<string, object>() { { "Drawing", iDrawingID } },
               new DialogOptions() { Width = "800px", Height = "600px", Resizable = true, Draggable = true });
    }
}

et la ce coup ci j'ai une exception de type cannot access a disposed object

j'ai bien une autre page codée pour la fenêtre de dialogue a ouvrir mais ca n'arrive pas jusque la, mon probleme d'objet "disposed" intervient avant d'ouvrir la page suivante (enfin je crois)

pendant que vous lisez mon désarroi je vais essayer d'autres solutions proposées par ChatGPT dans la premiere réponse de ce post:

- pas de composant Radzen Pdf-viewer malheureusement

- le iframe fait partie de ma 2eme solution si toutefois j'arrive a ouvrir ma fenetre de dialogue

- Javascript j'ai peur je connais pas du tout.

- formulaire C# j'ai cherché un peu comment en créer un et je ne trouve que des librairies et pas de cas concret

merci encore pour votre temps

3- Si j'ai bien compris les exemples, c'est à vous de fournir une classe implémentant l'interface ISyncfusionStringLocalizer.

>et la ce coup ci j'ai une exception de type cannot access a disposed object

Vous tentez d'utiliser un objet qui a déjà été libéré. Normalement, le débogueur indique quel objet pose problème.

>je vais essayer d'autres solutions proposées par ChatGPT

???

André Parfait, c'est pas ChatGPT.

-
Edité par umfred 24 janvier 2023 à 19:37:36

Bonjour,

J'ai finalement réussi à intégrer une balise HTML simple et efficace sur l'expand de mon datagrid qui permet donc de voir l'aperçu du PDF de la ligne correspondante et je trouve que ca répond bien au besoin utilisateur:

<RadzenDataGrid @ref="TabDrawingGrid"
Data="@TabDrawing" Count="@count" TItem="TabDrawing"
ExpandMode="DataGridExpandMode.Single">
    <Template Context=TabDrawing>
                <div class="d-flex justify-content-center">
                    <RadzenCard Style="width: 1500px; Height: 800px; overflow: hidden; border: var(--rz-grid-cell-border)" Class="rz-shadow-0">
                        <div class="d-flex flex-row">
                            <iframe width="100%" Height="800px" src="data:application/pdf;base64,@TabDrawing.PDFDrawing"></iframe>
                        </div>
                    </RadzenCard>
                </div>
            </template>
            <Columns>
            <RadzenDataGridColumn TItem="TabDrawing" Property="ID"          Title="ID"              Width="100px" Visible="false"/>
            <RadzenDataGridColumn TItem="TabDrawing" Property="Drawing"     Title="Drawing"         Width="200px"   />
            <RadzenDataGridColumn TItem="TabDrawing" Property="Dash"        Title="Dash"            Width="100px" Visible="true" />
            <RadzenDataGridColumn TItem="TabDrawing" Property="Issue"       Title="Issue"           Width="100px" Visible="true" />
            <RadzenDataGridColumn TItem="TabDrawing" Property="Status"      Title="Status"          Width="100px" Visible="true" />
            <RadzenDataGridColumn TItem="TabDrawing" Property="ATA"         Title="ATA"             Width="100px" Visible="true" />
            <RadzenDataGridColumn TItem="TabDrawing" Property="Date"        Title="Date"            Width="200px" Visible="true" />
            <RadzenDataGridColumn TItem="TabDrawing" Property="Time"        Title="Time"            Width="200px" Visible="true" />
            <RadzenDataGridColumn TItem="TabDrawing" Property="PDFVersion"  Title="PDFVersion"      Width="100px" Visible="true" />
            </Columns>
        </RadzenDataGrid>

la ligne se déplie et l'aperçu HTML permet pas mal de choses si les dimensions sont correctes.

Je n'aime pas trop laisser des problèmes sans résolution mais si je peux me passer de SyncFusion je préfère.

En revanche le fameux "disposed object" de la fenêtre de dialogue je galère à le résoudre et j'aurai besoin que ca fonctionne pour mes prochaines fenêtres.

Je vais me renseigner au bon endroit pour ce sujet.

Ayant réussi a afficher mon aperçu PDF ce topic peut être clos.

Merci pour vos réponses qui m'ont aidé à trouver ma solution,

et une excellente journée a tous.

-
Edité par Buntaflex 25 janvier 2023 à 9:39:16

à mon avis c'est cette partie de code

    void ClearSelection()
    {
        SelectedItem = null;
    }

qu'il faut corriger en (a minima)

    void ClearSelection()
    {
        SelectedItem.Clear();
    }

Bon j'ai réglé mon problème de "disposed object"... j'appelai ma page avec un paramètre nommé différemment de celui que j'avais inscrit dans ma page de destination... et forcement l'objet n'existait pas...

@umfred : Le SelectedItem.clear vide ma variable mais laisse la ligne en "apparence" sélectionnée même si la variable ne contient plus rien, pour l'utilisateur ca peut prêter a confusion je pense... alors que le "null" vide ma variable et remet visuellement la ligne comme non sélectionnée.

Pour mon PDF tout fonctionne, j'ai une belle fenêtre pop up qui s'affiche avec le contenu de mon PDF avec en prime la ptite barre d'outil qui va bien...

 Sauf que: cela ne fonctionne que pour des fichiers de moins de 1.6 mega 

 du coup j'ai essayé autre chose:

j'enregistre mon fichier dans un dossier bien précis de mon application qui va permettre a une balise "iframe" de l'ouvrir

je l'affiche assez simplement.

je le supprime a sa fermeture.

Ainsi un utilisateur ne créera sur le dossier "server" qu'un seul pdf a chaque fois qui sera ensuite supprimé etc...

Problème: l'on me dit que une fois déployée si j'ai 500 utilisateurs qui ouvrent chacun 1 PDF en même temps, je peux potentiellement surcharger le dossier server (temporairement)

De mon point de vue ca ne pose pas vraiment de problème...

Dans le pire des cas (qui n'arrivera jamais) je peux avoir 500 PDF de 4 méga ca me ferai 20 giga de pris sur le server ca devrai être largement supportable mais une fois de plus la probabilité qu'un tel évènement survienne est pour moi proche de zéro.

Mais en bref, et comme je fais des POC, j'essaye quand même de trouver une solution pour stocker ce PDF temporaire dans un dossier... temporaire

de type c:/Temp/NomDeLAppli dans lequel le contenu sera nettoyé a chaque fermeture du PDF

Soucis: si j'ai bien compris on ne peut pas exploiter de fichiers locaux avec une balise HTML ? (iframe ou object)

bref ici pas vraiment de question... juste savoir si un de vous pense a un cheminement de reflexion different qui me permettrait d'exploiter mon fichier temporaire local ?

et encore merci pour vos réponses qui ont su m'aiguiller jusque là

Bonjour,

je sais pas vraiment, si j'ai tout compris l'utilisation d'une variable en base 64 pour un PDF dans un iframe HTML est elle même bridée en terme de taille en fonction du browser dans lequel c'est utilisé :/

en revanche quand j'ouvre le fichier enregistré sur le dossier server il n'y a aucun soucis de taille, il m'ouvre même mon plus gros pdf de 4mega...

j'ai estimé 1.6 car il m'ouvre un pdf de 1.5 et des brouettes

mais il bloque pour celui de 1.6 et des bananes ainsi que tous les autres plus gros

>en fonction du browser

Ok, c'est ce que je supputais.

C'est le genre de truc qui doit être spécifié dans les normes.

Mais rien indique que votre contournement n'utilise pas un truc non spécifié dans une norme et ne fonctionne que "par chance".