SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

DeveloperZine(デベロッパージン)- エンジニアの意思決定を支える技術情報メディア ProductZine

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

Expression Webチュートリアル

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

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


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」をクリックすると確認できます。
 

この記事は参考になりましたか?

連載通知を行うには会員登録(無料)が必要です。
既に会員の方はを行ってください。
Expression Webチュートリアル連載記事一覧

もっと読む

この記事の著者

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

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

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

CodeZine(コードジン)
https://codezine.jp/article/detail/1832 2009/04/14 11:19

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー