今回は、ASP.NETのWebフォームを使って、ブラウザに「Hello World」を表示する簡単なプログラムを作成します。
Webフォーム(Web Forms)とは、ASP.NETでWebアプリケーションを開発するためのフレームワークです。
あらかじめ用意されているサーバーコントロールと呼ばれるパーツをドラッグアンドドロップして、視覚的にページをデザインすることができます。
Webフォームに関する詳しい内容は、以下のマイクロソフトの公式サイトを参照してください。
開発環境
本記事では、Visual Studio Community 2022を使って、プログラムを作成します。
開発環境の詳細は、こちらを参照してください。
Webフォームを使ってWebアプリケーションを作成するための前準備
Webフォームを使ってWebアプリケーションを作成するには、Visual Studio Installerで必要なコンポーネントをインストールする必要があります。
Visual Studio Installerを起動して、「ASP.NETとWeb開発」を選択します。
オプションとして赤枠内の項目がチェックされていることを確認します。
この中の「.NET Framework プロジェクトと項目テンプレート」は、デフォルトではチェックされていないので、忘れずにチェックします。
![vbweb1-1](https://mulberrytassel.com/wp-content/uploads/2023/02/vbweb1-1.png)
Webフォームのプロジェクトを作成する
Visual Studioを起動して、Webフォームのプロジェクトを新規に作成します。
ここでは、Webフォームのテンプレートは使わず、空のプロジェクトから始める手順を解説します。
新しいプロジェクトの作成
「新しいプロジェクトの作成」画面から、「Visual Basic」「すべてのプラットフォーム」「Web」を選択します。
選択した項目に該当する一覧が表示されるので、「ASP.NET Web アプリケーション(.NET Framework)」を選択し、「次へ」ボタンを押下します。
![vbweb1-2](https://mulberrytassel.com/wp-content/uploads/2023/02/vbweb1-2.png)
プロジェクト名、場所、ソリューション名、フレームワークを設定して、「作成」ボタンを押下します。
この例では、プロジェクト名を「SmpWebForm1」、フレームワークを「.NET Framework 4.8」にしています。
なお、ソリューション名は、プロジェクト名を入力すると自動的に設定されます。
![vbweb1-3](https://mulberrytassel.com/wp-content/uploads/2023/02/vbweb1-3.png)
ここでは、テンプレートで用意されている「Web Forms」ではなく、一番上の「空」を選択します。
また、「フォルダーおよびコア参照を追加する」で「Web フォーム」にチェックを入れます。
「作成」ボタンを押下して、Webフォームのプロジェクトを作成します。
![vbweb1-4](https://mulberrytassel.com/wp-content/uploads/2023/02/vbweb1-4.png)
Webフォームのマスターページの作成
まず、Webフォームのマスターページを作成します。
ソリューションエクスプローラーのプロジェクトにカーソルを合わせます。
![vbweb1-5](https://mulberrytassel.com/wp-content/uploads/2023/02/vbweb1-5.png)
右クリックから「追加」→「Web Forms のマスターページ」を選択します。
![vbweb1-6](https://mulberrytassel.com/wp-content/uploads/2023/02/vbweb1-6.png)
「項目の名前を指定」画面が表示されるので、適当な名前を入力し、「OK」ボタンを押下します。
![vbweb1-7](https://mulberrytassel.com/wp-content/uploads/2023/02/vbweb1-7.png)
プロジェクト配下に、該当するマスターページが作成されていることを確認します。
![vbweb1-8](https://mulberrytassel.com/wp-content/uploads/2023/02/vbweb1-8.png)
Webフォームの作成
マスターページを作成したら「Hello World 」を表示するためのページを作成します。
マスターページと同様に、ソリューションエクスプローラーのプロジェクトにカーソルを合わせ、右クリックから「追加」→「新しい項目」を選択します。
![vbweb1-9](https://mulberrytassel.com/wp-content/uploads/2023/02/vbweb1-9.png)
「マスターページを含む Web フォーム」を選択し、適当な名前を入力します。
「追加」ボタンを押下して、次の画面に遷移します。
![vbweb1-10](https://mulberrytassel.com/wp-content/uploads/2023/02/vbweb1-10.png)
「マスターページの選択」画面が表示されるので、作成したマスターページを指定します。
![vbweb1-11](https://mulberrytassel.com/wp-content/uploads/2023/02/vbweb1-11.png)
プロジェクト配下に、該当するWebフォームが作成されていることを確認します。
![vbweb1-12](https://mulberrytassel.com/wp-content/uploads/2023/02/vbweb1-12.png)
Webフォームの編集
作成されたWebフォームを、以下のように編集します。
追加するのは、5行目だけです。
1 2 3 4 5 6 |
<%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/SmpSite.Master" CodeBehind="WebForm1.aspx.vb" Inherits="SmpWebForm1.WebForm1" %> <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server"> </asp:Content> <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server"> <h1>Hello World</h1> </asp:Content> |
プログラムを実行する
WebForm1.aspxを開いた状態で、Visual Studioの上部にある「IIS Express (Google Chrome)」をクリックして、プログラムを実行します。
![vbweb1-13](https://mulberrytassel.com/wp-content/uploads/2023/02/vbweb1-13.png)
ブラウザが起動し、画面に「Hello World」が表示されます。
![vbweb1-14](https://mulberrytassel.com/wp-content/uploads/2023/02/vbweb1-14.png)