 |
 |
|||||||||||||||||||||||||||||||||||||||||||||
| フォームから入力された値を取得する |
|
|||||||||||||||||||||||||||||||||||||||||||||
ここでは、テキストボックスから文字列を取得する方法を解説します。テキストボックスやボタンもインスタンスの一種です。テキストボックスやボタンなどをコントロールを配置する度に新しいインスタンスが作成されます。 それでは、新しいプロジェクトを作成しましょう。メニューバーから「ファイル」→「新規作成」→「Webサイト」を選び、ASP.NET Webサイトを追加します。プロジェクト名は好きな名前で構いません。 プロジェクトを作成すると「Default.aspx」ファイルが立ち上がりますので、コードエディタの下にある「デザイン」をクリックし、Webフォームデザイナ画面に切り替えます。（立ち上がらない場合は、画面左にあるソリューションエクスプローラから「Default.aspx」をダブルクリックしてファイルを開き、デザインをクリックします)  「デザイン」ボタンをクリックしてWebフォームデザイナに切り替える 次に、コントロールを配置するためのツールボックスを使用します。ツールボックスが表示されていない場合は、メニューバーから「表示」→「ツールボックス」をクリックして表示させます。  Webページをデザインするための「ツールボックス」 ツールボックスに表示されている「標準」タブをクリックすると、Webページに配置できるコンポーネントの一覧を表示したり、折りたたんだりすることができます。これらのパーツをWebページに組み込むには、組み込みたいパーツの種類を選んでWebフォームデザイナの好きな場所にドラッグ&ドロップします。今回はテキストボックスとボタンをひとつずつ配置させたいので、「TextBox」と「Button」を以下のように配置してください。  配置された「テキストボックス」とボタンコントロール コントロールのインスタンス名を確認するには、確認したいコントロールをクリックするとソースエディタの下に以下のようなコードが表示されます。  コントロールの種類#コントロール名で表示される ここに表示されているコントロール名が、ソースコードの編集時に使用するインスタンス名になります。 Webアプリケーションでは特定のイベントが発生したときにどのような処理を行うかを記述していくことで、アプリケーションとして動作するようにコーディングしていきます。このように、イベントと連動して動作するアプリケーションの事をイベント駆動型と呼びます。ASP.NETでは「ボタンが押された」、「ページが読み込まれた」時などにイベントが発生するようになっており、それぞれに対応するイベントハンドラをコーディングすることによって動作する仕組みになっています。 今回のようにWebフォームデザイナからボタンなどを配置した場合は、イベントを追加する必要があります。イベントを登録するには、イベントを登録したいコントロールをダブルクリックすれば、「Default.aspx.cs」ファイルにイベントが追加されます。 今回はボタンにイベントを追加しますので、ボタンをダブルクリックしてイベントを追加させてください。イベントが追加されると、自動的に「Default.aspx.cs」ファイルが開かれコードエディタに切り替わりますので、以下のようにコードを追加してください。
コンポーネントをダブルクリックすると、19行目のようにボタンがクリックされたときのイベントが自動的に追加されます。このイベントに処理を記述することで、ボタンが押されたときの処理内容を実装することができます。15行目は標準で追加されているイベントハンドラで、ページが読み込まれたときに行いたい処理がある場合はここに記述します。 テキストボックスから文字列を取得したい場合はテキストボックスのインスタンスが持つ「Text」プロパティを使用します。22行目では、実際にTextBox1インスタンスが保持している文字列をString型の変数に格納するよう実装しました。 このプログラムを実行し、テキストボックスに文字列を入力してボタンを押すと、実行結果は以下のようになります。  プログラムの実行結果
Webページに文字列を出力する為に使用していたResponse.Writeメソッドは、Webページの任意の場所に文字列を挿入することができません。Webページの特定の場所に動的に作成した文字列を挿入するためにはLiteralコントロールを使用します。  「Literal」コントロール それでは、先程のプログラムを少し変更してLiteralコントロールを設置してみましょう。以下のように配置します。  文字列の入力と「Literal」コントロールの配置を行う 「Literal」コントロールに表示する文字列の設定には、Literalインスタンスの「Text」プロパティを使用して値を代入させます。早速ですが、プログラムのコードを以下のように変更してください。
このコードでは、Literal1インスタンスの「Text」プロパティを使用し、テキストボックスから取得した変数「str」を代入しています。プログラムを実際に動作させテキストボックスに文字列を入力してボタンを押すと、実行結果は以下のように変わります。  プログラムの実行結果 このように、動的に生成された文字列が好きな位置に挿入できているのがわかります。「Literal」コントロールの特徴は、文字列だけでなくHTMLのコードも含めることができる点です。先程のプログラムを以下のように変更すると、動的に生成した文字列の表示形式を変更して出力することもできます。
このプログラムでは、String.Formatメソッドを使用し、テキストボックスから取得した文字列をHTMLタグを用いて修飾しています。HTMLの内容は、このホームページのトップページを新しいウィンドウで開くようリンクを設定し、文字列を太字にするよう記述しました。 String.Formatの引数設定ではダブルクォーテーション「"」の囲いの前にアットマーク「@」が記述されています。これはこれから入力されるスラッシュ「/」やイコール「=」等の記号が文字列であることを示すために使用しています。「//」をこの@なしに引数に設定すれば、それ以降のコードは文字列として認識されてしまうからです。なお、ダブルクォーテーション「"」を文字列として含めるには、「""」と記述します。 プログラムの実行結果を見てみましょう。テキストボックスに好きな文字列を入力し、ボタンをクリックすると実行結果は以下のようになります。  実行結果 実行結果を見てみると、入力された文字列に対してリンクの設定とフォントの設定が反映されているのがわかります。もちろん、文字列をクリックすれば新しいウィンドウが開かれ、このホームページのトップページが表示されます。String.Formatの引数として変数を設定すれば、リンク先もプログラムによって設定する事が可能です。
Webフォームデザインを使用していくと、コントロールの名前を変更したり、コントロールに関する様々な設定をしたいことがあります。何よりデフォルトのボタンに表示されている文字列が「Button」のままなのが気になりますね。これらの値を変更する為には「プロパティ」ウィンドウを使用します。ツールボックスが表示されていない場合は、メニューバーから「表示」→「その他のウィンドウ」→「プロパティ ウィンドウ」をクリックして表示させます。  プロパティウィンドウ ボタンに表示されている文字列を任意の文字列に変更したい場合は、変更させたいボタンをクリックし、「Text」プロパティの値を書き換えます。ここでは、「Button1」コントロールをクリックし、「Button」から「取得」に変更してください。 プロパティの値を変更すると、ボタンの表示が以下のように変更されます。  変更された「Button1」コントロール プロパティを使用すれば、その他コントロールに関する様々な設定を行えます。コントロールのインスタンス名を変更するには、変更したいコントロールをクリックした状態で「ID」プロパティを変更します。ただし、イベントハンドラを既に追加していたり、インスタンス名を直接指定しているコードを実装している場合、ソースコードに記述されているインスタンス名までは自動的に変更してくれませんので注意してください。 もちろん、コントロールだけでなく、Webページ自体にもプロパティが存在し、ページのタイトルやページの背景などが指定できます。Webページのプロパティを呼び出すには、プロパティウィンドウの最上部にあるドロップダウンリストの下三角ボタン「▼」をクリックし、「DOCUMENT」を選択します。 「Title」プロパティは、ホームページのタイトルを設定します。ここでは、「無題のページ」から「テストページ」に変更してください。次に、Webページの背景を設定しましょう。「BgColor」プロパティに「#333333」と入力し、背景の色をグレーに変更させます。なお、「BgColor」プロパティをクリックした状態で、テキストボックスの右端に表示される「...」ボタンをクリックして、カラーパレットから色を選択することも可能です。 このままではテキストが見づらいので、テキストの色も変更します。「Text」プロパティをクリックし、テキストボックスの右端に表示された「..」ボタンをクリックして「その他の色ウィンドウ」から白色を選択してください。  テキストカラーを変更してもリンクの色までは反映されないので、リンクが設定されている文字列の色も変更します。「Link」プロパティを「#FFFFFF」に、「VLink」プロパティを「#999999」に変更します。「Link」プロパティはまだ開かれていないリンク先の色を、「VLink」プロパティは既に開かれているリンク先の色を設定するプロパティです。 プログラムを実行すると、以下のようになります。  プログラムの実行結果 それでは、変更されたプロパティを確認していきましょう。ページのタイトルを見ると、ホームページのタイトルが「テストページ」に変更され、背景もグレーに変更されています。文字列も白色に変更されているのがわかりますね。テキストボックスに任意の文字列を入力すると、リンクのカラーも一度も開いてない場合は白色に、一度開いたことがある場合は薄い灰色に設定されます。UIを極めるためにも、プロパティは状況に応じて使いこなせるようになりましょう。 |
||||||||||||||||||||||||||||||||||||||||||||||
 |
|
 |
|
 |
