ASP.NET Web ページ (Razor) サイトでの HTML フォームの使用
作成者: Tom FitzMacken
この記事では、ASP.NET Web ページ (Razor) Web サイトで作業しているときに (テキスト ボックスとボタンを含む) HTML フォームを使用する方法について説明します。
学習内容:
- HTML フォームを作成する方法。
- フォームからユーザーによる入力を読み取る方法。
- ユーザーによる入力を検証する方法。
- ページが送信された後でフォームの値を復元する方法。
これらの ASP.NET プログラミングの概念は、次の記事で紹介されています。
Requestオブジェクトです。- 入力の検証。
- HTML エンコード。
チュートリアルで使用するソフトウェアのバージョン
- ASP.NET Web ページ (Razor) 3
このチュートリアルは、ASP.NET Web ページ 2 にも適用できます。
簡単な HTML フォームの作成
新しい Web サイトを作成します。
ルート フォルダーに Form.cshtml という名前の Web ページを作成して、次のマークアップを入力します。
<!DOCTYPE html> <html> <head> <title>Customer Form</title> </head> <body> <form method="post" > <fieldset> <legend>Add Customer</legend> <div> <label for="CompanyName">Company Name:</label> <input type="text" name="CompanyName" value="" /> </div> <div> <label for="ContactName">Contact Name:</label> <input type="text" name="ContactName" value="" /> </div> <div> <label for="Employees">Employee Count:</label> <input type="text" name="Employees" value="" /> </div> <div> <label> </label> <input type="submit" value="Submit" class="submit" /> </div> </fieldset> </form> </body> </html>ブラウザーでページを起動します。 (WebMatrix では、[ファイル] ワークスペースでファイルを右クリックし、[ブラウザーで起動] を選択します)。3 つの入力フィールドと [Submit] ボタンを含む簡単なフォームが表示されます。
この時点で [Submit] ボタンをクリックしても、何も起こりません。 フォームを役に立つものにするには、サーバーで実行される何らかのコードを追加する必要があります。
フォームからのユーザーによる入力の読み取り
フォームを処理するには、送信されたフィールドの値を読み取り、それらについて何かを行うコードを追加します。 この手順では、フィールドを読み取り、ユーザーによる入力をページに表示する方法を示します。 (運用アプリケーションでは、一般に、ユーザーによる入力についてさらに意味のあることを行います。それについては、データベースの操作に関する記事で行います。)
Form.cshtml ファイルの先頭に、次のコードを入力します。
@{ if (IsPost) { string companyname = Request.Form["companyname"]; string contactname = Request.Form["contactname"]; int employeecount = Request.Form["employees"].AsInt(); <text> You entered: <br /> Company Name: @companyname <br /> Contact Name: @contactname <br /> Employee Count: @employeecount <br /> </text> } }ユーザーが初めてページを要求したときは、空のフォームのみが表示されます。 ユーザー (あなたのことです) がフォームに入力して、[Submit] をクリックします。 これにより、ユーザーによる入力がサーバーに送信 (ポスト) されます。 既定では、要求は同じページ (つまり Form.cshtml) に送信されます。
今度のページの送信では、入力した値がフォームのすぐ上に表示されます。
ページのコードを見てください。 最初に、
IsPostメソッドを使って、ページがポストされているかどうか、つまり、ユーザーが [Submit] ボタンをクリックしたかどうかを確認します。 これがポストの場合、IsPostは true を返します。 これは、最初の要求 (GET 要求) またはポストバック (POST 要求) のどちらを処理しているかを ASP.NET Web ページで判断する標準的な方法です。 (GET と POST について詳しくは、Razor 構文を使用した ASP.NET Web ページ プログラミングの概要に関する記事の、HTTP GET と POST および IsPost プロパティに関するセクションをご覧ください。)次に、ユーザーが入力した値を
Request.Formオブジェクトから取得し、後で使うために変数に格納します。Request.Formオブジェクトには、ページと共に送信されたすべての値が含まれ、各値はキーによって識別されます。 キーは、読み取るフォーム フィールドのname属性に相当します。 たとえば、companynameフィールド (テキスト ボックス) を読み取るには、Request.Form["companyname"]を使います。フォームの値は、
Request.Formオブジェクトに文字列として格納されます。 したがって、数値、日付、その他の型として値を操作する必要がある場合は、文字列からその型に変換する必要があります。 この例では、Request.FormのAsIntメソッドを使って、(従業員数が含まれている) employees フィールドの値を整数に変換します。ブラウザーでページを起動し、フォーム フィールドに入力して、[Submit] をクリックします。 入力した値がページに表示されます。
ヒント
外観とセキュリティのための HTML エンコード
HTML では、<、>、& などの文字に特別な用途があります。 これらの特殊文字が不適切な場所に出現すると、Web ページの外観と機能が損なわれる可能性があります。 たとえば、ブラウザーでは、< 文字は (その後にスペースがない場合)、<b> や <input ...> などの HTML 要素の開始として解釈されます。 ブラウザーは、要素を認識できないと、再び認識できるものに到達するまで、< で始まる文字列を単に破棄します。 明らかに、これによってページ内のレンダリングがおかしくなる可能性があります。
HTML エンコードは、これらの予約文字を、ブラウザーが正しいシンボルとして解釈するコードに置き換えます。 たとえば、< 文字は < に置き換えられ、> 文字は > に置き換えられます。 ブラウザーは、これらの置換文字列をユーザーが表示したい文字としてレンダリングします。
ユーザーから取得した文字列 (入力) を表示するときは常に、HTML エンコードを使うことをお勧めします。 そうしないと、ユーザーは、Web ページで悪意のあるスクリプトを実行したり、サイトのセキュリティを損なうことや、単に開発者の意図しないことを行ったりできます。 (これは、ブログ コメントやユーザー レビューなどのように、ユーザーによる入力を受け取り、どこかに保存し、後で表示する場合に、特に重要です)。
これらの問題を防ぐため、ASP.NET Web ページは、コードから出力されるすべてのテキスト コンテンツの HTML エンコードを自動的に行います。 たとえば、@MyVar などのコードを使って変数や式の内容を表示すると、ASP.NET Web ページによって出力が自動的にエンコードされます。
ユーザー入力の検証
ユーザーは間違いを犯します。 フィールドに入力するように求めても忘れたり、従業員の数を入力するように求めても代わりに名前を入力したりします。 処理する前にフォームが正しく入力されていることを確認するには、ユーザーによる入力を検証します。
この手順では、3 つのフォーム フィールドをすべて検証し、ユーザーが空白のままにしていないことを確認する方法を示します。 また、従業員数の値が数値であることを調べます。 エラーがある場合は、検証に合格しなかった値をユーザーに伝えるエラー メッセージを表示します。
Form.cshtml ファイルで、最初のコード ブロックを次のコードに置き換えます。
@{ Validation.RequireField("companyname", "Company name is required."); Validation.RequireField("contactname", "Contact name is required."); Validation.RequireField("employees", "Employee count is required."); Validation.Add("employees", Validator.Integer()); if (IsPost) { var companyname = Request.Form["companyname"]; var contactname = Request.Form["contactname"]; var employeecount = Request.Form["employees"]; if(Validation.IsValid()){ <text> You entered: <br /> Company Name: @companyname <br /> Contact Name: @contactname <br /> Employee Count: @employeecount <br /> </text> } } }ユーザーによる入力を検証するには、
Validationヘルパーを使います。 必須フィールドを登録するには、Validation.RequireFieldを呼び出します。 他の種類の検証を登録するには、Validation.Addを呼び出して、検証するフィールドと実行する検証の種類を指定します。ページを実行すると、ASP.NET によってすべての検証が自動的に行われます。
Validation.IsValidを呼び出すことで結果を確認でき、すべてが合格の場合は true が返され、いずれかのフィールドの検証が不合格の場合は false が返されます。 通常は、ユーザーによる入力の処理を実行する前に、Validation.IsValidを呼び出します。次のように、
Html.ValidationMessageメソッドの呼び出しを 3 つ追加して、<body>要素を更新します。<body> <form method="post"> <fieldset> <legend>Add Customer</legend> <div> <label for="CompanyName">Company Name:</label> <input type="text" name="CompanyName" value="" /> @Html.ValidationMessage("companyname") </div> <div> <label for="ContactName">Contact Name:</label> <input type="text" name="ContactName" value="" /> @Html.ValidationMessage("contactname") </div> <div> <label for="Employees">Employee Count:</label> <input type="text" name="Employees" value="" /> @Html.ValidationMessage("employees") </div> <div> <label> </label> <input type="submit" value="Submit" class="submit" /> </div> </fieldset> </form> </body>検証エラー メッセージを表示するには、Html.
ValidationMessageを呼び出して、メッセージの対象となるフィールドの名前を渡します。このページを実行します。 フィールドを空白のままにして、[Submit] をクリックします。 エラー メッセージが表示されます。
[Employee Count] フィールドに文字列 ("ABC" など) を追加して、もう一度 [Submit] をクリックします。 今回は、文字列が正しい形式 (つまり整数) ではないことを示すエラーが表示されます。
ASP.NET Web ページには、ユーザーがブラウザーですぐにフィードバックを受け取ることができるように、クライアント スクリプトを使って検証を自動的に実行する機能など、ユーザーによる入力を検証するためのオプションが他にもあります。 詳しくは、後の「その他のリソース」セクションをご覧ください。
ポストバック後のフォームの値の復元
前のセクションでページをテストしたとき、検証エラーが発生した場合、(無効なデータだけでなく) 入力したすべてのものが消えてしまい、すべてのフィールドの値を入力し直す必要があることに気付いたかもしれません。 これは重要な点を示しています。ページを送信し、それを処理してから、ページをもう一度レンダリングすると、ページは最初から再作成されます。 ご覧のように、これは、ページが送信されたときにページに存在していたすべての値が失われることを意味します。
ただし、これは簡単に修正できます。 送信された値 (Request.Form オブジェクト内) にアクセスできるため、ページがレンダリングされるときにそれらの値をフォーム フィールドに戻すことができます。
Form.cshtml ファイルで、
value属性を使って、<input>要素のvalue属性を置き換えます。<!DOCTYPE html> <html> <head> <title>Customer Form</title> </head> <body> <form method="post"> <fieldset> <legend>Add Customer</legend> <div> <label for="CompanyName">Company Name:</label> <input type="text" name="CompanyName" value="@Request.Form["companyname"]" /> @Html.ValidationMessage("companyname") </div> <div> <label for="ContactName">Contact Name:</label> <input type="text" name="ContactName" value="@Request.Form["contactname"]" /> @Html.ValidationMessage("contactname") </div> <div> <label for="Employees">Employee Count:</label> <input type="text" name="Employees" value="@Request.Form["employees"]" /> @Html.ValidationMessage("employees") </div> <div> <label> </label> <input type="submit" value="Submit" class="submit" /> </div> </fieldset> </form> </body><input>要素のvalue属性は、Request.Formオブジェクトからフィールド値を動的に読み取るように設定されています。 ページが初めて要求される時点では、Request.Formオブジェクトの値はすべて空です。 フォームが空白であるため、これは問題ありません。ブラウザーでページを起動し、フォーム フィールドに入力するか、空白のままにして、[Submit] をクリックします。 送信された値を示すページが表示されます。
