Utilisation de fichiers dans un site pages Web ASP.NET (Razor)

Article
07/13/2023

Cet article explique comment lire, écrire, ajouter, supprimer et charger des fichiers dans un site pages Web ASP.NET (Razor).

Notes

Si vous souhaitez charger des images et les manipuler (par exemple, les retourner ou les redimensionner), consultez Utilisation d’images dans un site pages Web ASP.NET.

Ce que vous allez apprendre :

Comment créer un fichier texte et y écrire des données.

Comment ajouter des données à un fichier existant.

Comment lire un fichier et l’afficher à partir de celui-ci.

Comment supprimer des fichiers d’un site web.

Comment permettre aux utilisateurs de charger un ou plusieurs fichiers.

Voici les fonctionnalités de programmation ASP.NET introduites dans l’article :

Objet File , qui fournit un moyen de gérer des fichiers.

L’assistance FileUpload .

Objet Path , qui fournit des méthodes qui vous permettent de manipuler des noms de chemin et de fichier.

Versions logicielles utilisées dans le tutoriel

pages Web ASP.NET (Razor) 2

WebMatrix 2

Ce tutoriel fonctionne également avec WebMatrix 3.

Création d’un fichier texte et écriture de données dans celui-ci

En plus d’utiliser une base de données dans votre site web, vous pouvez utiliser des fichiers. Par exemple, vous pouvez utiliser des fichiers texte comme un moyen simple de stocker des données pour le site. (Un fichier texte utilisé pour stocker des données est parfois appelé fichier plat.) Les fichiers texte peuvent être dans différents formats, comme .txt, .xmlou .csv (valeurs délimitées par des virgules).

Si vous souhaitez stocker des données dans un fichier texte, vous pouvez utiliser la File.WriteAllText méthode pour spécifier le fichier à créer et les données à y écrire. Dans cette procédure, vous allez créer une page qui contient un formulaire simple avec trois input éléments (prénom, nom et adresse e-mail) et un bouton Envoyer . Lorsque l’utilisateur envoie le formulaire, vous stockez l’entrée de l’utilisateur dans un fichier texte.

Créez un dossier nommé App_Data, s’il n’existe pas déjà.
À la racine de votre site web, créez un fichier nommé UserData.cshtml.
Remplacez le contenu existant par ce qui suit :
```
@{
    var result = "";
    if (IsPost)
    {
        var firstName = Request["FirstName"];
        var lastName = Request["LastName"];
        var email = Request["Email"];

        var userData = firstName + "," + lastName +
            "," + email + Environment.NewLine;

        var dataFile = Server.MapPath("~/App_Data/data.txt");
        File.WriteAllText(@dataFile, userData);
        result = "Information saved.";
    }
}
<!DOCTYPE html>
<html>
<head>
    <title>Write Data to a File</title>
</head>
<body>
    <form id="form1" method="post">
    <div>
        <table>
            <tr>
                <td>First Name:</td>
                <td><input id="FirstName" name="FirstName" type="text" /></td>

            </tr>
            <tr>
                <td>Last Name:</td>
                <td><input id="LastName" name="LastName" type="text" /></td>
            </tr>
            <tr>
                <td>Email:</td>
                <td><input id="Email" name="Email" type="text" /></td>
            </tr>
            <tr>
                <td></td>
                <td><input type="submit" value="Submit"/></td>
            </tr>
        </table>
    </div>
    <div>
    @if(result != ""){
        <p>Result: @result</p>
    }
    </div>
    </form>
</body>
</html>
```
Le balisage HTML crée le formulaire avec les trois zones de texte. Dans le code, vous utilisez la IsPost propriété pour déterminer si la page a été envoyée avant de commencer le traitement.

La première tâche consiste à obtenir l’entrée utilisateur et à l’affecter à des variables. Le code concatène ensuite les valeurs des variables distinctes en une chaîne délimitée par des virgules, qui est ensuite stockée dans une autre variable. Notez que le séparateur de virgules est une chaîne contenue entre guillemets (« , »), car vous incorporez littéralement une virgule dans la grande chaîne que vous créez. À la fin des données que vous concaténés ensemble, vous ajoutez Environment.NewLine. Cela ajoute un saut de ligne (un caractère de nouvelle ligne). Ce que vous créez avec toute cette concaténation est une chaîne qui ressemble à ceci :
```
David,Jones,davidj@contoso.com
```
(Avec un saut de ligne invisible à la fin.)

Vous créez ensuite une variable (dataFile) qui contient l’emplacement et le nom du fichier dans lequel stocker les données. La définition de l’emplacement nécessite une gestion spéciale. Dans les sites web, il est une mauvaise pratique de faire référence dans le code à des chemins absolus comme C:\Folder\File.txt pour les fichiers sur le serveur web. Si un site web est déplacé, un chemin d’accès absolu est incorrect. En outre, pour un site hébergé (par opposition à sur votre propre ordinateur), vous ne savez généralement même pas quel est le chemin d’accès approprié lorsque vous écrivez le code.

Mais parfois (comme maintenant, pour écrire un fichier), vous avez besoin d’un chemin d’accès complet. La solution consiste à utiliser la MapPath méthode de l’objet Server . Cette opération retourne le chemin d’accès complet à votre site web. Pour obtenir le chemin d’accès de la racine du site web, utilisez l’opérateur ~ (pour redépresen la racine virtuelle du site) sur MapPath. (Vous pouvez également lui passer un nom de sous-dossier, par exemple ~/App_Data/, pour obtenir le chemin d’accès de ce sous-dossier.) Vous pouvez ensuite concaténer des informations supplémentaires sur ce que la méthode retourne afin de créer un chemin d’accès complet. Dans cet exemple, vous ajoutez un nom de fichier. (Pour plus d’informations sur l’utilisation des chemins d’accès aux fichiers et aux dossiers, consultez Présentation de la programmation pages Web ASP.NET à l’aide de la syntaxe Razor.)

Le fichier est enregistré dans le dossier App_Data . Ce dossier est un dossier spécial dans ASP.NET utilisé pour stocker des fichiers de données, comme décrit dans Présentation de l’utilisation d’une base de données dans des sites pages Web ASP.NET.

La WriteAllText méthode de l’objet File écrit les données dans le fichier . Cette méthode prend deux paramètres : le nom (avec le chemin) du fichier dans lequel écrire et les données réelles à écrire. Notez que le nom du premier paramètre a un @ caractère comme préfixe. Cela indique ASP.NET que vous fournissez un littéral de chaîne textuelle et que les caractères tels que « / » ne doivent pas être interprétés de manière spéciale. (Pour plus d’informations, consultez Présentation de la programmation web ASP.NET à l’aide de la syntaxe Razor.)

Notes

Pour que votre code enregistre des fichiers dans le dossier App_Data , l’application a besoin d’autorisations en lecture-écriture pour ce dossier. Sur votre ordinateur de développement, ce n’est généralement pas un problème. Toutefois, lorsque vous publiez votre site sur le serveur web d’un fournisseur d’hébergement, vous devrez peut-être définir explicitement ces autorisations. Si vous exécutez ce code sur le serveur d’un fournisseur d’hébergement et obtenez des erreurs, case activée avec le fournisseur d’hébergement pour savoir comment définir ces autorisations.

Exécutez la page dans un navigateur.
Entrez des valeurs dans les champs, puis cliquez sur Envoyer.
Fermez le navigateur.
Revenez au projet et actualisez la vue.
Ouvrez le fichier data.txt . Les données que vous avez envoyées dans le formulaire se situent dans le fichier.
Fermez le fichier data.txt .

Ajout de données à un fichier existant

Dans l’exemple précédent, vous avez utilisé WriteAllText pour créer un fichier texte contenant une seule donnée. Si vous appelez à nouveau la méthode et que vous lui transmettez le même nom de fichier, le fichier existant est complètement remplacé. Toutefois, après avoir créé un fichier, vous souhaitez souvent ajouter de nouvelles données à la fin du fichier. Vous pouvez le faire à l’aide de la AppendAllText méthode de l’objet File .

Dans le site web, effectuez une copie du fichier UserData.cshtml et nommez la copie UserDataMultiple.cshtml.

Remplacez le bloc de code avant la balise d’ouverture <!DOCTYPE html> par le bloc de code suivant :

@{
    var result = "";
    if (IsPost)
    {
        var firstName = Request["FirstName"];
        var lastName = Request["LastName"];
        var email = Request["Email"];

        var userData = firstName + "," + lastName +
            "," + email + Environment.NewLine;

        var dataFile = Server.MapPath("~/App_Data/data.txt");
        File.AppendAllText (@dataFile, userData);
        result = "Information saved.";
    }
}

Ce code comporte une modification par rapport à l’exemple précédent. Au lieu d’utiliser WriteAllText, il utilise la the AppendAllText méthode . Les méthodes sont similaires, sauf que AppendAllText ajoute les données à la fin du fichier. Comme avec WriteAllText, AppendAllText crée le fichier s’il n’existe pas déjà.

Exécutez la page dans un navigateur.
Entrez les valeurs des champs, puis cliquez sur Envoyer.
Ajoutez des données supplémentaires et envoyez à nouveau le formulaire.
Revenez à votre projet, cliquez avec le bouton droit sur le dossier du projet, puis cliquez sur Actualiser.
Ouvrez le fichier data.txt . Il contient maintenant les nouvelles données que vous venez d’entrer.

Lecture et affichage de données à partir d’un fichier

Même si vous n’avez pas besoin d’écrire des données dans un fichier texte, vous devrez probablement parfois lire les données d’un fichier. Pour ce faire, vous pouvez à nouveau utiliser l’objet File . Vous pouvez utiliser l’objet File pour lire chaque ligne individuellement (séparée par des sauts de ligne) ou pour lire un élément individuel, quelle que soit la façon dont ils sont séparés.

Cette procédure vous montre comment lire et afficher les données que vous avez créées dans l’exemple précédent.

À la racine de votre site web, créez un fichier nommé DisplayData.cshtml.
Remplacez le contenu existant par ce qui suit :
```
@{
    var result = "";
    Array userData = null;
    char[] delimiterChar = {','};

    var dataFile = Server.MapPath("~/App_Data/data.txt");

    if (File.Exists(dataFile)) {
        userData = File.ReadAllLines(dataFile);
        if (userData == null) {
            // Empty file.
            result = "The file is empty.";
        }
    }
    else {
        // File does not exist.
        result = "The file does not exist.";
    }
}
<!DOCTYPE html>

<html>
<head>
    <title>Reading Data from a File</title>
</head>
<body>
    <div>
        <h1>Reading Data from a File</h1>
        @result
        @if (result == "") {
            <ol>
            @foreach (string dataLine in userData) {
            <li>
                User
                <ul>
                @foreach (string dataItem in dataLine.Split(delimiterChar)) {
                    <li>@dataItem</li >
                }
                </ul>
            </li>
            }
            </ol>
        }
    </div>
</body>
</html>
```
Le code commence par lire le fichier que vous avez créé dans l’exemple précédent dans une variable nommée userData, à l’aide de cet appel de méthode :
```
File.ReadAllLines(dataFile)
```
Le code pour effectuer cette opération se trouve à l’intérieur d’une if instruction . Lorsque vous souhaitez lire un fichier, il est judicieux d’utiliser la File.Exists méthode pour déterminer d’abord si le fichier est disponible. Le code vérifie également si le fichier est vide.

Le corps de la page contient deux foreach boucles, l’une imbriquée dans l’autre. La boucle externe foreach obtient une ligne à la fois à partir du fichier de données. Dans ce cas, les lignes sont définies par des sauts de ligne dans le fichier, c’est-à-dire que chaque élément de données se trouve sur sa propre ligne. La boucle externe crée un élément (<li> élément) à l’intérieur d’une liste ordonnée (<ol> élément ).

La boucle interne fractionne chaque ligne de données en éléments (champs) à l’aide d’une virgule comme délimiteur. (D’après l’exemple précédent, cela signifie que chaque ligne contient trois champs : le prénom, le nom et l’adresse e-mail, chacun séparé par une virgule.) La boucle interne crée également une <ul> liste et affiche un élément de liste pour chaque champ de la ligne de données.

Le code montre comment utiliser deux types de données, un tableau et le type de char données. Le tableau est obligatoire, car la méthode retourne des File.ReadAllLines données sous forme de tableau. Le char type de données est obligatoire, car la Split méthode retourne un array dans lequel chaque élément est du type char. (Pour plus d’informations sur les tableaux, consultez Présentation de la programmation web ASP.NET à l’aide de la syntaxe Razor.)
Exécutez la page dans un navigateur. Les données que vous avez entrées pour les exemples précédents s’affichent.

Conseil

Affichage de données à partir d’un fichier Comma-Delimited Microsoft Excel

Vous pouvez utiliser Microsoft Excel pour enregistrer les données contenues dans une feuille de calcul en tant que fichier délimité par des virgules ( fichier.csv ). Dans ce cas, le fichier est enregistré en texte brut, et non au format Excel. Chaque ligne de la feuille de calcul est séparée par un saut de ligne dans le fichier texte, et chaque élément de données est séparé par une virgule. Vous pouvez utiliser le code présenté dans l’exemple précédent pour lire un fichier délimité par des virgules Excel simplement en modifiant le nom du fichier de données dans votre code.

Suppression de fichiers

Pour supprimer des fichiers de votre site web, vous pouvez utiliser la File.Delete méthode . Cette procédure montre comment permettre aux utilisateurs de supprimer une image (.jpg fichier) d’un dossier images s’ils connaissent le nom du fichier.

Notes

Important Dans un site web de production, vous limitez généralement les personnes autorisées à apporter des modifications aux données. Pour plus d’informations sur la configuration de l’appartenance et sur les moyens d’autoriser les utilisateurs à effectuer des tâches sur le site, consultez Ajout de la sécurité et de l’appartenance à un site pages Web ASP.NET.

Dans le site web, créez un sous-dossier nommé images.
Copiez un ou plusieurs fichiers.jpg dans le dossier images .
À la racine du site web, créez un fichier nommé FileDelete.cshtml.
Remplacez le contenu existant par ce qui suit :
```
@{
    bool deleteSuccess = false;
    var photoName = "";
    if (IsPost) {
        photoName = Request["photoFileName"] + ".jpg";
        var fullPath = Server.MapPath("~/images/" + photoName);

        if (File.Exists(fullPath))
        {
                File.Delete(fullPath);
                deleteSuccess = true;
        }
    }
}
<!DOCTYPE html>
<html>
  <head>
    <title>Delete a Photo</title>
  </head>
  <body>
    <h1>Delete a Photo from the Site</h1>
    <form name="deletePhoto" action="" method="post">
      <p>File name of image to delete (without .jpg extension):
      <input name="photoFileName" type="text" value="" />
      </p>
      <p><input type="submit" value="Submit" /></p>
    </form>

    @if(deleteSuccess) {
        <p>
        @photoName deleted!
        </p>
        }
  </body>
</html>
```
Cette page contient un formulaire dans lequel les utilisateurs peuvent entrer le nom d’un fichier image. Ils n’entrent pas l’extension de nom de fichier.jpg; En limitant le nom de fichier comme celui-ci, vous empêchez les utilisateurs de supprimer des fichiers arbitraires sur votre site.

Le code lit le nom de fichier que l’utilisateur a entré, puis construit un chemin d’accès complet. Pour créer le chemin d’accès, le code utilise le chemin du site web actuel (tel que retourné par la Server.MapPath méthode), le nom du dossier images , le nom que l’utilisateur a fourni et « .jpg » comme chaîne littérale.

Pour supprimer le fichier, le code appelle la File.Delete méthode, en lui passant le chemin d’accès complet que vous venez de construire. À la fin du balisage, le code affiche un message de confirmation indiquant que le fichier a été supprimé.
Exécutez la page dans un navigateur.
Entrez le nom du fichier à supprimer, puis cliquez sur Envoyer. Si le fichier a été supprimé, le nom du fichier s’affiche en bas de la page.

Permettre aux utilisateurs de charger un fichier

L’assistance FileUpload permet aux utilisateurs de charger des fichiers sur votre site web. La procédure ci-dessous vous montre comment permettre aux utilisateurs de charger un seul fichier.

Ajoutez la bibliothèque ASP.NET Web Helpers à votre site web, comme décrit dans Installation des helpers dans un site pages Web ASP.NET, si vous ne l’avez pas ajoutée précédemment.
Dans le dossier App_Data , créez un dossier et nommez-le UploadedFiles.
À la racine, créez un fichier nommé FileUpload.cshtml.
Remplacez le contenu existant dans la page par ce qui suit :
```
@using Microsoft.Web.Helpers;
@{
    var fileName = "";
    if (IsPost) {
        var fileSavePath = "";
        var uploadedFile = Request.Files[0];
        fileName = Path.GetFileName(uploadedFile.FileName);
        fileSavePath = Server.MapPath("~/App_Data/UploadedFiles/" +
          fileName);
        uploadedFile.SaveAs(fileSavePath);
    }
}
<!DOCTYPE html>
<html>
    <head>
    <title>FileUpload - Single-File Example</title>
    </head>
    <body>
    <h1>FileUpload - Single-File Example</h1>
    @FileUpload.GetHtml(
        initialNumberOfFiles:1,
        allowMoreFilesToBeAdded:false,
        includeFormTag:true,
        uploadText:"Upload")
    @if (IsPost) {
        <span>File uploaded!</span><br/>
    }
    </body>
</html>
```
La partie du corps de la page utilise l’assistance FileUpload pour créer la zone de chargement et les boutons que vous connaissez probablement :

Les propriétés que vous définissez pour l’assistance FileUpload spécifient qu’une seule zone pour le fichier doit être chargée et que le bouton d’envoi doit lire Charger. (Vous ajouterez d’autres zones plus loin dans l’article.)

Lorsque l’utilisateur clique sur Charger, le code en haut de la page obtient le fichier et l’enregistre. L’objet Request que vous utilisez normalement pour obtenir des valeurs à partir de champs de formulaire a également un Files tableau qui contient le fichier (ou les fichiers) qui ont été chargés. Vous pouvez obtenir des fichiers individuels à partir de positions spécifiques dans le tableau. Par exemple, pour obtenir le premier fichier chargé, vous obtenez Request.Files[0], pour obtenir le deuxième fichier, vous obtenez Request.Files[1], et ainsi de suite. (N’oubliez pas qu’en programmation, le comptage commence généralement à zéro.)

Lorsque vous récupérez un fichier chargé, vous le placez dans une variable (ici, uploadedFile) afin de pouvoir le manipuler. Pour déterminer le nom du fichier chargé, vous obtenez simplement sa FileName propriété. Toutefois, lorsque l’utilisateur charge un fichier, FileName contient le nom d’origine de l’utilisateur, qui inclut le chemin d’accès complet. Il peut se présenter comme suit :

C:\Users\Public\Sample.txt

Toutefois, vous ne souhaitez pas toutes ces informations sur le chemin d’accès, car il s’agit du chemin d’accès sur l’ordinateur de l’utilisateur, et non pour votre serveur. Vous voulez simplement le nom de fichier réel (Sample.txt). Vous pouvez supprimer uniquement le fichier d’un chemin d’accès à l’aide de la Path.GetFileName méthode , comme suit :
```
Path.GetFileName(uploadedFile.FileName)
```
L’objet Path est un utilitaire qui a un certain nombre de méthodes comme celle-ci que vous pouvez utiliser pour supprimer des chemins, combiner des chemins, etc.

Une fois que vous avez obtenu le nom du fichier chargé, vous pouvez créer un nouveau chemin d’accès pour l’emplacement où vous souhaitez stocker le fichier chargé dans votre site web. Dans ce cas, vous combinez Server.MapPath, les noms de dossiers (App_Data/UploadedFiles) et le nom de fichier nouvellement supprimé pour créer un chemin d’accès. Vous pouvez ensuite appeler la méthode du SaveAs fichier chargé pour enregistrer le fichier.
Exécutez la page dans un navigateur.
Cliquez sur Parcourir , puis sélectionnez un fichier à charger.

La zone de texte en regard du bouton Parcourir contient le chemin d’accès et l’emplacement du fichier.
Cliquez sur Télécharger.
Dans le site web, cliquez avec le bouton droit sur le dossier du projet, puis cliquez sur Actualiser.
Ouvrez le dossier UploadedFiles . Le fichier que vous avez chargé se trouve dans le dossier .

Permettre aux utilisateurs de charger plusieurs fichiers

Dans l’exemple précédent, vous permettez aux utilisateurs de charger un fichier. Mais vous pouvez utiliser l’assistance FileUpload pour charger plusieurs fichiers à la fois. Cela est pratique pour les scénarios tels que le chargement de photos, où le chargement d’un fichier à la fois est fastidieux. (Vous pouvez en savoir plus sur le chargement de photos dans Utilisation d’images dans un site pages Web ASP.NET.) Cet exemple montre comment permettre aux utilisateurs de charger deux à la fois, bien que vous puissiez utiliser la même technique pour charger plus que cela.

Ajoutez la bibliothèque ASP.NET Web Helpers à votre site web, comme décrit dans Installation d’assistances dans un site pages Web ASP.NET, si ce n’est déjà fait.
Créez une page nommée FileUploadMultiple.cshtml.
Remplacez le contenu existant dans la page par ce qui suit :
```
@using Microsoft.Web.Helpers;
@{
  var message = "";
  if (IsPost) {
      var fileName = "";
      var fileSavePath = "";
      int numFiles = Request.Files.Count;
      int uploadedCount = 0;
      for(int i =0; i < numFiles; i++) {
          var uploadedFile = Request.Files[i];
          if (uploadedFile.ContentLength > 0) {
              fileName = Path.GetFileName(uploadedFile.FileName);
              fileSavePath = Server.MapPath("~/App_Data/UploadedFiles/" +
                fileName);
              uploadedFile.SaveAs(fileSavePath);
              uploadedCount++;
          }
       }
       message = "File upload complete. Total files uploaded: " +
         uploadedCount.ToString();
   }
}
<!DOCTYPE html>
<html>
    <head><title>FileUpload - Multiple File Example</title></head>
<body>
    <form id="myForm" method="post"
       enctype="multipart/form-data"
       action="">
    <div>
    <h1>File Upload - Multiple-File Example</h1>
    @if (!IsPost) {
        @FileUpload.GetHtml(
            initialNumberOfFiles:2,
            allowMoreFilesToBeAdded:true,
            includeFormTag:true,
            addText:"Add another file",
            uploadText:"Upload")
        }
    <span>@message</span>
    </div>
    </form>
</body>
</html>
```
Dans cet exemple, l’assistance FileUpload dans le corps de la page est configurée pour permettre aux utilisateurs de charger deux fichiers par défaut. Étant donné que allowMoreFilesToBeAdded est défini sur , l’assistance affiche un lien qui permet à truel’utilisateur d’ajouter d’autres zones de chargement :

Pour traiter les fichiers que l’utilisateur charge, le code utilise la même technique de base que celle utilisée dans l’exemple précédent : obtenir un fichier à partir de Request.Files , puis l’enregistrer. (Y compris les différentes actions que vous devez effectuer pour obtenir le nom de fichier et le chemin d’accès appropriés.) L’innovation cette fois-ci est que l’utilisateur peut charger plusieurs fichiers et que vous n’en connaissez pas beaucoup. Pour le savoir, vous pouvez obtenir Request.Files.Count.

Avec ce nombre en main, vous pouvez effectuer Request.Filesune boucle, extraire chaque fichier à son tour et l’enregistrer. Lorsque vous souhaitez effectuer une boucle d’un nombre connu de fois dans une collection, vous pouvez utiliser une for boucle, comme suit :
```
for(int i =0; i < numFiles; i++) {
    var uploadedFile = Request.Files[i];
    if (uploadedFile.ContentLength > 0) {
        fileName = Path.GetFileName(uploadedFile.FileName);

    // etc.
}
```
La variable i est simplement un compteur temporaire qui passe de zéro à la limite supérieure que vous définissez. Dans ce cas, la limite supérieure est le nombre de fichiers. Toutefois, étant donné que le compteur commence à zéro, comme c’est généralement le cas pour les scénarios de comptage dans ASP.NET, la limite supérieure est en fait une de moins que le nombre de fichiers. (Si trois fichiers sont chargés, le nombre est égal à 2.)

La uploadedCount variable totalise tous les fichiers qui ont été correctement chargés et enregistrés. Ce code tient compte de la possibilité qu’un fichier attendu ne puisse pas être chargé.
Exécutez la page dans un navigateur. Le navigateur affiche la page et ses deux zones de chargement.
Sélectionnez deux fichiers à charger.
Cliquez sur Ajouter un autre fichier. La page affiche une nouvelle zone de chargement.
Cliquez sur Télécharger.
Dans le site web, cliquez avec le bouton droit sur le dossier du projet, puis cliquez sur Actualiser.
Ouvrez le dossier UploadedFiles pour afficher les fichiers correctement chargés.