• BloggerへASP.NETで作った問合せ画面を埋め込む①

BloggerへASP.NETで作った問合せ画面を埋め込む①

投稿者 hyperhands 時刻: 水曜日, 4月 07, 2010 カテゴリー , ,
サイト名がASP.NET自作専科となっているのに、しばらくASP.NET関連の情報は公開しておりませんでしたが、元来私の得意分野はASP.NET(C#)による開発です。

BloggerTipsの方で、ざっくりとサイトの体を成す程度にはなったと思うので、そろそろASP.NETのTipsの記事を書こうと思います。

なぜ全てをASPで作らないか？

Bloggerを使わずにすべてをASP.NETで作り上げることも可能ですが、かなりの労力と時間的コストが掛かる事になります。
何より、ASP.NETを動作させるためのホスティング環境の構築・運用・維持・拡張コストまでを考え併せると、無料ブログツールをメインホストに採用する方が、ASP側の各種サーバスペック・ネットワーク帯域ともに抑える事が可能になりコスト削減に繋がります。

もしかすると、Google AppEngineを使ってASP.NETの置き換えが出来るのではないかと考えているところではありますが、現状では調査が進んでおりませんので、ひとまずBloggerに足りない機能はASP.NET(C#)で作りこみ、Blogger記事やStaticページなどにiFrameタグで埋め込む事とします。 

ハイパーハンズで作成したShoppingCartシステムは膨大なソースコードで構築されており、参考例としては相応しくないと思いますので、簡単な１ページものの問合せ画面で説明したいと思います。
 私はVisualStudio2008 Stdで開発しましたが、所有していない場合は無料の開発ツールVisual WebDevelopper2008 ExpressEditionをマイクロソフトのWebサイトから、インストールすると良いでしょう。

インストールが完了したらDevToolを起動し、ファイルメニューから「新規作成＞Webサイト」でソリューションを作成します。

左側に表示されるソリューションエクスプローラに表示されているプロジェクトを右クリックして、メニューから「追加＞新しい項目」と選択し、Webフォームが選択されている事を確認し、WebForm1.aspxとなっているファイル名を「FormMail.aspx」と変更します。
Webフォームの拡張子は「aspx」と決められています。
作成されたFormMail.aspxをソリューションエクスプローラでダブルクリックすると、左側の画面にFormMail.aspxのソース画面が表示されますので、画面左下のボタンから「デザイン」を選択し、画面のデザインモードへ変更し、ツールボックスから以下のコントロールを画面にドラッグ＆ドロップで配置し、プロパティ画面の（ID)欄にオブジェクトのユニークな名前を設定します。
コントロールID
TextBoxtxtName
TextBoxtxtMail
TextAreatxtSubject
ButtonbtnSubmit


以下のコードをソース画面の「head」タグ以下と置き換えてやれば一発でデザインは完了です。
※　当サイトで適用している画像認証コード機能（CAPTCHA）は含まれていません。
項目名などの表示用にいくつかラベルコントロールを使って文字列を表示させていますが、説明は省略させて頂きます。 
<head runat="server">
    <title>お問合せ</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <table width="100%"><tr><td width="50px"><asp:Label ID="labName" runat="server" Text="お名前"></asp:Label></td>
    <td><asp:TextBox ID="txtName" runat="server" MaxLength="20" Width="95%"></asp:TextBox>
    <asp:Label ID="labMsgName" runat="server" ForeColor="Red"></asp:Label></td></tr>
    <tr><td><asp:Label ID="labMail" runat="server" Text="E-Mail"></asp:Label></td>
    <td><asp:TextBox ID="txtMail" runat="server" MaxLength="50" Width="95%"></asp:TextBox>
    <asp:Label ID="labMsgMail" runat="server" ForeColor="Red"></asp:Label></td></tr>
    <tr valign="top"><td><asp:Label ID="Label2" runat="server" Text="内容"></asp:Label></td>
    <td><asp:TextBox ID="txtSubject" runat="server" Height="300px" TextMode="MultiLine" 
            Width="95%" MaxLength="1000"></asp:TextBox><asp:Label ID="labMsgSubject" runat="server" ForeColor="Red"></asp:Label></td>
    </tr>
    <tr><td colspan="2" align="right">
    <asp:Button ID="btnSubmit" runat="server" onclick="btnSubmit_Click" 
            Text="送信" style="margin-right:40px;"/></td></tr>
    </table>
    </div>
    </form>
</body>
※　CSSをあまり使っていない少し古い書き方なのはご愛敬という事で…

続きは、また次の記事に記載します。

コメント(0)

コメントを投稿

関連記事
ASP.NET
Blogger
問合せ画面