1. |
さて、確認画面付きメールフォームを作ってみましょう。
前回の続きで作っていきます。
前回作った、MailFormサイトのMailFormAppプロジェクト内のDefault.aspxを開き、デザインモードに切り替えます。
その画面の中に、パネルを2枚ドラッグします。
赤い丸のあたりに見えるのがパネルです。
画面に出ている見出しから送信ボタンの手前までを一枚目のパネルに移動します。
送信ボタンは2枚目のパネルに移動します。
次いで、1枚目のパネルにボタンを追加し、「確認画面へ」とでもしておきましょう。
二枚目のパネルに一枚目に近い構図で確認画面を作ります。
確認する内容が表示される部分に入れておくのは「Label」です。
ついでのボタンをもう一個追加して、「入力画面に戻る」としておきましょう。
こんな感じになりましたか?
二枚目のパネルのプロパティを開いて、「Visible」という項目を「true」から「false」に変更してください。これによって、2枚目のパネルは最初は見えなくなります。
ここから先は、Labelは上から順番にLabel1、Label2、Label3になっていることを前提に話を続けます。
まず、「確認画面へ」ボタンをダブルクリックします。
protected void Button2_Click(object sender, EventArgs e)
{
} |
というところにカーソルがあると思います。
そこに、TextBox1の内容をLabel1へ、TextBox2の内容をLabel2へ、TextBox3の内容をLabel3へと書けばよいのですが、そのままだと、うまく表示されなかったり、サーバに悪戯するためのコードが入っていて、サーバを乗っ取られてしまう可能性があります。それを避けるために、HTMLエンコードを施します。
これも、メール送信の時にやったのと同じ方法です。
Label1.Text = Server.HtmlEncode(TextBox1.Text);
Label2.Text = Server.HtmlEncode(TextBox2.Text);
Label3.Text = Server.HtmlEncode(TextBox3.Text); |
と3行書きましょう。
そのうえで、一枚目のパネルを消して2枚目のパネルを表示します。
Panel1.Visible = false;
Panel2.Visible = true; |
簡単ですね。
次に、「Default.aspx」に戻って、「入力画面に戻る」ボタンをダブルクリックしましょう。
ここでパネルの本領発揮となります。
通常は、入力データを戻してテキストボックスを作り直して・・・といった作業が必要になりそうなところですが、実は、パネルの中のデータは見えなくても保持されています。
そのため、ここには、パネル2を消してパネル1を表示すると書けばいいだけなのです。
Panel1.Visible = true;
Panel2.Visible = false; |
送信ボタンはいじりません。
なんと、もう完成です。 |
2. |
その場で試験してみましょう。
例のごとく、上のほうにある緑色の三角(再生)アイコンをクリックするだけです。
どうですか?
期待通りに動きますか?
この状態で、タグを入力されると、エラーになってしまいます。
このコードは、タグが入っても大丈夫なので、タグを入れられるようにしましょう。
そのためには、「Default.aspx」をソース表示にして、先頭行におまじないを書いてあげる必要があります。
これは、悪さをする可能性のある文字や文字列を確認しなくなるおまじないです。
今回は、対策しているので問題ありませんが、実際にこのコードを書くときは細心の注意を払ってコードを書く必要があります。
特に、データベースを使うときは要注意です。
あれ?、今度は、改行が反映されていません。
これは、Labelが改行コードをそのまま表示しているけど、HTMLでは改行を<br>としなければいけないから起きる現象です。
では、無理やり改行しましょう。
改行コード”\n”を”<br />”に置き換えます。
Default.aspx.csの
Label3.Text = Server.HtmlEncode(TextBox3.Text); |
の行を
Label3.Text = Server.HtmlEncode(TextBox3.Text).Replace("\n",
"<br />"); |
と書き換えます。
メール送信でも同じことが起きているはずですね、
mailMessage += "内容:" + Server.HtmlEncode(TextBox3.Text); |
の部分を
mailMessage += "内容:" + Server.HtmlEncode(TextBox3.Text).Replace("\n",
"<br />"); |
と書き換えておきましょう。
これでうまくいくはずです。
|
3. |
テキスト本文の作成をがんばれば、表示した通りの文面を受け取ることも可能です。
単純に、<table>タグを正確に埋め込んで本文を作ればいいのです。
私は、面倒なので、そこまではしません。
がんばって自分なりのメールフォームを作ってください。 |
4. |
ここまでのプロジェクトを用意しました。
参考にされたい方はここからお持ちください。 MailFormApp.zip へのリンク |