ASP.NET Web ページ (Razor) サイトでのファイルの操作

作成者: Tom FitzMacken

この記事では、ASP.NET Web ページ (Razor) サイトでファイルの読み取り、書き込み、追加、削除、アップロードを行う方法について説明します。

注

画像をアップロードして操作する場合 (フリップやサイズ変更など)、「 ASP.NET Web ページ サイトでの画像の操作」を参照してください。

学習内容:

• テキスト ファイルを作成してデータを書き込む方法。
• 既存のファイルにデータを追加する方法。
• ファイルを読み取ってそこから表示する方法。
• Web サイトからファイルを削除する方法。
• ユーザーが 1 つのファイルまたは複数のファイルをアップロードできるようにする方法。

この記事で紹介する ASP.NET プログラミング機能を次に示します。

• File オブジェクト。ファイルを管理する方法を提供します。
• FileUpload ヘルパー。
• Path オブジェクト。パス名とファイル名を操作できるメソッドを提供します。

チュートリアルで使用するソフトウェアのバージョン

• ASP.NET Web ページ (Razor) 2
• WebMatrix 2

このチュートリアルは、WebMatrix 3 でも動作します。

テキスト ファイルの作成とデータの書き込み

Web サイトでデータベースを使用するだけでなく、ファイルを操作することもできます。 たとえば、サイトのデータを格納する簡単な方法としてテキスト ファイルを使用できます。 (データの格納に使用されるテキスト ファイルは、フラット ファイルと呼ばれることもあります)。テキスト ファイルは、.txt、.xml、 .csv (コンマ 区切り値) など、さまざまな形式にすることができます。

データをテキスト ファイルに格納する場合は、 File.WriteAllText メソッドを使用して、作成するファイルと書き込むデータを指定できます。 この手順では、3 つの input 要素 (名、姓、電子メール アドレス) と 送信 ボタンを含む単純なフォームを含むページを作成します。 ユーザーがフォームを送信すると、ユーザーの入力がテキスト ファイルに格納されます。

1. App_Dataという名前の新しいフォルダーを作成します (まだ存在しない場合)。

2. Web サイトのルートで、 UserData.cshtml という名前の新しいファイルを作成します。

3. 既存のコンテンツを次に置き換えます。

   @{
       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>
   

   HTML マークアップは、3 つのテキスト ボックスを含むフォームを作成します。 コードでは、 IsPost プロパティを使用して、処理を開始する前にページが送信されたかどうかを判断します。

   最初のタスクは、ユーザー入力を取得し、変数に割り当てることです。 その後、コードは、個別の変数の値を 1 つのコンマ区切り文字列に連結し、別の変数に格納します。 コンマ区切り記号は引用符 (",") に含まれる文字列であることに注意してください。これは、作成する大きな文字列にコンマを文字どおり埋め込んでいるためです。 連結するデータの最後に、 Environment.NewLineを追加します。 改行 (改行文字) が追加されます。 あなたがこのすべての連結で作成しているのは、次のような文字列です。

   David,Jones,davidj@contoso.com
   

   (末尾に非表示の改行がある場合)。

   次に、データを格納するファイルの場所と名前を含む変数 (dataFile) を作成します。 場所を設定するには、特別な処理が必要です。 Web サイトでは、Web サーバー上のファイルの C:\Folder\File.txt などの絶対パスをコードで参照するのは不適切な方法です。 Webサイトが移動されると、絶対パスが不正になります。 さらに、ホストされているサイト (自分のコンピューターではなく) では、通常、コードを記述するときに正しいパスが何であるかさえわかりません。

   しかし、(今のように、ファイルを書き込むためのように)完全なパスが必要な場合があります。 解決策は、MapPath オブジェクトのServer メソッドを使用することです。 これにより、Web サイトへの完全なパスが返されます。 Web サイトのルートのパスを取得するには、 ~ オペレーター (サイトの仮想ルートを再記述する) を使用して MapPathします。 ( ~/App_Data/などのサブフォルダー名を渡して、そのサブフォルダーのパスを取得することもできます)。その後、メソッドから返されるものに追加情報を連結して、完全なパスを作成できます。 この例では、ファイル名を追加します。 (ファイル パスとフォルダー パスの使用方法の詳細については、「 Razor 構文を使用した ASP.NET Web ページプログラミングの概要」を参照してください)。

   ファイルは App_Data フォルダーに保存されます。 このフォルダーは、「ASP.NET Web ページ サイトでのデータベースの操作の概要」の説明に従って、データ ファイルの格納に使用される ASP.NET 内の特別なフォルダーです。

   WriteAllText オブジェクトの File メソッドは、ファイルにデータを書き込みます。 このメソッドは、書き込むファイルの名前 (パス付き) と書き込む実際のデータの 2 つのパラメーターを受け取ります。 最初のパラメーターの名前には、プレフィックスとして @ 文字があることに注意してください。 これは、ASP.NET に逐語的な文字列リテラルを提供していること、および "/" のような文字を特別な方法で解釈してはならないことを示します。 (詳細については、「 Razor 構文を使用した ASP.NET Web プログラミングの概要」を参照してください)。

   注

   コードで ファイルを App_Data フォルダーに保存するには、そのフォルダーに対する読み取り/書き込みアクセス許可がアプリケーションに必要です。 開発用コンピューターでは、これは通常問題ではありません。 ただし、ホスティング プロバイダーの Web サーバーにサイトを発行する場合は、それらのアクセス許可を明示的に設定することが必要になる場合があります。 ホスティング プロバイダーのサーバーでこのコードを実行し、エラーが発生する場合は、ホスティング プロバイダーに問い合わせて、それらのアクセス許可を設定する方法を確認してください。

• ブラウザーでページを実行します。

  

• フィールドに値を入力し、[ 送信] をクリックします。

• ブラウザーを閉じます。

• プロジェクトに戻り、ビューを更新します。

• data.txt ファイルを開きます。 フォームで送信したデータはファイル内にあります。

  

• data.txt ファイルを閉じます。

既存のファイルへのデータの追加

前の例では、 WriteAllText を使用して、1 つのデータのみを含むテキスト ファイルを作成しました。 メソッドを再度呼び出して同じファイル名を渡すと、既存のファイルが完全に上書きされます。 ただし、ファイルを作成した後は、多くの場合、ファイルの末尾に新しいデータを追加する必要があります。 これを行うには、AppendAllText オブジェクトのFileメソッドを使用します。

1. Web サイトで、 UserData.cshtml ファイルのコピーを作成し、Copy UserDataMultiple.cshtml という名前を付けます。

2. 開始 <!DOCTYPE html> タグの前のコード ブロックを次のコード ブロックに置き換えます。

   @{
       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.";
       }
   }
   

   このコードには、前の例から 1 つの変更があります。 WriteAllTextを使用する代わりに、the AppendAllTextメソッドを使用します。 メソッドは似ていますが、 AppendAllText がファイルの末尾にデータを追加する点が異なります。 WriteAllTextと同様に、AppendAllTextファイルがまだ存在しない場合は作成します。

3. ブラウザーでページを実行します。

4. フィールドの値を入力し、[ 送信] をクリックします。

5. さらにデータを追加し、フォームをもう一度送信します。

6. プロジェクトに戻り、プロジェクト フォルダーを右クリックし、[ 最新の情報に更新] をクリックします。

7. data.txt ファイルを開きます。 入力した新しいデータが含まれるようになりました。

   

ファイルからのデータの読み取りと表示

テキスト ファイルにデータを書き込む必要がない場合でも、データを読み取る必要がある場合があります。 これを行うには、 File オブジェクトをもう一度使用できます。 File オブジェクトを使用すると、各行を個別に (改行で区切って) 読み取ったり、区切り方に関係なく個々の項目を読み取ったりできます。

この手順では、前の例で作成したデータを読み取って表示する方法を示します。

1. Web サイトのルートで、 DisplayData.cshtml という名前の新しいファイルを作成します。

2. 既存のコンテンツを次に置き換えます。

   @{
       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>
   

   このコードは、最初に前の例で作成したファイルを、次のメソッド呼び出しを使用して、 userDataという名前の変数に読み込みます。

   File.ReadAllLines(dataFile)
   

   これを行うコードは、 if ステートメント内にあります。 ファイルを読み取る場合は、 File.Exists メソッドを使用して、ファイルが使用可能かどうかを最初に判断することをお勧めします。 このコードでは、ファイルが空かどうかも確認されます。

   ページの本文には、2 つの foreach ループがあり、そのうち 1 つはもう 1 つの中に入れ子になっています。 外側の foreach ループは、データ ファイルから一度に 1 行ずつ取得します。 この場合、行はファイル内の改行によって定義されます。つまり、各データ項目は独自の行に配置されます。 外側のループは、順序付けられたリスト (<li> 要素) 内に新しい項目 (<ol>要素) を作成します。

   内部ループは、区切り記号としてコンマを使用して、各データ行を項目 (フィールド) に分割します。 (前の例に基づくと、各行に 3 つのフィールド (名、姓、および電子メール アドレスがそれぞれコンマで区切られた) が含まれていることを意味します)。内部ループでは、 <ul> リストも作成され、データ行のフィールドごとに 1 つのリスト 項目が表示されます。

   このコードは、配列と char データ型の 2 つのデータ型を使用する方法を示しています。 File.ReadAllLines メソッドはデータを配列として返すので、配列が必要です。 char メソッドは、各要素がSplit型であるarrayを返すので、charデータ型が必要です。 (配列の詳細については、「 Razor 構文を使用した ASP.NET Web プログラミングの概要」を参照してください)。

3. ブラウザーでページを実行します。 前の例で入力したデータが表示されます。

   

ファイルの削除

Web サイトからファイルを削除するには、 File.Delete メソッドを使用できます。 この手順では、ファイルの名前がわかっている場合に、ユーザーがイメージ フォルダーからイメージ (.jpg ファイル) を削除できるようにする方法を示します。

1. Web サイトで、 images という名前のサブフォルダーを作成します。

2. イメージ フォルダーに 1 つ以上の.jpg ファイルをコピーします。

3. Web サイトのルートで、 FileDelete.cshtml という名前の新しいファイルを作成します。

4. 既存のコンテンツを次に置き換えます。

   @{
       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>
   

   このページには、ユーザーがイメージ ファイルの名前を入力できるフォームが含まれています。 .jpg ファイル名拡張子は入力されません。このようなファイル名を制限することで、ユーザーがサイト上の任意のファイルを削除するのを防ぐことができます。

   コードは、ユーザーが入力したファイル名を読み取り、完全なパスを構築します。 パスを作成するために、コードは現在の Web サイト パス ( Server.MapPath メソッドによって返されるパス)、 イメージ フォルダー名、ユーザーが指定した名前、および ".jpg" をリテラル文字列として使用します。

   ファイルを削除するために、コードは File.Delete メソッドを呼び出し、先ほど作成した完全なパスを渡します。 マークアップの最後に、ファイルが削除されたことを示す確認メッセージがコードに表示されます。

5. ブラウザーでページを実行します。

   

6. 削除するファイルの名前を入力し、[ 送信] をクリックします。 ファイルが削除された場合、ファイルの名前がページの下部に表示されます。

ユーザーがファイルをアップロードできるようにする

FileUpload ヘルパーを使用すると、ユーザーは Web サイトにファイルをアップロードできます。 次の手順は、ユーザーが 1 つのファイルをアップロードできるようにする方法を示しています。

1. ASP.NET Web ヘルパー ライブラリを、ASP.NET Web ページ サイトにヘルパーをインストールする (前に追加していない場合) の説明に従って、Web サイトに追加します。

2. App_Data フォルダーに新しいフォルダーを作成し、UploadedFiles という名前を付けます。

3. ルートで、 FileUpload.cshtml という名前の新しいファイルを作成します。

4. ページ内の既存のコンテンツを次の内容に置き換えます。

   @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>
   

   ページの本文部分では、 FileUpload ヘルパーを使用して、おそらくよく知っているアップロード ボックスとボタンを作成します。

   

   FileUpload ヘルパーに設定するプロパティでは、ファイルをアップロードするための 1 つのボックスを作成し、[送信] ボタンで [アップロード] を読み取る必要があることを指定します。 (この記事の後半で、さらにボックスを追加します)。

   ユーザーが [アップロード] をクリックすると、ページの上部にあるコードがファイルを取得して保存します。 フォーム フィールドから値を取得するために通常使用する Request オブジェクトには、アップロードされたファイル (またはファイル) を含む Files 配列もあります。 配列内の特定の位置から個々のファイルを取得できます。たとえば、最初にアップロードされたファイルを取得したり、 Request.Files[0]を取得したり、2 番目のファイルを取得したり、 Request.Files[1]を取得したりできます。 (プログラミングでは、カウントは通常 0 から始まる点に注意してください)。

   アップロードしたファイルをフェッチするときは、それを操作できるように変数 (ここでは、 uploadedFile) に配置します。 アップロードされたファイルの名前を確認するには、その FileName プロパティを取得するだけです。 ただし、ユーザーがファイルをアップロードすると、 FileName には、パス全体を含むユーザーの元の名前が含まれます。 次のようになります。

   C:\Users\Public\Sample.txt

   ただし、サーバーではなく、ユーザーのコンピューター上のパスであるため、すべてのパス情報は必要ありません。 実際のファイル名 (Sample.txt) が必要です。 次のように、 Path.GetFileName メソッドを使用して、パスからファイルだけを取り除くことができます。

   Path.GetFileName(uploadedFile.FileName)
   

   Path オブジェクトは、パスの削除、パスの結合などを行うために使用できる、このようなメソッドを多数持つユーティリティです。

   アップロードしたファイルの名前を取得したら、アップロードしたファイルを Web サイトに保存する場所の新しいパスを作成できます。 この場合、 Server.MapPath、フォルダー名 (App_Data/UploadedFiles)、および新しく削除されたファイル名を組み合わせて新しいパスを作成します。 アップロードしたファイルの SaveAs メソッドを呼び出して、ファイルを実際に保存できます。

5. ブラウザーでページを実行します。

   

6. [ 参照 ] をクリックし、アップロードするファイルを選択します。

   

   [参照] ボタンの横にあるテキスト ボックスには、パスとファイルの場所が含まれます。

   

7. アップロードをクリックします。

8. Web サイトで、プロジェクト フォルダーを右クリックし、[最新の 情報に更新] をクリックします。

9. UploadedFiles フォルダーを開きます。 アップロードしたファイルはフォルダー内にあります。

   

ユーザーが複数のファイルをアップロードできるようにする

前の例では、ユーザーが 1 つのファイルをアップロードできるようにします。 ただし、 FileUpload ヘルパーを使用して、一度に複数のファイルをアップロードできます。 これは、写真のアップロードなどのシナリオで便利です。一度に 1 つのファイルをアップロードするのは面倒です。 (写真のアップロードについては、 ASP.NET Web ページ サイトの画像の操作に関するページを参照してください)。この例では、ユーザーが一度に 2 つアップロードできるようにする方法を示しますが、同じ手法を使用してそれ以上のアップロードを行うことができます。

1. ASP.NET Web ページ サイトにヘルパーをインストールする (まだ行っていない場合) の説明に従って、ASP.NET Web ヘルパー ライブラリを Web サイトに追加します。

2. FileUploadMultiple.cshtml という名前の新しいページを作成します。

3. ページ内の既存のコンテンツを次の内容に置き換えます。

   @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>
   

   この例では、ユーザーが既定で 2 つのファイルをアップロードできるように、ページの本文の FileUpload ヘルパーが構成されています。 allowMoreFilesToBeAddedは true に設定されているため、ヘルパーは、ユーザーがアップロード ボックスをさらに追加できるリンクをレンダリングします。

   

   ユーザーがアップロードしたファイルを処理するために、コードは前の例で使用したのと同じ基本的な手法を使用します。 Request.Files からファイルを取得し、保存します。 (適切なファイル名とパスを取得するために必要なさまざまなことを含む)。今回のイノベーションは、ユーザーが複数のファイルをアップロードしている可能性があり、あまり知らないということです。 調べるには、 Request.Files.Countを取得できます。

   この数値を手にして、 Request.Filesをループ処理し、各ファイルを順番にフェッチして保存できます。 コレクションを通じて既知の回数ループを実行する場合は、次のように for ループを使用できます。

   for(int i =0; i < numFiles; i++) {
       var uploadedFile = Request.Files[i];
       if (uploadedFile.ContentLength > 0) {
           fileName = Path.GetFileName(uploadedFile.FileName);
   
       // etc.
   }
   

   変数 i は、0 から設定した任意の上限に移動する一時的なカウンターにすぎません。 この場合、上限はファイルの数です。 ただし、カウンターは 0 から始まるため、ASP.NET でのカウント シナリオの一般的な上限は、実際にはファイル数より 1 小さくなります。 (3 つのファイルがアップロードされた場合、カウントは 0 から 2 になります)。

   uploadedCount変数は、正常にアップロードおよび保存されたすべてのファイルを合計します。 このコードは、予想されるファイルをアップロードできない可能性を考慮しています。

4. ブラウザーでページを実行します。 ブラウザーには、ページとその 2 つのアップロード ボックスが表示されます。

5. アップロードする 2 つのファイルを選択します。

6. [ 別のファイルの追加] をクリックします。 ページに新しいアップロード ボックスが表示されます。

   

7. アップロードをクリックします。

8. Web サイトで、プロジェクト フォルダーを右クリックし、[最新の 情報に更新] をクリックします。

9. UploadedFiles フォルダーを開き、正常にアップロードされたファイルを確認します。

その他のリソース

ASP.NET Web ページ サイトでの画像の操作

CSV ファイルへのエクスポート