0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

ドットネットフレームワークでヘッダーやサイドメニューをインクルードする方法

Last updated at Posted at 2023-01-13

.NETフレームワークでのインクルード方法

こんにちは!見習いIOTエンジニアのめぐみです。

多くの画面で共通するヘッダーフッターやサイドメニューなどは使いまわしたい!
1か所に記載した共通部分を読み込みする「インクルード」ですが、ドットネットフレームワークでは簡単にできる♪と思いきや、苦戦させられました(T_T)

今回の記事ではドットネットフレームワークでのインクルードの方法を書いていきます。
※自分の勉強・備忘録と同じ沼にはまった方の助けになりますように。

まずは「Site.Master」を作ろう!

これが使いまわせる共通部分になります。
プロジェクトを右クリックして「追加」⇒「新しい項目」⇒「WEBFormsのマスターページ」というカッコいい名前をクリックします。
![dotnetStart.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2984282/255bf0d6-51af-943a-a0be-e57371bd1c2e.jpeg)

そこにヘッダーやフッターなどを記載したら、メインコンテンツ(ページごとに異なる部分)を表示させたい箇所に以下を記載してください。




<asp:ContentPlaceHolder ID="MainContent" runat="server">
</asp:ContentPlaceHolder>



このasp:ContentPlaceHolderはいくつも作れます。
メインコンテンツ以外にも、例えばお気に入りのサムネイル画面や、ユーザーや時期によってヘッダーの表示内容を変えたい時にも使えそうですね!
重要なのはIDで、メインコンテンツを記載するページでこのIDを指定することになります。

メインコンテンツを作って連携

では次は、ページごとに異なる内容を表示したいメインコンテンツ!
「追加」⇒「新しい項目」⇒「WEBフォーム」で作った拡張子が「aspx」 のファイルですが、まず1番上の<%@ Page Langage="" %>の中でマスターページ(共通部分のページ)を登録するために、この1文を追記します。


MasterPageFile="~/Site.Master"

他はまっさらな状態で以下を記載してください。


<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
</asp:Content>


このasp:Contentタグを開いて、そのの中にメインコンテンツの内容を記載していきましょう!
これでインクルードは無事完了です(^^)

そもそもWEBアプリケーション「空」を選択してしまったのがすべての始まり・・・かもしれない

デザインしかしていなかった私はWEBアプリケーションを作成したときに自動で生成されるヘッダーやメニューを「消すのが面倒」としか考えていませんでした。
そこで選択していたのが「空」のWEBアプリケーションです。

![uploading...0]()

ですが今回インクルード方法に困った挙句「空じゃない方のアプリケーションを参考にしてみよう!」と試したところ、あっさり、というかもう既にSite.Masterasp:Contentタグも用意されていたのです。
初心者のうちは、面倒くさいなんて考えていたらダメなんですね!

まとめ

このSite.Masterasp:ContentPlaceHolderを使えば、WEBページのコンテンツをパーツ化して使いまわすのがとても簡単にできます。
覚えるまでは長い道のりかもしれませんが、覚えてしまえばフレームワークはやはりとても便利なツールになってくれそうです。
今後も勉強を続けて、脱!見習いを目指していきます♪
最後まで読んでくださり、ありがとうございました。

0
0
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?