ASP.NET WP-フォームの使用

この章では、Razor構文を使用してASP.NET Webページを使用する場合の入力フォームの作成方法とユーザーの入力の処理方法について説明します。

フォームは、テキストボックス、チェックボックス、ラジオボタン、プルダウンリストなどのユーザー入力コントロールを配置するHTMLドキュメントのセクションです。
ユーザー入力を収集して処理する場合は、フォームを使用します。

入力フォームを作成する方法は？

*MyForm.cshtml* という名前の新しいcshtmlファイルを作成して、コードを次のプログラムに置き換えて、簡単な例を見てみましょう。

<!DOCTYPE html>
<html>

   <head>
      <title>Customer Form</title>
   </head>

   <body>
      <form method = "post" action = "">
         <fieldset>
            <legend>Add Student</legend>
            <div>
               <label for = "StudentName">Student Name: </label>
               <input type = "text" name = "StudentName" value = ""/>
            </div>

            <div>
               <label for = "UniName">University Name:</label>
               <input type = "text" name = "UniName" value = ""/>
            </div>

            <div>
               <label for = "Address">Res. Address:</label>
               <input type = "text" name = "Address" value = ""/>
            </div>

            <div>
               <label> </label>
               <input type = "submit" value = "Submit" class = "submit"/>
            </div>
         </fieldset>
      </form>

   </body>
</html>

アプリケーションを再度実行して、次のURLを指定してみましょう-* http：//localhost：46023/myform、*すると、次の出力が表示されます。

入力フォーム

次のスクリーンショットに示すように、すべてのフィールドにデータを入力してみましょう。

フィールドのデータ

さて、Submitボタンをクリックすると、何も起こらないことがわかります。フォームを便利にするために、サーバーで実行するコードを追加する必要があります。

フォームからのユーザー入力の読み取り

フォームからユーザー入力を読み取るには、すべてのフィールドから値を読み取り、必要に応じて処理するコードを追加します。この手順では、フィールドを読み取り、ページにユーザー入力を表示する方法を示します。

フィールドのすべての値を処理するコードを追加した同じ例をもう一度見てみましょう。

<!DOCTYPE html>
<html>

   <head>
      <title>Customer Form</title>
   </head>

   <body>
      @{
         if (IsPost){
            string StudentName = Request["StudentName"];
            string UniName = Request["UniName"];
            string Address = Request["Address"];

            <p>
               You entered: <br/>
               Student Name: @StudentName <br/>
               University Name: @UniName <br/>
               Res. Address: @Address <br/>
            </p>
         } else{
            <form method = "post" action = "">
               <fieldset>
                  <legend>Add Student</legend>
                  <div>
                     <label for = y"StudentName">Student Name: </label>
                     <input type = "text" name = "StudentName" value = ""/>
                  </div>

                  <div>
                     <label for = "UniName">University Name:</label>
                     <input type = "text" name = "UniName" value = ""/>
                  </div>

                  <div>
                     <label for = "Address">Res. Address:</label>
                     <input type = "text" name="Address" value = ""/>
                  </div>

                  <div>
                     <label> </label>
                     <input type = "submit" value = "Submit" class = "submit"/>
                  </div>

               </fieldset>
            </form>
         }
      }
   </body>
</html>

アプリケーションを再度実行して、次のURLを指定してみましょう- http：//localhost：46023/myform 。次の出力が表示されます。

ユーザー入力フィールド

すべてのフィールドにデータを入力しましょう。

データを入力

[送信]ボタンをクリックすると、次の出力が表示されます。

送信ボタンをクリック

プロジェクトに新しいフォルダを作成し、画像として名前を付けて、そのフォルダに画像を追加して、別の簡単な例を見てみましょう。

*MyPhotos.cshtml* という名前の別のcshtmlファイルを追加し、次のコードを置き換えます。

@{
   var imagePath = "";

   if (Request["Choice"] != null)
   { imagePath = "images/" &plus; Request["Choice"]; }
}

<!DOCTYPE html>
<html>

   <body>
      <h1>Display Images</h1>

      <form method = "post" action = "">
         I want to see:
         <select name = "Choice">
            <option value = "index.jpg">Nature 1</option>
            <option value = "index1.jpg">Nature 2</option>
            <option value = "index2.jpg">Nature 3</option>
         </select>
         <input type = "submit" value = "Submit"/>

         @if (imagePath != ""){
            <p><img src = "@imagePath" alt = "Sample"/></p>
         }
      </form>

   </body>
</html>

ご覧のとおり、次のスクリーンショットに示すように、imagesフォルダーにあるいくつかのjpgファイルの参照を追加しました。

一部のJpgファイル

アプリケーションを実行し、次のURLを指定すると、 http：//localhost：46023/myphotos になり、次の出力が表示されます。

画像の表示

[送信]をクリックすると、 index.jpg ファイルがページにロードされていることがわかります。

インデックスファイル

ドロップダウンリストから別の写真を選択するときに、Nature 3と言い、[送信]をクリックすると、次の画像に示すようにページ上の写真が更新されます。

別の写真

Asp.net-wp-working-with-forms

ASP.NET WP-フォームの使用

入力フォームを作成する方法は？

フォームからのユーザー入力の読み取り