@Hayato-shino05

Are you sure you want to delete the question?

If your question is resolved, you may close it.

Leaving a resolved question undeleted may help others!

We hope you find it useful!

ASP.NET C#でECサイトのヘッダーとフッターを再利用する方法がわからない

解決したいこと

大学の課題でECサイトを作っています。ASP.NET C#を使っていますが、ヘッダーとフッターを再利用する方法がわからず、製品詳細ページごとに毎回コピーしています。他のページでも同じ問題があって、既存のコードを呼び出す方法を知りたいです。ASP.NETの基本的な仕組み(例えばMVCやRazor Pages)についても初心者なので、簡単に教えていただけると助かります!

発生している問題・エラー

特にエラーメッセージは出ていませんが、毎回ヘッダーとフッターをコピーするのは非効率で、更新が必要なときに全ページを修正するのが大変です。ASP.NETでレイアウトを共有する方法がわからないです。

該当するソースコード

// 例: ProductsController.cs
using Microsoft.AspNetCore.Mvc;

namespace ECSite.Controllers
{
    public class ProductsController : Controller
    {
        public IActionResult Details(int id)
        {
            return View();
        }
    }
}

// 例: Views/Shared/_Layout.cshtml
<!DOCTYPE html>
<html>
<head>
    <title>@ViewData["Title"] - ECサイト</title>
</head>
<body>
    <header>
        <h1>ECサイト</h1>
        <nav>
            <a asp-controller="Home" asp-action="Index">ホーム</a>
            <a asp-controller="Products" asp-action="Index">製品一覧</a>
        </nav>
    </header>

    @RenderBody()

    <footer>
        <p>© 2025 ECサイト</p>
    </footer>
</body>
</html>

// 例: Views/Products/Details.cshtml
@{
    Layout = null; // テスト中
}
<!DOCTYPE html>
<html>
<head>
    <title>製品詳細</title>
</head>
<body>
    <header>
        <h1>ECサイト</h1>
        <nav>
            <a href="/">ホーム</a>
            <a href="/products">製品一覧</a>
        </nav>
    </header>
    
    <main>
        <h2>製品の詳細</h2>
    </main>
    
    <footer>
        <p>© 2025 ECサイト</p>
    </footer>
</body>
</html>

自分で試したこと

MVCテンプレートでプロジェクトを作ってみましたが、_Layout.cshtmlの使い方がわからず、ビューごとにヘッダーとフッターをコピーしています。_ViewStart.cshtmlでレイアウトを指定してみましたが、反映されなかったりエラーが出たりしました。ASP.NETの基本(MVCやサーバーサイドの仕組み)がまだ理解できておらず、困っています。どうすればよいでしょうか?

0 likes

1Answer

ASP.NETでレイアウトを共有する方法がわからないです。

Layout = null; // テスト中 にするからダメなのです。そうしたのは何か理由があるのですか?

1Like

Comments

  1. @Hayato-shino05

    Questioner

    コメントありがとうございます!
    はい、Layout = null; と設定したのは、テスト中にレイアウトを無効にして個別のビューだけを表示させて動作を確認しようと思ったからです。初心者なので、最初はレイアウトが邪魔になるかもと思ってオフにしてみたのですが、それが原因でヘッダーとフッターが共有されないとは気づきませんでした…。今は_ViewStart.cshtmlで全体に適用する方法を試してみようと思います。何か他に注意点があれば教えていただけると助かります!

  2. Visual Studio のバージョン、ターゲットフレーム、テンプレートは何かを書いてください。

  3. @Hayato-shino05

    Questioner

    コメントありがとうございます!私の使っている環境について、以下にまとめました。初心者なので、細かいところは間違ってるかもですが…。
    言語: C#
    フレームワーク: ASP.NET MVC (.NET 8.0ベースで、Core版です)
    データベース: SQL Server (Replicationを使ってデータ同期を試しています)
    フロントエンド: CSS, JavaScript, jQuery (Bootstrapも少し取り入れてレイアウトを整えています)
    サーバー環境: Windows Server で IIS を使用 (ローカル開発中はVisual StudioのIIS Expressですが、デプロイ時は本番のWindows Serverを考えています)
    ECサイトの課題でこれらの技術を使ってるんですが、ヘッダーやフッターの再利用以外にも、コードの最適化やサイト全体のパフォーマンスを良くする方法を知りたいです。例えば、データベースのクエリを効率的に書くコツとか、JavaScriptでページを速くロードさせるテクニック、またはセキュリティ面で気をつけることとか…。最終目標は、ユーザーが商品を検索・閲覧して実際に購入できるような本格的なオンラインショップを作ることです。カート機能や決済連携も入れる予定なんですが。そんな目標に向けてのTipsもあれば、経験者の方からアドバイスいただけたらすごく助かります!よろしくお願いします。

  4. Visual Studio のバージョン、テンプレートは何かを書いてください。

    いろいろ疑問があるようですが、ここでの質問は Layout の使い方に絞ってください。

  5. @Hayato-shino05

    Questioner

    おっしゃる通り、質問が散らばっちゃってすみません…。Layoutの使い方に焦点を絞って進めたいと思います。まずはお尋ねのVisual Studioとテンプレートについて書いておきますね。
    Visual Studio のバージョン: Visual Studio 2022 (Community Editionを使っています)
    テンプレート: ASP.NET Core Web App (MVC) のテンプレートを選んでプロジェクトを作成しました。デフォルトの設定で進めています。
    Layoutの使い方について、もっと具体的な例が欲しいんですけど、例えばヘッダーとフッターを再利用するシンプルなサンプルコードとかありますか?あと、製品閲覧ページで、たくさんの製品ごとに別々のページを作らなくても、1つのページだけで複数の製品を表示できる方法(パラメータを使って動的に変えるみたいな)ってどうやるんですか?まだその辺りがわからなくて…。アドバイスいただけると助かります!よろしくお願いします。

Your answer might help someone💌