C# Asp.Net MVC Core visualizzare anteprima di immagine con .Net 5

Si riporta l'articolo scritto per il sito https://www.iprogrammatori.it/articoli/microsoft-net-framework/art_c-aspnet-mvc-core-visualizzare-anteprima-di-immagine-con-net-5_1751.aspx 

In questo articolo vedremo come impostare nelle nostre pagine web, in particolare con la tecnologia Asp.Net MVC e l’ambiente di sviluppo Visual Studio 2019 Community, la possibilità di selezionare un file immagine nel nostro pc, e visualizzarne l’anteprima.

Inoltre sarà possibile dallo stream dati del file immagine, salvare su un percorso del nostro computer il file che viene visualizzato in anteprima

Il linguaggio di programmazione che utilizzeremo è C#, con l’ultima versione del Framework che è la .Net 5

In figura 1, il risultato dell’anteprima dell’immagine.

 

Figura 1 - La form dei dati

Creazione del progetto

Si crea un nuovo progetto di tipo Asp.Net MVC Core selezionando la versione del Framework 5.

La pagina web sarà formato da due campi di testo, che contengono informazioni come nome e cognome, ed un controllo per il caricamento dei file ed un tag di tipo immagine ed un campo nascosto dove andremo a salvare lo stream della foto. Il pulsante Inserisci permetterà di passare al controller le informazioni relative ai campi e lo stream del file immagine.

Stesura di codice

Dopo aver creato il progetto, dobbiamo creare una classe per la gestione dei dati, che sarà utilizzata nel controller, questo modello sarà utilizzato nella pagina web.

Nella cartella “Model” facciamo click con il tasto destro e dal menu che viene visualizzato, selezioniamo “Classe” dal sotto menu “Nuovo Elemento”, impostiamo un nome alla classe, nel nostro caso denominata “Anagrafica” e si creano 4 proprietà, tre di tipo string ed una di tipo byteArray che sarà utilizzata per la gestione dei dati.

Qui di seguito le suddette dichiarazione della classe “Anagrafica”

C#

    public class Anagrafica

    {

       

        public string Nome { get; set; }

 

        public string Cognome { get; set; }

 

        public byte[] Logo { get; set; }

 

        public string LogoStream { get; set; }

 

    }

Le proprietà del modello Anagrafica, si possono utilizzare anche per gestire i dati nel caso che si fa uso di un database e quindi per le operazioni relative ad inserimento, lettura, agigornamento e cancellazione.

Questo modello che abbiamo appena creato lo utilizzeremo nella pagina web.

Nella cartella View, facciamo click sulla pagina denominata "Index” ed utilizzeremo questo modello

Qui di seguito il frammento di codice per la creazione della pagina di inserimento.

Nella pagina Index.cshtml, scriviamo, in alto sopra ad ogni dichiarazione, il riferimento a questo modello, in modo che possiamo utilizzarlo nella nostra pagina web.

Il tutto sarà come il frammento qui di seguito.

@model Anagrafica

Qui di seguito il codice relativo alla pagina web, in cui vengono definitivi campi, il pulsante e la gestione dei dati e dell'immagine quando viene fatto click sul pulsante "Inserisci".

Cshtml:

<div class="text-center">

   Esempio Anteprima Immagine

    <br />

 

    @using (Html.BeginForm("InserisciAnagrafica", "Home", FormMethod.Post))

    {

 

   

    <label>Nome</label>

   

     @Html.TextBox("Nome")

    <br />

    <label>Cognome</label>

    @Html.TextBox("Cognome")

    <br />

    <label>Immagine</label>

    <input type="file" accept="*.jpg" name="Immagine" id="Immagine" onchange="Anteprima(this)" /><br />

 

    <br /><img id="Logo" style="width:100px; height:100px"  src="#" alt="Anteprima" name="Logo"    /><br />

    <input type="hidden" id="LogoStream" name="LogoStream" />

   <button type="submit" id="Inserisci">Inserisci</button>

 

    }

</div>

Il controllo input file permette di visualizzare nella finestra di dialogo solo i file di tipo “.jpg” per aver impostato nella proprietà “accept” il valore “*.jpg”. La proprietà “OnChange” è impostata su una funzione Javascript che permette di visualizzare l’anteprima dell’immagine.

La funzione “Anteprima” di Javascript, verifica se il file è di tipo Jpg, ed in tal caso, rileva lo stream dati del file, impostandolo nel tag di tipo immagine e nel controllo nascosto che sarà utilizzato per generare il file immagine.

Qui di seguito il frammento di codice delle suddette operazioni.

<script>

 

 

    function Anteprima(Input) {

        var file = Input.files[0];

 

        if (file) {

            var Estensione = ['jpg'];

            if ($.isArray(file.name.split('.').pop().toLowerCase(), Estensione)==-1) {

                Alert('File non valido.');

                return;

            }

            var reader = new FileReader();

            reader.onload = function () {

                $("#Logo").attr("src", reader.result);

                $("#LogoStream").val(reader.result);

            }

            reader.readAsDataURL(file);

 

        }

 

 

    }

 

 

 

</script>

 

Terminata la parte relativa alla pagina web, dobbiamo scrivere il codice che dal controller rileva le informazioni dalla pagina al click del pulsante.

Il metodo di tipo “Post” accetta come parametro il modello precedentemente creato, dove nella proprietà “LogoStream” viene passata la stringa relativa allo stream dati dell’immagine, che verrà convertita in array di byte.

Nel seguente codice, oltre alle informazioni ai dati inseriti nei campi verrà salvato il file di tipo immagine su disco locale, oppure nel caso che si fa uso di una base dati, utilizzare l'array di byte per salvarle in qualche campo.

Qui di seguito il metodo “InserisciAnagrafica” nel controller “home” che verrà richiamato dalla pagina web, passando il modello “Anagrafica” con i dati inseriti nella pagina.

Controller

C#

[HttpPost]

        public ActionResult InserisciAnagrafica(Anagrafica anagrafica)

        {

            if (!string.IsNullOrEmpty(anagrafica.LogoStream))

            {

           int valore = anagrafica.LogoStream.IndexOf(',') + 1;

            byte[] byteArray = Convert.FromBase64String(anagrafica.LogoStream[valore..^0]);

            System.IO.File.WriteAllBytes("C:\\Varie\\MioFile.jpg", byteArray);

             }

            return View("Index");

        }

Conclusioni

L’articolo ha voluto fornire al lettore una tecnica per aggiungere alle proprie applicazioni web di tipo Asp.Net MVC o Asp.Net MVC Core, la possibilità di visualizzare le immagini rilevate dal proprio pc, per poi salvarle o su pc o in una base dati.

Questo scenario si può applicare in tutte quelle applicazioni con il quale prima di salvare i dati, devono verificare se l’immagine selezionata è corretta o altro, fornendo un’anteprima.