CodeZine(コードジン)

特集ページ一覧

Expression WebでASP.NETと連携するWebフォームを作ってみよう

Expression WebにおけるASP.NETコントロールの利用

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2007/11/08 14:00
目次

Webユーザーコントロールの挿入

 ASPXファイルの任意の場所に、Webユーザーコントロールを挿入してみます。見出しの次の<p>タグを<div>タグに変更し、フォルダ一覧作業ウィンドウからその<div>タグ内にASCXファイルをドラッグ&ドロップしてWebユーザーコントロールを挿入するまでの手順を説明します。

  1. ASPXファイルを開き、見出しの次の<p>タグを<div>タグに変更します。クイックタグセレクタの<p>の▼をクリックし、[タグの編集]をクリックします。
     
  2. クイックタグエディタが起動するので、<p><div>に書き換えて、OK(緑色のチェック印)をクリックするか、[Enter]キーを押します。
     
  3. タグが変更されると<div>ボックス全体が選択された状態になるので、その<div>ボックス内にカーソルを移動し、フォルダ一覧作業ウィンドウからASCXファイルを選択し、<div>ボックスの中までドラッグ&ドロップします。
     
  4. Webユーザーコントロールが挿入されました。
     
ASPXファイルに挿入されたWebユーザーコントロールを編集するには
 ASPXファイルに挿入されたWebユーザーコントロールを編集するには、[コモン UserControl タスク]の[UserControlの編集]をクリックし、ASCXファイルを開きます。
[UserControlの編集]をクリック
[UserControlの編集]をクリック

ブラウザでプレビュー

 Expression Webをインストールすると、同時にASP.NET開発サーバーがインストールされるので、Windows XP Home EditionのPCでもブラウザで動作確認が行えます。

  1. ASPXファイルを上書き保存([Ctrl]+[S]キー)し、ツールバーの[ブラウザでプレビュー]ボタンをクリックします([F12]キーを押してもよい)。
     
  2. ASP.NET開発サーバーが起動し、Internet ExplorerでASPXファイルがプレビューされました。
     
フォームの位置が1行下になってしまった場合は?
 <p>タグから<div>タグに変更したあと、フォルダ一覧作業ウィンドウからASCXファイルをその<div>領域内にドラッグ&ドロップすると、1行下にそのWebユーザーコントロールが挿入される場合があります。
この問題を修正するには、コードビューに切り替え、その<div>の後にスペース文字「&nbsp;」が挿入されていないかどうか確認し、それを削除します。
 

まとめ

 ダイナミックWebテンプレートからWebページを作成し、ASPXファイルとして保存した段階では、拡張子が.htmから.aspxに変わるだけのため、<form>タグは存在しません。しかし、その後、Webページ上に任意のコントロールをドラッグ&ドロップをすることで、<form>タグと<uc1:form id="form1" runat="server" />が挿入され、ASPXファイルとして動作するようになります。

 また、Expression Webをインストールすると、同時にASP.NET開発サーバーがインストールされるため、IISが含まれていないWindows XP Home EditionのPCにおいてもブラウザでプレビューが行えます。

 ただし、Expression Webは、XHTML、CSS、XML、XSLT、およびASP.NET 2.0を作成するためのWebデザインツールであり、開発ツールではないため、Webフォームの入力結果を出すためのイベント生成などのコードを書く場合は、Visual Studioを利用してください。

 ASP.NETコントロールのプロパティなどは、できる限りVisual Studioと共通を維持しているため、Expression Webとの連携がスムーズに行えます。

カスタムASP.NETコントロールをExpression Webで使えるようにしたい
 Expression Webの現行バージョンにおいては、残念ながらカスタムASP.NETコントロールに対応していないため、正常動作できません。
Visual Studio 2005の場合、カスタムASP.NETコントロールを作成すると自動的にGACに登録されますが、Expression Webは開発ツールではないため、カスタムASP.NETコントロールをExpression Webで利用できるようにするには、その.NETアセンブリを使用するシステム上のGACに登録して、カスタムコントロールをインストールする必要があります。
詳しくは、Expressionプログラムマネージャーのブログ、Andrew's Blogに掲載されているので参考にしてください。
なお、次バージョンのExpression Web 2では、カスタムASP.NETコントロールに対応する予定です。Microsoft MIX 2007の公式サイトにてブレイクアウトセッションデモが公開されているので、そちらも併せてご覧ください。トップページ下側のパネルで、[Microsoft MIX07]-[Breakout]-[Designer]を選択し、その下の一覧から「DES03 - Designing with Microsoft Expression Web: Today and Tomorrow」をクリックすると確認できます。
 


  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:Expression Webチュートリアル

著者プロフィール

  • 小濱 良恵(コハマ ヨシエ)

    Microsoft MVP for Expression Web MSソフトの解説書やWeb記事を執筆するテクニカルライター。Expression Webの前身となるFrontPageは2000バージョンから使用しはじめ、個人サイト(www.wanichan.com) においてFrontPageや...

あなたにオススメ

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5